How To Use Claude Design To Build Beautiful Sites

Product reviewed

Claude Design (by Anthropic) — an AI-powered design tool for creating website (and other) UI designs via prompting. In this workflow, it’s integrated with Claude Code to build a working site/app.

Key features mentioned

• An easy prompting UI design tool with a simple interface, aimed at non-technical users.
• Generates website designs, plus slides, documents, and animations.

• Available via:

  • Claude desktop app
  • Claude website Desktop install is optional.

• Supports choosing different Claude models for design:

  • Fable: most capable, but limited access
  • Opus: main general-purpose model; best for designing, but token-heavy
  • Haiku: uses fewer tokens but may need more refinement
• An effort level setting that controls how hard the model “thinks,” trading quality vs. token usage.
• Integrates MCPs and Skills:
  • Agent can connect to external tools/services
  • Skills provide step-by-step guidance
• Uses a token/rate limit:
  • A 5-hour window where all Claude activity counts
  • Once the token cap is hit, you must wait out the window
• Supports design systems for consistent styling across pages.
• Uses design.md (Google-format style guide/brand spec) so the agent doesn’t guess brand styling.
• Workflow includes:
  • Building a design system from design.md
  • Creating wireframes (rough layout + multiple variants per screen)
  • Comment-based targeted edits (comment on a specific element to guide changes)
  • Adding animations (e.g., scroll-into-view, subtle pop-ups)
  • Handoff/export from Claude Design → Claude Code via Claude Design MCP
  • Code verification/deep review to ensure design.md matches the generated app and to catch issues like responsiveness
• For backend functionality (demo app):
  • Uses Supabase with an agent skill to manage database/login/tasks via CLI or MCP
  • They chose MCP to simplify setup and avoid key handling

Pros (as stated/implicit in the workflow)

• Great first-impression visuals: design is emphasized as a key factor for attracting customers.
• Consistency across pages through design systems + design.md, reducing the “generic AI site” look.
• Lower “off-brand” risk: because the agent reads exact rules from design.md.
• More controlled results than pure prompting, avoiding generic/default Opus styles.
• Faster iteration via comment targeting (edits apply to the right element without re-prompting everything).
• Multiple wireframe/design variations enable quicker structural comparison.
• Design → code export retains animations (in the described workflow).
• Deep review catches issues early, including responsiveness.
• Backend integration is streamlined using Supabase skills + MCP.

Cons / limitations mentioned

• Token hungry: Opus design can consume many tokens; heavy usage hits limits faster.
• Strict usage window: once the token cap is reached, you must wait until the 5-hour window resets.
• Early responsiveness limitations: designs may look best on the target device; verification and fixes are needed.
• Iteration cost: changing design.md or regenerating multiple times consumes additional tokens.
• Button styling can be wrong: they had to explicitly instruct fixes to ensure proper button color/attention hierarchy.
• design.md is hard for humans to visualize directly; tools like design.md.space are recommended.

User experience / workflow description

1. Start with design.md (brand/style spec in Google format) to control outputs and maintain consistency.
2. Use a Claude Code skill that:
   • interviews/plans visual identity
   • writes/verifies design.md
   • includes references to avoid “AI slop”
3. Create a design system (based on design.md) and generate components/elements.
4. Build wireframes with multiple options per screen.
5. Use comments to target specific elements for changes; group comments to resolve multiple tweaks together.
6. Convert selected wireframe variants into full detailed screens while maintaining structure and hierarchy.
7. Add subtle animations.
8. Export to Claude Code using Claude Design MCP, then run a deep review to ensure responsiveness and correctness.
9. Connect to a database/backend (Supabase) so state persists after refresh.
10. Final deployment is mentioned but not covered.

Comparisons made

• Compared models (token/quality tradeoff):
  • Opus: best for design but uses lots of tokens
  • Haiku: fewer tokens but may require more refinement
  • Fable: most capable with limited access
• Against pure prompting / self-generated design systems:
  • Without design.md, Claude may fall back to generic colors/styles, making results look like other AI-built sites.
• Human visualization comparison:
  • design.md is easy for the AI to understand but hard for users to visualize → use tools like design.md.space.
• Supabase setup options:
  • Choose MCP over CLI to avoid dealing with login keys and simplify setup.

Numerical / rating info

• No star ratings or review scores.
• Token/rate limit: 5-hour window for Claude Design usage (and other Claude activity counts toward it).
• Example configuration mentioned: Opus 5 at medium effort for design tasks.

Unique points mentioned (consolidated list)

• Design visuals are the first thing customers judge.
• Claude Design was positioned around the timing of Claude Opus research preview.
• Can design websites + slides + documents + animations.
• Works on Claude desktop and Claude website.
• Supports multiple models (Fable limited; Opus best general use; Haiku token-efficient).
• Effort level controls compute/thinking intensity and token use.
• Integrates MCPs and skills.
• 5-hour limit with shared token cap; token-heavy use ends sooner.
• Need pre-planning to avoid wasted tokens.
• Create design.md (Google-format) so AI coding/design follows brand rules.
• Claude Design supports design systems for site-wide consistency.
• Without design.md, results can look generic/AI-like due to Opus defaults.
• Consistency across multi-page sites comes from one design system source.
• Uses a Claude Code skill to generate/plan design.md, validate to Google standards, and include anti-slop references.
• Installation involves Claude Code and VS Code (mentioned as commonly used).
• Skill is provided on GitHub and available for free (per video claim).
• Workflow includes wireframes with multiple options per screen.
• Uses commenting for targeted changes.
• Prefer grouping comments to resolve multiple changes at once.
• Converting wireframes to full designs requires selecting a variation code number.
• Generated designs may need manual instruction for button colors.
• Early output may feel blank/rough on top of wireframes; can add textures/elements.
• Supports in-design editing for minor changes to reduce token waste.
• Adds subtle animations (scroll into view, text pop-ups).
• Exports designs into Claude Code via Claude Design MCP (two-way integration).
• Performs deep review to verify generated code matches design.md, catching responsiveness issues.
• Connects to a backend via Supabase for persistence.
• Uses Superbase with an agent skill bundle using best practices.
• Connect backend skill via MCP (chosen to avoid CLI key management).
• Deployment is referenced but not explained.
• Mentions an internal/free design system available via an AIABS Pro community.

Overall verdict / recommendation

Recommendation: Best suited for users who want controlled, consistent, multi-step UI design and are willing to follow a structured workflow (especially design.md, wireframes, comments, and verification). It’s powerful but token-limited and iteration-heavy, so expect verification and fix passes—especially for responsiveness. For production-quality results, the integrated Claude Design → Claude Code workflow (plus Supabase for persistence) is presented as the practical way to make it work well.

Speakers / multiple views

Only one main voice is present in the subtitles; no clearly distinct additional speakers with separate opinions/views were identified.