Step 1：在 Stitch 输入一句话 App 描述
打开 Google Stitch 2.0，在输入框里描述你想要的 App。一句话就够。
比如：“一个健身打卡 App，首页有今日训练计划、周进度条、运动记录列表”
AI 会生成完整的设计方案：配色系统、字体选择、组件库、首页布局，全部自动生成。
⚠️ 踩坑提醒：国内访问 Stitch 需要翻墙。支持中英文输入，但英文描述生成的设计质量稍微好一些。
Step 2：用对话微调设计
底部有快捷修改选项，也可以自己输入指令。比如：
- “添加训练详情页面”
- “修改主色调为活力橙色”
- “设计个人成就排行榜页面”
一句话就能新增一整个页面，跟聊天一样。不需要画一笔。
Step 3：导出代码
点右上角 Export，选 Code to Clipboard，点 Convert。代码会复制到剪贴板。
导出选项很多：Figma、.zip、Instant Prototypes、Stitch React App、Code to Clipboard。
⚠️ 踩坑提醒：Stitch React App 导出（Beta）可能报错。用 Code to Clipboard 导出 HTML/CSS 代码是最稳的方式。Prototype 功能可用但页面可能不完整。
Step 4：用 Claude Code 转成可运行的 React App
打开 Claude Code，把导出的 HTML 代码粘贴进去，加上这段指令：
“把这些 HTML 页面转成 Vite + React + Tailwind 的 SPA App。用 react-router 做页面切换，底部导航栏做成共享组件。运行 npm run dev。”
Claude Code 会自动创建项目、拆分组件、配置路由。跑起来就是一个完整的单页应用，底部导航能切换页面。
为什么这个方法有效？
Stitch 解决了”从 0 到设计稿”这一步。以前你得先画线框图、选配色、定义组件，现在一句话就跳过了。
Claude Code 解决了”从设计稿到代码”这一步。以前你得手写 React 组件、配路由、调样式，现在粘贴 HTML 就能出来。
两个工具拼在一起，中间断掉的部分（Code to Clipboard）恰好是一个 copy-paste。整条链路没有断点。
⬆️ 升级路径
| 工具 | 价格 | 升级价值 |
|---|
| Stitch Pro (coming soon) | TBD | 更多导出格式、团队协作、版本历史 |
| Vercel | 免费起 | 一键部署 React App 到线上，给别人用 |
Step 1: Describe Your App in One Sentence
Open Google Stitch 2.0 and type a one-sentence description of the app you want.
For example: “A fitness tracking app with today’s workout plan, weekly progress bar, and activity log”
The AI generates a complete design: color system, typography, component library, and page layouts. All automatic.
Note: Stitch requires a VPN to access from mainland China. English descriptions tend to produce slightly better designs.
Step 2: Refine with Conversation
Use the quick-edit buttons at the bottom, or type your own instructions:
- “Add a training details page”
- “Change the primary color to energetic orange”
- “Design a personal achievements leaderboard”
One sentence adds an entire new page. No drawing required.
Step 3: Export the Code
Click Export in the top right, select Code to Clipboard, then Convert. The code copies to your clipboard.
Note: The “Stitch React App” export (Beta) may fail with errors. Code to Clipboard for HTML/CSS is the most reliable export method. The Prototype feature works but pages may be incomplete.
Step 4: Convert to a Running React App with Claude Code
Open Claude Code, paste the exported HTML, and add this instruction:
“Convert these HTML pages into a Vite + React + Tailwind SPA. Use react-router for page switching, make the bottom nav a shared component. Run npm run dev.”
Claude Code creates the project, splits components, configures routing. Run it and you have a fully functional single-page app with working navigation.
Why This Works
Stitch handles “from zero to design.” Previously you needed wireframes, color picking, component definitions. Now one sentence skips all of that.
Claude Code handles “from design to code.” Previously you had to write React components, configure routing, tweak styles. Now you paste HTML and get a running app.
The gap between the two tools (Code to Clipboard) is just a copy-paste. The entire chain has no broken links.
⬆️ Upgrade Path
| Tool | Price | Value |
|---|
| Stitch Pro (coming soon) | TBD | More export formats, team collaboration, version history |
| Vercel | Free tier | Deploy your React app online with one click |