Claude Design Auto-Builds Prototypes from Your Repo
Point Claude Design at your code repo or Figma file; it agentically extracts a design system, then generates styled prototypes like pricing pages or 3D heroes you can edit via voice, sliders, or inline tweaks.
Extract Design Systems Agentically from Repos
Claude Design scans your GitHub repo or Figma file to build a complete design system automatically. It explores key files, breaks down components like buttons, navigation, badges, form inputs, tiles, and cards into HTML/CSS assets, and organizes them in a file system with progressive disclosure. For example, targeting the Developers' Digest site repo took several minutes but produced a style guide with visual foundations, color schemes, and typography matching the original—close enough visually despite missing custom fonts. This grounds all future generations in your existing style, avoiding the generic LLM-generated look that plagues one-shot prompts. Reference specific assets (e.g., 'visual-foundations.md') during generation to pull targeted context into the LLM.
Trade-off: Processing takes minutes upfront, but enables consistent, production-like outputs without manual spec writing.
Prototype Pages and Assets with Layout Variations
Describe a page in natural language—e.g., 'generate a pricing page'—and it outputs multiple layouts like stacked cards, unified tables, or split hero views, all styled to your design system. A single prompt on the extracted system yielded a full pricing page with tweaks surfaced for easy iteration: change featured tier, highlight 'popular', or swap layouts. For creative assets, prompt 'creative 3D banner referencing design system, high-fidelity' to get interactive elements like mouse-follow parallax or faux 3D heroes. It streams real-time previews with live sliders for colors, accents, and interactivity, QA'ing its own work via screenshots for self-iteration using Claude 3 Opus's strong visual reasoning on high-res images.
Speed: 2 minutes per complex task. Outcomes: Turns vague ideas into editable, high-fidelity prototypes faster than manual design, with built-in variations reducing blank-page paralysis.
Edit Interactively and Export Seamlessly
Refine via conversation, inline comments, direct DOM hovers (auto-sends element context), voice input, or sliders—no typing needed for wand-like edits like 'remove these three sections.' Hovering DOM elements injects their representation into prompts automatically. Open prototypes in new tabs for full-site previews. Export to Canva, PDF, PowerPoint, or hand off to Claude Code with HTML/CSS assets intact—LLMs translate easily to React/Svelte. All powered by your Claude subscription, no extra cost.
Addresses frontend LLM pitfalls: Without a design system, outputs feel AI-generated; with it, they blend seamlessly. Bigger impact: Democratizes design for non-designers, potentially disrupting Figma/Adobe by generating code-native prototypes directly.