Claude Design in Action: Prompt UI, One‑Click Handoff to Claude Code

What is Claude Design?

Claude Design adds a canvas to Claude Opus (currently Opus 4.8). You chat on the left to specify requirements, and the right side instantly produces a live HTML page with a set of JSX components. The output is interactive, not a static screenshot, and can include app screens, landing pages, slides (exportable to PPTX or Canva), and single‑page documents. The feature is in research preview and is available to Pro, Max, Team, and Enterprise plans via subscription.

Getting Started: Canvas + Design System

Open claude.ai/design , click New project , give it a name (e.g., PickNote) and choose a fidelity level. Start with low‑fidelity wireframes to save tokens, then switch to high‑fidelity for the final design. You can link a code repository or a Figma file so Claude automatically extracts the brand palette, typography, components, and spacing, applying them to the generated prototype.

💡 For large repositories, link only a sub‑directory (e.g., packages/ui ) to avoid performance issues. You can also drag files, images, or Figma links onto the DROP FILES HERE area as context.

Designing a WeChat bookkeeping mini‑program

Provide a detailed prompt; a minimal example is:

做一个微信记账小程序的高保真原型：
- 目标：打开就能快速记一笔，首页一眼看清本月收支
- 布局：iPhone 外框 + 微信顶部胶囊；首页顶部「本月结余」大卡，下面今日支出/预算双卡，再下面近期账单按日分组；底部 5 个 tab（首页/账单/记一笔/统计/我的）
- 内容：支出/收入/转账三态，彩色分类宫格 + 数字键盘；账单带分类图标、账户、时间
- 受众：个人记账，移动端，浅色/深色双模式

Claude returns a file named 记账小程序.html and several JSX files ( theme.jsx, screens-main.jsx, charts.jsx, icons.jsx, etc.). The first version is a rough draft; you iterate using three mechanisms:

Dialogue : ask for major layout or color changes (e.g., “change the theme color to jade green, use warm coral for expenses”).

Inline comments : click an element and add a comment such as “add account and time to this line”. Note that comments may disappear during the preview period; if that happens, paste the comment text back into the chat.

Real‑time Tweaks : open the Show tweaks panel and drag sliders for theme color, dark mode, corner radius, and density, seeing changes instantly.

✅ The Tweaks panel is handy for rapid visual adjustments without re‑generating the whole design. ⚠️ Inline comments sometimes vanish; re‑send the comment text if needed.

After several rounds you end up with a polished prototype: an iPhone‑framed screen showing a jade‑green “Monthly Balance ¥8,137.50” card, dual columns for income/expense, daily grouped transaction list, and a bottom tab bar with a central green “+”.

Handoff to Claude Code

Click Share → Send to… and choose either Claude Code (local terminal) or Claude Code Web . Press Send to open the handoff dialog. Two useful options appear:

☑️ Download zip instead : creates an offline bundle with all files.

📝 Give the agent more detail : specify the target stack (e.g., uni‑app) so Claude Code knows how to generate the final code.

For a local handoff, Claude provides a ready‑to‑copy command:

# Copy this line and paste it into your local Claude Code terminal
Fetch this design file, read its readme, and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/<project‑specific‑hash>

Implement: the designs in this project

The command tells Claude Code to fetch the design from api.anthropic.com/v1/design, read the accompanying README, and generate the implementation.

The generated bundle contains only front‑end files: 记账小程序.html – previewable HTML page theme.jsx – design tokens (jade‑green theme, color palette, radius, spacing) data.jsx – sample data (transactions, accounts, budgets) screens-main.jsx and related files – React‑style components for each screen charts.jsx, icons.jsx, ios-frame.jsx – visual assets

Thus the handoff delivers a set of React‑style components plus a README that Claude Code can consume directly, eliminating the need for PNGs or Figma links.

Generating an Offline Handoff Package

If you need a shareable archive, ask Claude to “create a developer handoff package with README, source code, and a double‑click previewable HTML”. Claude then produces a zip with the following structure:

design_handoff_picknote/
├── README.md                # explains bundle layout, token location, file‑to‑screen mapping
├── 记账原型（可直接预览）.html   # self‑contained HTML preview
└── source/                  # all .html and .jsx source files

The README guides Claude Code (or a human) on how to read the bundle, while the HTML file can be opened directly in a browser for non‑technical stakeholders.

Implementation in uni‑app (WeChat Mini‑Program)

Paste the copied command into the local Claude Code terminal, then add a stack specification so the output targets uni‑app (Vue 3 setup) and WeChat Mini‑Program:

Fetch this design file, read its readme, and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/<project‑specific‑hash>

Implement: the designs in this project

落地成 uni‑app（Vue3 setup）+ 微信小程序：
- 严格按设计 token：玉绿主题色、分类色盘、圆角、间距，写进 uni.scss
- JSX 组件转 uni‑app：div→view、文字→text、图片→image，单位用 rpx
- 每个 screens‑*.jsx 对应 pages 下一个页面，底部 5 tab 配进 tabBar
- 先用 data.jsx 里的示例数据接成 mock，让小程序先能跑

Claude Code generates the uni‑app pages, converts JSX to the appropriate view components, and injects the design tokens into uni.scss. Because the original prototype includes an iPhone frame and a WeChat capsule for visual realism, you must remove those wrappers for the real mini‑program and add safe‑area padding: padding-bottom: env(safe-area-inset-bottom); If the rendered app shows mismatched colors or spacing, return to Claude Design, adjust the design, and handoff again – the loop continues until the code matches the design.

Common Pitfalls and When to Use Claude Design

Token consumption : Claude Design is token‑hungry. Use low‑fidelity wireframes for early iterations; switch to high‑fidelity only for final designs. Heavy users may need the Max plan rather than Pro.

Preview‑period bugs : Inline comments may disappear; connection interruptions can require opening a new dialogue; linking large repositories can cause hangs; canvas precision is lower than Figma, so pixel‑perfect work may still need Figma.

Scenario guide :

From idea to code for a solo or small team – use Claude Design → Claude Code.

High‑fidelity mobile prototypes – Claude Design (includes iPhone frame and Tweaks).

Existing Figma files that need code – use Figma MCP restoration (previous article).

Pixel‑perfect, multi‑designer collaboration – stick with Figma.

Delivering decks or landing pages to clients – Claude Design (export to PPTX/HTML).

Overall, Claude Design eliminates the manual back‑and‑forth between designers and developers. While still in preview with occasional glitches and token costs, it provides a smooth workflow for turning ideas into runnable code.