Claude Code Learning Hub
中文 Mingyu's Library

Hub / Tips / C · Design & assets

How to build app UI with Claude Design

Want to lock the UI design down before writing any code? Claude Design can package a finished design and hand it straight to Claude Code — no re-guessing from screenshots.

Claude Design is an official Anthropic Labs product released April 17, 2026 (research preview): chat on the left, canvas on the right, producing design mockups and interactive prototypes through conversation. The right way to pair it with Claude Code is not "paste a screenshot over" — it ships with an official handoff channel. Note: it does not appear in the Claude Code docs on code.claude.com; the official information lives on anthropic.com and support.claude.com.

One-line answer

Answer Build your app UI prototype conversationally in Claude Design, then use "Handoff to Claude Code" in the export menu to package the design for Claude Code (local or Web) to implement — Claude Code continues from your existing design instead of starting from scratch.OfficialThe official announcement confirms designs can be "handed off to Claude Code, which continues from your existing work instead of starting over".

Steps

  1. Check eligibility and entry points.OfficialClaude Design is available on Pro, Max, Team, and Enterprise plans (research preview; off by default on Enterprise, an admin must enable it) and is powered by Claude Opus 4.7; entry points are claude.ai/design or the Claude Desktop sidebar, web and desktop only. Expect: opening it shows the chat-left, canvas-right interface.
  2. Feed it your design system before you start drawing.OfficialProjects automatically inherit your organization's design system; you can also import one yourself — supported sources are GitHub repos, design files, direct upload, or running the /design-sync command against your local codebase in Claude Code. Everything generated afterwards then automatically applies your colors, fonts, and components. Expect: generated screens that match your existing app's look, not a generic template style.
  3. Generate the UI conversationally, then refine.OfficialDescribe what you want in a sentence (official example scenarios include: a dashboard with filters, a mobile onboarding flow, a multi-section landing page, a form with conditional logic) and Claude produces a first pass; then iterate three ways: leave inline comments on specific elements, edit the copy directly, or use the tuning sliders it generates to adjust spacing/colors/layout in real time.
  4. Hand off to Claude Code.OfficialIn the export menu choose "Handoff to Claude Code"; there are two options: "Send to local coding agent" (your local Claude Code) or "Send to Claude Code Web". The design is packed into a handoff bundle — one instruction to Claude Code and it can start.Third-partyCommunity testing found the bundle contains the component structure, the design tokens actually used on the canvas, the layout hierarchy, and referenced assets, plus a README telling the coding agent how to reproduce it in your tech stack — editing that README to include your stack, file paths, and definition of done noticeably improves handoff quality.
  5. Implement in Claude Code and close the verification loop.Our takeThe handoff only solves "design to code"; it does not guarantee pixel-perfect fidelity. After implementing, have Claude screenshot its result and compare it against the design to find the gaps (how-to in Screenshot-diff: let Claude judge its own UI; for iOS apps add a simulator verification pass), and only call it done once the differences hit zero.

Our takeIf you don't have Claude Design access, the fallback official path is to drag the design images straight into the Claude Code conversation and have it implement from them (the docs explicitly support pasting/dragging images), then run the screenshot-comparison loop — not as good as a token-carrying handoff bundle, but the workflow still runs end to end.

Copy-paste prompt

After completing "Handoff to Claude Code" in Claude Design, follow up in Claude Code with:

This is a design bundle handed off from Claude Design. Implement the app UI from it:
1. First read the README and design tokens in the bundle, list your understanding of the page structure, component inventory, and style conventions, and confirm with me before you start.
2. Implement using this project's existing tech stack and component conventions (if unsure, look at similar components under src/ first) — do not invent a separate styling system.
3. Use the token values from the bundle for every color, font size, and spacing — no eyeballed approximations.
4. When done, screenshot each screen, compare against the design, list every visible difference, and fix them one by one.
5. Finally report: which screens you implemented, which components you reused/created, and which differences remain unresolved and why.

Sources & last verified