Claude Design: A Guide for Frontend Engineers
Claude Design is a new AI design interface released by Anthropic on April 17, 2026 as a research preview product from Anthropic Labs. It's designed for the loop that frontend engineers care about: ingest a codebase, generate on-brand prototypes, iterate through conversation, then hand off the results to Claude Code for production deployment. It's powered by Claude Opus 4.7 (Anthropic's most capable vision model), reads your real code repository during onboarding—colors, fonts, component naming, spacing conventions, state patterns—and treats every future project as an extension of this system, not a blank slate.
The strategic positioning to understand is: Claude Design is the exploration frontend, Claude Code is the production backend, and Canva is the downstream publishing outlet. Figma is conspicuously absent from the export targets. This manual teaches you how to leverage this loop to build websites faster, rather than getting bogged down by tools.
Overview: What Exactly Is Claude Design
Claude Design lets you describe a website, prototype, landing page, presentation deck, or cutting-edge interaction (shaders, 3D, voice, video), and returns a working version in seconds that respects your brand guidelines. It runs only on the web, accessible at claude.ai/design, with a dual-pane layout: conversation on the left, live canvas on the right. Under the hood, everything is code—typically HTML/CSS/JS rendered into a canvas artifact—this is why "Export as standalone HTML" and "Handoff to Claude Code" are the natural endpoints for engineers, while Canva, PDF, and PPTX serve non-engineering audiences.
Three design primitives distinguish it from v0, Lovable, Bolt, and Figma Make.
First, design systems are extracted from real codebases (GitHub repo link or local directory upload), then refined into org-level systems that every future project automatically inherits—color tokens, spacing conventions, fonts, component structure, CSS approach (Tailwind, CSS Modules, styled-components are all recognized), framework patterns.
Second, Web capture tool can scrape live elements from any URL, enabling prototypes that match actual products rather than rough approximations.
Third, fine-grained control combines four editing modes: conversational structural prompts, inline comments on specific elements, direct text editing on the canvas, and adjustment knobs—sliders dynamically generated by Claude per design, for spacing, colors, border radius, grid, opacity, fonts.
Model choice also affects output quality. Opus 4.7 has a distinct "personal style"—warm off-white backgrounds (~#F4F1EA), serif display fonts, italic flourishes, earthy tones—this makes editorial and portfolio work beautiful, but will backfire on dashboards, dev tools, fintech, and enterprise UI unless you explicitly counter-prompt. Budget-wise, Opus 4.7 is priced at $5/M input tokens and $25/M output tokens, and Claude Design uses its own weekly quota, independent of Claude chat and Claude Code—treat this quota as a hard constraint.
What Each Plan Gets
| Plan | Access | Quota Profile | Notes |
|---|---|---|---|
| Pro | Enabled by default | Quick exploration, one-off use | PCWorld reviewer burned 80% of weekly quota in 25 min with 3 variants—pace accordingly |
| Max 5x | Enabled by default | Semi-regular use—PMs and engineers doing regular mockups | Suitable for frontend engineers with consistent output |
| Max 20x | Enabled by default | Heavy use—designers and creatives | True production-grade volume |
| Team | Enabled by default | Per-seat weekly quota (Standard / Premium) | Supports org-wide sharing |
| Enterprise (Traditional seats) | Disabled by default—admin must enable | Per-seat weekly quota, Standard and Premium tiers | Controlled via custom roles (RBAC) |
| Enterprise (Usage-based) | Disabled by default | Standard API pricing; one-time credit ~20 prompts, expires July 17, 2026 | Credits consumed before org account |
Quotas are per-user, not shared. Additional usage can be purchased at API rates when exceeded. No free tier. Data residency is not yet supported; audit logs and usage analytics are also not yet available—these are known gaps from the Labs period.
Quick Start: Your First 30 Minutes
Open claude.ai/design, or click the palette icon in the claude.ai left sidebar. Enterprise users who don't see it should have their admin go to Organization settings → Capabilities → Anthropic Labs → Claude Design and toggle it on. The homepage offers four project types—prototype (wireframe or hi-fi), slides, start from template, other—with project settings panel on the left and design archive on the right.
Before anything else, set up your design system. Multiple first-hand reviewers called this the single highest-ROI action—it's the dividing line between "generic AI output" and "looks like our product." Go to Organization settings → Design system, where you can link a GitHub repo, upload a local directory, or upload brand assets separately (fonts, logo, color palette).
For real codebases, link a specific subdirectory, not the entire monorepo—Chrome will choke on large file trees, and Anthropic explicitly warns against including .git/ or node_modules/. Expect large codebases to take 15–20 minutes to ingest; pure asset uploads complete in under 5 minutes. Once Claude has processed your color system, fonts, component inventory (buttons, cards, dialogs, navigation), spacing conventions, and framework patterns, remember to toggle the Published switch so every new project applies this system. Teams can maintain multiple systems for multi-brand scenarios—the Remix button opens a conversational editor that lets you refine tokens later.
After configuration, your first project is ready: describe what you want in the chat, watch Claude generate on the canvas, then iterate. Claude will proactively ask clarification questions—answer these seriously and specifically, as reviewers universally report this opening dialogue determines most of the final quality.
Site-Building Workflows: Four End-to-End Patterns
Pattern 1: New Marketing or Landing Page
For scenarios where you have brand guidelines but no specific page precedent. Start with a structured prompt on the canvas (templates below), let Claude ask its 3–5 clarification questions, accept the first version, then iterate in this order—dialogue for structure, inline comments for sections, sliders for fine-tuning, direct editing for copy.
Once layout stabilizes, prompt "Show me the empty state, error state, and loading state for the signup form" to get these variants into the export bundle. Finally, export as standalone HTML (for static hosting deployment) or handoff to Claude Code (if you want production-grade code written against existing components in your repo).
Pattern 2: Rebuilding or Extending an Existing Page
This is where web capture really shines. With your codebase already linked, start a new project and prompt: "Use web capture to scrape the hero and pricing sections from acme.com/pricing, then rebuild this page with our design system, but replace the pricing tiers with these three: [specific content]".
Claude will pull the live DOM, map visual elements to your tokens, and render a version that's visually faithful but built with real components. Brilliant reports this pattern compresses complex pages from 20+ prompts in other tools down to 2 prompts in Claude Design.
Pattern 3: Dashboards and Data-Dense SaaS UI
Opus 4.7's default editorial aesthetic is a liability here. You must explicitly counter-prompt: specify "dense information layout, sans-serif fonts (avoid Inter/Roboto/system fonts), optional dark theme, data-first hierarchy, minimal decoration." Reference your design system by component names ("Use PrimaryButton, DataTable, FilterChip").
Ask for 2–3 layout variants upfront, rather than iterating repeatedly on a bad option—both saves tokens and converges faster. Prompt interactions like this: "Add filtering interactions, column sorting, row-click drilldown to open drawer". Before handoff, walk Claude through empty states, error states, loading states.
Pattern 4: Stakeholder Review Before Code
When design needs consensus, share an org-wide link with comment or edit permissions. Edit permissions unlock group chat with Claude, so multiple colleagues can iterate together on the same canvas and in the same conversation—this isn't functionally equivalent to Figma's multi-cursor mode, and per early HN reviewers, may be a stronger collaboration model for conversational work.
Once consensus is reached, use "Save this version, then try a completely different direction" to create a snapshot branch, then hand off to the next stage.
The Official End-to-End Loop
From Anthropic's own tutorial: (1) prompt describing the feature → (2) Claude generates first version based on your org's design system and linked codebase → (3) iterate via inline comments and dialogue → (4) share internal URL for async review → (5) generate alternatives → (6) verify real components were used → (7) export → handoff to Claude Code → (8) Claude Code writes production code from the prototype, not from scratch.
Prompt Templates: Copy and Use
The official prompt structure is Goal + Layout + Content + Audience. Claude will ask follow-up questions if you miss any—answer specifically. The templates below bake this structure in.
Marketing / Landing Pages
Build a landing page for [Product Name], which is [one-sentence positioning].
Audience: [primary user persona, pain points, expertise level].
From top to bottom include: hero section (with [specific CTA]), social proof bar,
three-column feature grid, interactive demo, pricing (3 tiers: [tier names]), FAQ, footer.
Tone: [e.g., technical but approachable, not salesy].
Use our design system, prefer [dark|light] theme.
Show me 2 layout variants for the hero section.Pricing Pages
Design a pricing page with 3 tiers ([tier names]) plus an enterprise consultation card.
Include monthly/annual toggle (show % savings), feature comparison table below pricing cards,
FAQ section. Middle tier should be visually recommended. Use our PrimaryButton
and PricingCard components. Audience: [technical decision makers | SMB owners].Product Pages / SaaS App UI
Design a [page name] for [product]. This is a [data-dense dashboard |
content-first reading interface | transactional workflow].
Key elements: [list].
Interactions: [list, e.g., filtering, sorting, drill-down].
Reference our design system by component name where possible.
Counter the default aesthetic—I want sans-serif fonts, dense information hierarchy,
neutral grays with a single accent color, no cream backgrounds or serif fonts.
Include empty state, loading state, error state.Cloning / Rebuilding Existing Pages
Use the web capture tool to scrape the [section name] from [URL].
Rebuild it using our design system. Preserve [what to preserve:
information hierarchy, interaction model], but replace [what to change].
Show me the result, side-by-side with the captured original.Investor / Demo Sites
An investor demo site with [N] pages, for [stage] [category], in [industry] industry.
Audience: [investor type]. One-pager takeaway conclusion: [specific numbers-backed results].
Sections: problem, solution, demo, business progress, team, ask.
Tone: [confident / restrained]. Use our brand.Frontend Aesthetics Config Block (from the Anthropic Cookbook)
When Opus 4.7's default "AI look" creeps in (centered purple gradient on white, Inter/Roboto, Space Grotesk), paste this in as a system-level prefix:
<frontend_aesthetics>
Fonts: Avoid Inter, Roboto, Arial, system fonts.
Prefer recognizable options: JetBrains Mono, Playfair Display,
Clash Display, Bricolage Grotesque, IBM Plex, Fraunces,
chosen according to content.
Colors: Dominant neutral with sharp accent. Use CSS variables.
Inspired by IDE themes or cultural aesthetics, no generic gradients.
Motion: Pure CSS for HTML, Motion library for React. Focus on
one carefully orchestrated page load moment with staggered reveal.
Backgrounds: Layered gradients or geometric patterns, no solid fills.
Avoid: Purple gradients on white, centered hero, generic cards.
</frontend_aesthetics>Iterative Prompting Patterns
- Structural changes via dialogue:
"Move the pricing table above the feature grid, add a testimonial carousel between hero and features" - Component-level edits via inline comment:
"Increase the padding on this button","Change this to a dropdown menu","Use the primary brand color here" - Micro-adjustments via sliders:
"Give me sliders to control hero spacing, border radius, accent color opacity" - Copy edits by clicking directly on the element
- Branch while preserving the original:
"Save this version, then try a completely different direction—more minimal, more editorial"
Claude Code Integration: Handoff Bundle
The handoff bundle is the engineer's killer feature, and what Brilliant's team calls "the seamless leap from prototype to production." From any project's export menu (top-right), choose Handoff to Claude Code → Send to local coding agent or Send to Claude Code Web.
What's Actually in the Bundle
- Project design files
- Full conversation transcript (every design decision and reasoning process transfers with it)
- A README instructing the receiving model how to understand the design
- A pre-built prompt containing the bundle URL, which you paste into Claude Code
This isn't an API push—it's a URL-based file delivery pattern. Claude Code downloads the bundle, reads the README, and operates on it as a project workspace. The bundle's JSON schema is currently unpublished.
Why the Conversation Matters More Than the Mockup
The tutorial makes it clear: "If you mentioned components by specific name in the design conversation, those names carry into handoff", and "When you make design decisions during iteration ('we chose tabs over sidebar because users need to see all sections at once'), that reasoning becomes context for the implementation phase".
In practice this means: how you speak during design determines the quality of downstream code—naming components, stating rationales, probing edge cases.
Framework Choice Is Neutral: Your Repo Decides
Because Claude Design and Claude Code can point to the same codebase, Claude Code writes using your repo's existing framework and styling approach—React, Vue, Tailwind, CSS Modules, styled-components are all confirmed usable by third-party reviewers. Anthropic doesn't lock output to a specific framework; your repo decides everything.
Pre-Export Checklist
Before hitting enter, run through this list:
- Did you reference components by name in the conversation?
- Did you record design rationale ("we chose tabs because…")?
- Did you generate empty states, error states, loading states?
- Did you verify responsive behavior on mobile/tablet/desktop?
- Did you run an accessibility audit? —
"Review this design for contrast, hierarchy, keyboard navigation", fix all discovered issues
Each item goes into the bundle, reducing back-and-forth in Claude Code.
Export and Canva: Choose the Right Target
The export menu in the top-right gives you seven paths. Choose by audience.
| Target | What you actually get | When to use |
|---|---|---|
| Standalone HTML | Self-contained HTML, CSS embedded; interactions (voice, video, shaders, 3D, AI) preserved as code | Static hosting deployment, demos, quick sharing with engineering |
| Handoff to Claude Code | Design files + conversation + README + prompt URL | Production-grade implementation against real repo |
| Send to Canva | Fully editable Canva design, not a flat image—enters Canva Visual Suite via Design Engine | Marketing polish, brand team handoff, social/publishing |
| Download as .zip | Complete project folder | Archival, offline handoff |
| Export as PDF | Static render | Stakeholder review, email attachments |
| Export as PPTX | PowerPoint/Google Slides file | Executive presentations, client demos |
| Org internal URL | View-only, comment, or edit permissions | Async team review; edit permissions unlock group chat with Claude |
Canva Is a Deep Integration, Not a Simple Export
This partnership began in July 2025 when Canva released Canva MCP for Claude; brand-aware generation joined in January 2026; and native Claude Design export launched on April 17.
Under the hood, it uses Canva's Design Engine, Visual Suite, and the new HTML import capability from Canva AI 2.0. Designs land as structured, editable objects, respect Canva Brand Kits, can be embedded in Canva Presentations, connected to Canva Forms/Sheets, or published with a custom domain as Canva Website.
The reverse flow (Canva → Claude Design) isn't native import, but Canva MCP already allows Claude to read Canva content in everyday conversations.
Figma's Absence Is Intentional
Anthropic CPO Mike Krieger resigned from Figma's board three days before launch; Figma stock dropped ~5–7% on launch day. If you need Figma, reviewers recommend the existing Figma MCP server + Claude Code path—this is separate from Claude Design.
Best Practices: Techniques That Compound
Design system configuration is the single highest-ROI action. Without it, generic; with it, every project inherits your brand. Do it day one, use a real GitHub repo not uploaded assets, link a subdirectory not a monorepo.
Match editing mode to change size. Dialogue for structural changes (layout, sections, themes), inline comments for component-level edits, sliders for real-time fine-tuning, direct text editing for copy. Don't regenerate when you can fine-tune—regeneration burns quota and loses context.
Be specific down to numbers. "Compress form field spacing to 8px" beats "this looks wrong". "Replace the current near-black with #0F172A" beats "make it darker". Pixels and hex values shortcut clarification loops.
Ask for 2–3 options upfront. Side-by-side comparison beats repeated iteration on a single bad option—both faster convergence and fewer tokens.
For non-editorial work, counter-prompt Opus 4.7's default style. The model defaults to cream/serifs/earth tones—beautiful for portfolios, but wrong for dashboards, dev tools, finance, healthcare, enterprise admin backends. Explicitly prompt for sans-serif, data density, dark or neutral themes.
Manage your quota. Downgrade cleanup tasks (copy editing, minor rearrangements) to Sonnet 4.6, reserve generation and structural moves for Opus 4.7. PCWorld's reviewer burned 80% of Pro weekly quota in 25 minutes—this ceiling is real.
Record rationale during iteration, because the conversation itself is the handoff to Claude Code. "We chose tabs over sidebar because users need to see all sections at once"—this sentence becomes implementation context downstream.
Check completeness before handoff. Have Claude show empty states, error states, loading states; request one accessibility audit (contrast, hierarchy, keyboard navigation); verify mobile/tablet/desktop. Each issue found and fixed here is one round-trip saved in Claude Code.
The Three Most Common Mistakes
- Skipping design system configuration: prototypes become generic, don't look like your product
- Vague feedback ("make it look better"): burns tokens and iterations—give specific numbers
- Confusing Undo and Back: you can irreversibly wipe the entire session—PCWorld's reviewer lost a full work session this way
Known Bugs and Workarounds
- Inline comments occasionally disappear before Claude reads them—paste comment text into dialogue
- Save errors in compact view—switch to full view
- Upstream errors in conversation—open new conversation tab within same project
- Large monorepos choke the browser—link specific subdirectory
Closing: The Loop Is the Product
Claude Design's bet is this: the correct atomic unit of modern product work is neither the Figma frame nor the React component—it's a conversation that can produce artifacts in both directions. For frontend engineers building websites, this means the tool only compounds when you treat it as Claude Code's front door, not the destination.
Ingest your repo once, speak in component names, record rationale during iteration, then let the handoff bundle transport the full design conversation into production. The strongest teams—Brilliant from 20+ prompts down to 2, Datadog compressing a week of reviews into one conversation—don't use Claude Design as a prettier v0; they treat it as a shared context prototyping layer that feeds their existing codebase and existing Claude Code workflows.
The limitations of the research preview period are real (weekly quotas bite, no audit logs, no data residency, no API, multi-person collaboration is rough), but for engineers already living in Claude Code, this integrated loop is the highest-leverage design tool Anthropic has released to date.
References
- Introducing Claude Design by Anthropic Labs — Official announcement
- Claude Design product page
- Get started with Claude Design — Official quick start
- Claude Design subscription and pricing — original article URL has been retired; link to the support root for the current entry point
- Team and Enterprise admin guide
- Design system setup guide
- Claude Design prototypes and UX tutorial