Claude Design turns a conversation into prototypes, one-pagers, dashboards and other visual work, built on a canvas beside the chat. Most guides stop at "describe what you want." The part that decides the quality comes before and after that: which design system it builds with, how you refine it, and how the design becomes real code. Here's the whole workflow.
What changed recently
If you learned Claude Design at launch, some of it works differently now:
- It's inside regular Claude. You can use it in any conversation, the Artifacts tab, and Claude Code. The standalone claude.ai/design still works.
- Presentations moved to Claude Slides. Use Design for everything else.
- Usage is shared. There's no separate design allowance anymore. It draws from the same limits as the rest of Claude, including Claude Code.
- Design systems moved to Settings → Design systems. Older team systems can be migrated from the Design tab.
Where to start
It's in beta on Pro, Max, Team and Enterprise. It's on by default except on Enterprise, where an owner turns it on.
| Start from | Best for |
|---|---|
| A conversation | Turning something you just discussed into a design. Ask for it, or pick Output → Design |
| The Artifacts tab | Starting from a Design template |
Claude Code (/design) | Designs that live next to your codebase |
| The mobile app | Requesting a design and viewing it later. Editing needs web or desktop |
Load your design system first
Output is only as on-brand as the system it builds with. Claude checks its work against your design system and fixes mismatches before you see them.
- Import from a GitHub repo, design files or uploads, or run
/design-syncin Claude Code to pull from your local codebase. - A messy source shows up in the output. Clean up your tokens and components first.
- No design system yet? Attach screenshots or a document whose style you want matched.
The brief
Design [what]: [goal].
Audience: [who uses it, on what device]
Layout: [sections and hierarchy]
Content: [real copy and data, attached. No placeholders]
Components: [name design system components, like "Primary Button"]
Responsive: [mobile, tablet, desktop, or just one]
Ask me questions before you start if anything would change the result.
Start simple. Get the core layout right first, then add interactions, edge cases and polish in later rounds.
Refine with the right tool
| Use | For | Example |
|---|---|---|
| Chat | Structure, new sections, direction changes | "Move the metrics to the top row and add a settings panel on the right" |
| Inline comments | One specific element | "Make this a dropdown" |
| Direct canvas edits | Quick visual adjustments | Drag, resize, align |
Two moves worth building into every project:
Show me 2-3 alternative layouts for this page before we refine one.
Review this design for accessibility, contrast, hierarchy and usability. List issues by severity.
There's no version history yet. Before a big change, say: "Save what we have and try a completely different approach."
Export or hand off
| You need | Use |
|---|---|
| Stakeholder feedback | A share link. Viewers need a Claude account, and Enterprise links stay inside the org by default |
| A file | PDF, PPTX, standalone HTML or a .zip |
| Your existing tools | Send to Canva, Miro, Lovable, v0, Vercel, Netlify, HubSpot and others |
| Working software | Hand off to Claude Code, which continues from the design instead of rebuilding it from a screenshot |
For builders, the handoff matters most: design the flow visually, then keep building in code without losing the design.
Limits worth knowing
- It's in beta. Inline comments can occasionally go missing. Paste the feedback into chat instead.
- Big repos lag in the browser. Link very large codebases from Claude Code.
- Multi-person editing is basic. One editor at a time is safer.
- Heavy projects use more. Large codebases and many iterations draw more from your shared limits.
Start here
- Import or sync your design system, or attach reference screenshots
- Brief one real project with the template above
- Ask for 2-3 layouts before refining
- Run the accessibility review
- Hand it off to Claude Code, or export it
Go deeper: Claude, End to End · ChatGPT Sites: What to Build, How to Brief It · How to Start a Big Project in Claude Code