What Claude Design Hands You: Understanding the Output So You Can Land It in Your Codebase

Claude Design outputs standard HTML/CSS/JS or React components — not a proprietary format. Giving it your existing CSS before generating changes the output quality significantly; here's how the extraction works and where it still falls short.

What you'll be able to do after this:

• Know exactly what format Claude Design outputs, and what the handoff bundle passed to Claude Code actually contains
• Prepare your existing CSS or component library so Claude Design starts from your design system rather than generic defaults
• Know where automatic integration works and where you'll always need a review pass

What Claude Design generates

Claude Design outputs HTML, CSS, and JavaScript for static prototypes, or React components when you ask for them. The output uses Tailwind or inline styles unless you specify otherwise. When you hand off to Claude Code, what passes across is the generated code plus context about design decisions — not a Figma file, not a design token spec, not a proprietary format. It's standard web code you can drop into version control.

Victor Dibia's independent review of Claude Design tested it on a real production task: adding an interactive globe to a live dashboard, wired to Google Analytics and Stripe data. His finding on output quality: Claude Design ingests your existing CSS to understand your design system, so output respects your design tokens rather than guessing at them. That one sentence captures the entire setup step worth doing.

How to prep your codebase before generating (the step that changes output quality)

Step 1 — Upload your CSS or design system file at project start. In Claude Design, go to Settings → Design System (or use /design-sync in the Claude Code handoff path). Claude extracts color tokens, typography scales, and component patterns from the file. The more semantically named your CSS variables are — --color-brand-primary rather than --c1 — the better the extraction.

Step 2 — Upload your component library if you're working in React. Provide the components/ directory or a Storybook static build. Claude reads prop interfaces and naming conventions, so <Button variant="primary"> comes out as your component, not a generic <button className="bg-blue-500">.

Step 3 — Scope what you upload. Claude Design reads the first ~50 KB of CSS it receives and the top-level components it finds. In a monorepo, give it the specific package path (packages/ui/src/components), not the repo root — otherwise it extracts from whatever file it encounters first.

Where it still breaks

• Prop signature mismatches. Generated code won't exactly match custom component APIs. Your size="sm" may come out as className="text-sm". Budget a light review pass.
• Undocumented conventions. If your system uses patterns that aren't expressed in CSS variables or JSDoc (custom a11y attributes, data-testid patterns, animation conventions), Claude Design won't infer them. Document what matters in a concise DESIGN-SYSTEM.md and include it in the upload.
• The handoff bundle reflects what you approved in the canvas. Claude Code can't fix a design-system mismatch that made it through design review unchanged. The design tool review pass is where you catch it.

Sources: How Good is Anthropic's Claude Design? — Victor Dibia, Designing with AI newsletter · Set up your design system in Claude Design — support.claude.com · Get started with Claude Design — support.claude.com