Claude Design: The Complete Guide for 2026
Claude Design launched at the end of April 2026 — and it's considerably more powerful than most people realize at first glance. It's not just a "generate a website" button. It's a complete design tool: clickable prototypes, pitch decks, animated videos, a brand design system that carries over across all your projects, and a direct hand-off to Claude Code.
This guide covers what you actually need to know — no hype, with concrete prompts and step-by-step workflows from real test sessions.
What is Claude Design and what can it do?
Claude Design lives at claude.ai/design — browser only, no app. It's separate from the regular Claude chat interface.
What you can build
| Output | Description | |--------|-------------| | Clickable prototype | Multi-page website with real navigation, forms, hover states | | Pitch deck | HTML-based presentation, exportable as PPTX or PDF | | Animated video | Timeline-based marketing video for social media | | Mobile app mockup | UI screens with interaction flows | | Wireframe | Quick concept sketches for feedback rounds |
Who gets access?
- Claude Pro/Max — Claude Design is included, you can start right away
- Team/Enterprise — must be enabled by an admin in Organization Settings (default: off)
The Skills system: the actual lever in this tool
The biggest misconception about Claude Design: it's not a simple prompt box. The real leverage is the Skills system — you configure what Claude should build and how it should be exported before the first generation runs.
You find Skills in the chat interface under "Skills and design systems". There are three categories:
1. Output-type Skills — what gets built?
| Skill | Use case | |-------|---------| | Interactive prototype | Clickable website with real navigation | | Make a deck | Slide presentation | | Animated video | Motion marketing video | | Wireframe | Quick concept sketches |
2. Behavior Skills — how should Claude work?
| Skill | Use case | |-------|---------| | Frontend design | Aesthetic direction when no brand system is set up | | Make tweakable | Adds live sliders and toggles to the design |
3. Export-format Skills — and this one matters
| Skill | When to activate | |-------|-----------------| | Save as standalone HTML | Website outputs, works offline | | Export as PPTX (editable) | Editable PowerPoint presentation | | Export as PPTX (screenshots) | Pixel-perfect slides, not editable | | Save as PDF | Print-ready version | | Send to Canva | Continue in Canva |
Key point: Activate export Skills before generating, not after. Claude builds the design from the start with the right constraints — e.g. PPTX-compatible effects instead of CSS transitions that would be lost on export.
The right skill combinations:
| Goal | Output skill | Behavior | Export | |------|-------------|----------|--------| | Clickable website | Interactive prototype | Frontend design (no brand sys.) | Standalone HTML | | Pitch deck | Make a deck | Frontend design | PPTX (editable) | | Marketing video | Animated video | Frontend design | Standalone HTML | | Quick sketch | Wireframe | — | PDF |
The 5 input methods: more context = better output
Claude Design accepts five different input sources — and you can combine them. Most beginners underestimate this step.
| Method | When to use | |--------|-------------| | Text prompt | Always the base, structured using the four-point formula below | | Upload a document | DOCX, PPTX, XLSX — e.g. an existing brief or deck as style reference | | Upload an image | Screenshots, hand-drawn sketches, logos, competitor sites | | Link a codebase | GitHub repo or local folder with existing components | | Web capture | URL of a live site — Claude grabs layout and elements directly |
Practical tip: Drag file or image attachments into the chat box before the text prompt. Claude incorporates all attachments into the first generation automatically.
Building your first prototype: step by step
Here's the full workflow using Brew & Brand — a fictional specialty coffee roastery offering weekly bean subscriptions to cafés, restaurants and hotels.
Step 1: Write a four-point prompt
Anthropic recommends this structure for the opening prompt:
| Element | Question | |---------|----------| | Goal | What is being built and why? | | Layout | Which sections / pages? | | Content | What information should appear? | | Audience | Who will use the result? |
Full example:
Build a website for Brew & Brand Coffee — a specialty coffee roastery
offering weekly bean subscriptions for cafés, restaurants and hotels.
Goal: Customer acquisition site targeting hospitality buyers.
Layout: Landing page + 2 subpages (Selection, About).
On the landing: Hero, 3 USPs, coffee grid, subscription steps,
origin/direct-trade section, testimonials, FAQ, footer with contact.
Content: Weekly delivery of freshly roasted beans, 4 standard varieties
plus rotating single origins, free shipping nationwide, flexible
quantities (2–80 kg/week).
Audience: Café owners and restaurant operators, age 30–55.
Primary language: English.
Tone references: workhorseroasters.com (calm, craft), oatly.com
(typographic). Decide which fits better, or surprise me.
Mobile responsive. Generate 2 distinct visual variants.
Step 2: Use the clarifying questions flow
Claude Design asks targeted follow-up questions when there's room for interpretation:
- "Rustic/handcrafted or modern/minimal?"
- "How many design variants — 1, 2, or 3+?"
- "Pricing: show concrete numbers, 'on request', or hide entirely?"
- "Product imagery: realistic placeholders or abstract textures?"
Strategy:
- For aesthetic questions (style, colors, typography): "Decide for me" is often the best answer. Claude does actual concept work rather than narrowing to a preset corridor.
- For content questions (which sections, pricing logic): answer yourself — it's your content.
- 2 variants is almost always the sweet spot — enough to compare, not so many you get lost.
Step 3: Review and refine
After generation (multi-page outputs take 3–10 minutes), you have four ways to iterate:
| Mode | How | Best for | |------|-----|---------| | Chat | Normal messages | Larger structural changes | | Inline comments | Right-click on element | Targeted component edits | | Direct edit | Click directly in canvas | Text edits, color fixes | | Custom sliders | Tweakable controls | Live variation with sliders |
Setting up a design system: the most important step
Without a design system, all Claude outputs look similar — solid, but generic and "Claude-like". The design system is the single biggest quality lever in the entire tool.
The one-time investment pays off:
- 45–75 minutes to set up (including asset preparation)
- All future projects automatically use your colors, typography and components
- Consistency across landing pages, decks, mobile mockups — all feel cohesive
How to set it up
- Go to claude.ai/design → "Design systems" tab
- Click "Create new design system"
- Fill in the six input fields:
Field 1: Company name and blurb (required)
Format: [Name]: [description with all touchpoints]
Brew & Brand Coffee: specialty coffee roastery with weekly bean
subscription for cafés, restaurants and hotels.
Touchpoints: marketing website, B2B customer portal,
packaging labels, email newsletters.
Name your touchpoints specifically. "Website" is too vague. "Marketing website + B2B portal + packaging labels" helps Claude understand the right scope.
Fields 2–5: Sources (all optional, but recommended)
| Slot | What to put in | |------|----------------| | Link code on GitHub | Public repo or a frontend-focused subfolder | | Link code from computer | Local components (targeted selection, not a full monorepo) | | Upload .fig file | Figma file — parsed locally in your browser, never uploaded | | Add fonts, logos and assets | Logo variants (SVG preferred), fonts (.woff2), sample photos |
Minimum you actually need:
- 2 logo variants (light/dark) as SVG or PNG
- Primary font as .woff2
- Color palette with hex codes
Field 6: "Any other notes?" — the most important input
This is where you give Claude the character of your brand. Three pillars:
Visual direction:
Visual: Editorial design language. Warm cream backgrounds (#F5EFE6)
with deep navy (#1A2238). Terracotta (#C2542D) as accent, used
sparingly. Serif headlines (Fraunces, italic). Sans-serif body
(IBM Plex Sans). Generous whitespace.
Voice & tone:
Voice: Direct, craft-oriented, no marketing speak. Short declarative
statements. Confident without arrogance. Specific over vague.
Anti-patterns — at least 5, concrete:
Anti-patterns:
- No stock photography
- No gradients, no glassmorphism
- No exclamation marks in copy
- No buzzwords like "passionate", "premium", "innovative"
- No carousel sliders
- No headlines wrapping to 4+ lines
Why anti-patterns matter so much: A "do this" list doesn't prevent Claude from falling into clichés. A "don't do this" list explicitly closes those doors. In practice, output quality improves by roughly 30% when you define anti-patterns clearly.
Generation and review
After clicking "Continue to generation →" you wait 5 minutes (keep the tab open). Claude produces:
- Logo system (reconstructed from your assets or inferred — transparently marked as "inference, not vendor asset")
- Type stack and color palette
- Component library (buttons, cards, nav, etc.)
- UI kits for each of your touchpoints
In the "Review draft" mode, you rate each element:
- "Looks good" — keep it
- "Needs work" — a text field opens: be specific, avoid adjectives
Efficient review order: Brand assets → Colors → Typography → Components → Spacing
Always read the Caveats section at the end of the chat — Claude transparently lists what it reconstructed and what you still need to replace before the system is production-ready.
Export & hand-off
| Goal | How | |------|-----| | Standalone HTML | Download as a single file, works offline | | PowerPoint | PPTX (editable) for slides you can continue in PowerPoint | | Claude Code | "Continue in Claude Code" — hands off the generated code as a starting point for real development | | Canva | Direct export via the Canva skill into your Canva workspace |
The Claude Code hand-off is particularly valuable: design the prototype in Claude Design, hand it off to Claude Code, and develop from there — with a solid visual starting point instead of a blank file.
What Claude Design cannot do
To set the right expectations:
- Not a production system — generated sites are prototypes/HTML mocks, not deployable apps
- No dynamic data — backend connections, databases, auth are out of scope
- No print — physical print formats (flyers, posters) are not a strength
- Browser only — works only in a browser at claude.ai/design
- No photo generation — missing photos are marked as placeholders, not invented
Pro tips from real sessions
Multiple design systems: As a freelancer or agency, it's worth having a separate system per client. When creating a project, you pick the right one from a dropdown.
Iterate, don't perfect: Build the system once, use it in 2–3 projects, then refine. You'll only discover what's missing once you're actually working.
Code repo > Figma file: If you can choose between uploading a Figma file and linking a code repo with defined design tokens (Tailwind config, CSS variables): go with the repo. Tokens as code are more precise than Figma layer structures Claude has to interpret.
Always read the Caveats: Claude lists at the end of every generation what it reconstructed and what still needs to be replaced. That's not an appendix — it's your action list.