What this is
Claude Design answers UX questions with working, clickable screens - and it reads your design system before it designs anything. That one sentence changes a designer's week in two directions at once: the system document you maintain becomes an input a tool executes, and the artifacts you review arrive at prototype fidelity instead of as static mockups. This map is the route through both changes: four stages, from "what is this tool" to a system document the tool can execute, with the StackNova articles that cover each stage.
It is a route, not a reference. If the Design stack map is the atlas of the whole Design library, this is the itinerary for one specific trip: a working designer adopting an AI design partner.
The tool is the easy part. The work is making your design decisions readable - by machines and by the next designer.- the theme of this map
Meet the tool
Start with what Claude Design actually is and where it sits in a designer's day - partner, not replacement.
An AI design partner that answers UX questions with working prototypes: what it produces, what it needs from you, and what stays firmly a human call. Read this first - everything else on the map hangs off it.
- → What is Claude Design? LEVEL 101 - lives in the AI Path
- → Designing with Claude Design - live presentation
The language it reads
Claude Design is only as on-brand as the system you hand it. Stage two is the vocabulary: what a design system is, the tokens it is built from, and real examples to calibrate against.
A design system is the shared language of a product; design tokens are its atoms - and exactly what an AI tool parses. The examples gallery shows complete systems, including downloadable files in the format Claude Design reads best.
- → What is a design system? LEVEL 101
- → What are design tokens? LEVEL 101
- → Design system examples LEVEL 101 - with files to download
What it hands back
Claude Design's answers arrive at the top of the fidelity ladder - clickable prototypes, not static frames. Stage three is knowing the ladder cold, so you give the artifact the right feedback and keep the vocabulary straight in reviews.
Wireframe settles structure, mockup settles surface, prototype settles behavior - and an AI tool collapses the distance between them, jumping from prompt to something you can click. Knowing which question each fidelity answers is what keeps AI-speed iteration honest. UX vs UI keeps the critique language precise.
- → Wireframe, mockup, prototype LEVEL 101 - the fidelity ladder
- → UX vs UI LEVEL 101
Make yours machine-readable
The last stage is the working core of the map: the system stops being a reference document and becomes an input. One article explains the shift; the How-to executes it.
Teams that find AI output "generic" usually have an undocumented-system problem. Write the decisions down - values, not vibes - consolidate them into one canonical document, bind it to the project, and the tool executes your brand instead of inventing one.
- → Design systems for AI design tools LEVEL 201
- → Set up your design system in Claude Design LEVEL 201 - the How-to, with a template
Three reading orders
The stages are the structure; most readers want a route through them. Three orders, depending on where you stand.
You want to know what this thing is
You want the full pitch, in order
Your system is about to get a new reader
Every article in the map
All eight articles on this map, by stage, with a one-line reason to read.
| Stage | Article | Why read it |
|---|---|---|
| Tool | What is Claude Design? 101 | AI as a design partner - UX questions answered with working prototypes. Lives in the AI Path. |
| Language | What is a design system? 101 | Tokens, components, and patterns with the decisions baked in - the language the tool reads. |
| Language | What are design tokens? 101 | Named values stored once, referenced everywhere - exactly what a machine parses best. |
| Language | Design system examples 101 | Real systems to calibrate against, plus downloadable system files in the format the tool reads. |
| Output | Wireframe, mockup, prototype 101 | The fidelity ladder the tool's answers land on - and which feedback each rung can take. |
| Output | UX vs UI 101 | The vocabulary that keeps reviews of AI-generated screens precise. |
| Prepare | Design systems for AI design tools 201 | The shift: your system as an input a tool executes - and what that changes about the designer's job. |
| Prepare | Set up your system in Claude Design 201 | The How-to: one canonical document, hard rules, bind it, work the loop. Ships a template. |