MalinandClaude Sonnet 5
65c01ddb43
Anti-AI-slop design skill (greenfield pages, audits, redesigns, design extraction from URLs/screenshots) -- installed and validated in an earlier session, was sitting untracked. Full reference library: components, macrostructures, themes, genres, verbs (audit/redesign). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
24 lines
1.2 KiB
Markdown
24 lines
1.2 KiB
Markdown
## 19 · Map / Diagram
|
|
|
|
A single large spatial diagram organises the page — flowchart, floor plan, network graph, system map. Information is laid out *spatially*, not linearly.
|
|
|
|
- **Heading:** a small orientation phrase above or beside the map.
|
|
- **Body:** the map itself; nodes and edges; a legend somewhere.
|
|
- **Divider:** the diagram has no internal sections — it's one composition.
|
|
- **Button:** node-internal links; one outlined CTA below the map.
|
|
- **Image:** the map IS the image; SVG with interactive hovers.
|
|
- **Reveal:** node-by-node ink-on as the user enters viewport (cap to 5 nodes).
|
|
|
|
Reach for it for system overviews, ecosystem maps, process diagrams, organisation charts.
|
|
|
|
Avoid as a substitute for narrative. Some stories shouldn't be read spatially.
|
|
|
|
Reference: process visualisation sites, ecosystem maps, knowledge-graph products.
|
|
|
|
**Sample opening lines** (imitate the *specificity* — Map / Diagram openings name the path or the territory):
|
|
> *"Browser → API → Database. Where Tracejam fits."* — names the layers, names the position
|
|
> *"From stdin, through the pipe, into your dashboard."* — labels the spatial flow on the page below
|
|
> *"Three tiers · two regions · one ledger."* — counts the system, geographic + structural
|
|
|
|
---
|