使用 Claude Code 将 Google Stitch 设计稿转换为代码
概述
Google Stitch 是 Google Labs 推出的 AI UI 设计工具，能够通过自然语言生成高保真 UI 设计，并支持导出 HTML/CSS 代码或复制到 Figma 。配合 Claude Code，你可以将 Stitch 生成的设计进一步精细化转换为生产级前端代码。
整体工作流
css
Stitch 生成设计 → 导出设计稿/代码 → Claude Code 代码转换/优化 → 集成到项目方法一：Stitch + Figma + Claude Code（推荐）
Step 1：在 Stitch 中生成设计
- 访问 Stitch 官网 并使用 Google 账号登录
- 选择 Standard Mode（基于 Gemini 2.5 Flash，支持导出到 Figma）
- 输入设计提示词，选择界面类型（移动端/网页端）
提示词示例：
css
Design a modern and user-friendly fitness mobile app interface. The app should feature a bottom navigation bar with four tabs: Home, Workouts, Shop, and Profile.Step 2：导出设计到 Figma
- 生成满意设计后，点击页面顶部的 Figma 按钮
- 在 Figma 画布中
Ctrl+V粘贴，所有组件、文字、图片会自动分层并保留 Auto Layout - 在 Figma 中精修设计细节（可选）
Step 3：配置 Figma MCP 连接 Claude Code
Figma MCP 能让 Claude Code 直接读取 Figma 设计稿的结构化数据，生成高保真代码 。
启动 Figma MCP Server：
- 打开 Figma 桌面客户端（非网页版）
- 进入
Preferences → Enable Dev Mode MCP Server
配置 Claude Code 的 MCP： 在项目根目录的 .mcp.json 中添加：
json
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}或通过命令行添加：
bash
claude mcp add --transport sse Figma http://127.0.0.1:3845/sse添加 Figma 自定义规则到 CLAUDE.md：
markdown
<user_custom_rules>
# Figma Dev Mode MCP Rules
- IMPORTANT: If Figma MCP returns a localhost source for an image/SVG, use that source directly
- IMPORTANT: DO NOT import/add new icon packages, all assets should come from Figma
- IMPORTANT: DO NOT use or create placeholders if a localhost source is provided
</user_custom_rules>Step 4：使用 Claude Code 转换设计为代码
在 Figma 中选中要转换的设计画板，然后在 Claude Code 中输入：
css
请根据 Figma 当前选中的设计稿，将其转换为代码实现。
要求：
1. 使用 get_code 方法读取设计稿的 UI 细节
2. 使用 [React/Vue/HTML/CSS] 框架
3. 保持设计稿的间距、颜色、字体完全一致
4. 优先使用设计系统的 token/变量
5. 组件需要具备响应式能力Claude Code 会调用 Figma MCP 的 get_code 工具读取设计稿细节，并生成对应代码 。
Step 5：预览和迭代
Claude Code Desktop 提供内置预览功能：
- 点击 Preview 按钮可实时查看生成的页面
- 如需微调，直接描述修改需求："那个按钮的圆角改成 8px"
- Claude 会即时更新代码
方法二：直接使用 Stitch 导出的 HTML + Claude Code 优化
Step 1：从 Stitch 导出 HTML 代码
Stitch 支持直接导出 HTML/CSS 代码 ：
- 在 Stitch 中生成满意的设计
- 导出 HTML 代码包
Step 2：让 Claude Code 优化和重构代码
将导出的代码放入项目目录，然后使用 Claude Code 优化：
markdown
请分析并优化这个 Stitch 导出的 HTML/CSS 代码：
1. 将样式重构为更可维护的 CSS 模块/组件结构
2. 将静态 HTML 转换为 [React/Vue] 组件
3. 优化语义化 HTML 标签和无障碍访问
4. 添加响应式断点适配移动端/平板/桌面
5. 使用 CSS 变量统一管理设计 tokenStep 3：集成到现有项目
css
请将这些重构后的组件集成到我的现有项目结构中：
- 组件放在 src/components/[功能名]/
- 样式文件使用 [CSS Modules/Tailwind/Styled Components]
- 路由配置添加到 src/router/index高级技巧：使用 Intuition 工作流进行系统化开发
对于复杂项目，推荐使用 Intuition 工作流系统，它提供 trunk-and-branch 的规范开发流程 。
安装 Intuition
bash
npm install -g @tgoodington/intuition完整工作流
bash
/intuition-initialize # 初始化项目记忆（仅首次）
/intuition-start # 检查状态，获取下一步路由
/intuition-prompt # 描述设计需求，生成结构化简报
/intuition-outline # 创建策略蓝图，分解任务
/intuition-assemble # 匹配任务到领域专家
/intuition-detail # 生成详细代码规格
/intuition-build # 执行实现并验证
/intuition-test # 质量检验结合 Stitch 设计的使用方式：
- 在 Stitch 中生成页面设计
- 截图或导出设计稿作为视觉参考
- 在
/intuition-prompt阶段附上设计稿截图，描述设计意图 - 后续阶段 Intuition 会生成结构化的代码方案并指导实现
常用 Claude Code 命令速查
| 命令 | 功能 |
|---|---|
/init |
初始化项目记忆文件，扫描代码库生成架构说明 |
/review |
执行代码审查，检查语法错误和最佳实践 |
/compact |
压缩对话历史，释放上下文 token |
/export |
导出完整对话记录为 Markdown |
Ctrl+R |
搜索历史 Prompt |
!命令 |
直接执行终端命令（如 ! npm run dev） |
注意事项与最佳实践
- 设计还原度：Figma MCP 能最大程度保留设计稿的精确度，优先使用此方式
- Token 管理 ：复杂对话后使用
/compact释放上下文，避免超出 token 限制 - 安全第一 ：使用 Plan Mode 让 Claude 先规划再执行，避免误修改
- 环境变量 ：如需连接数据库或 API，向开发同事获取
.env文件，切勿在对话中粘贴密钥 - 预览调试：如内置预览失败，可让 Claude 启动本地服务器并提供 localhost 链接
快速上手示例：从 Stitch 设计到 React 组件
bash
# 1. 启动 Figma MCP（Figma 桌面端 → Preferences → Enable Dev Mode MCP）
# 2. 在 Claude Code 中配置
claude mcp add --transport sse Figma http://127.0.0.1:3845/sse
# 3. 启动 Claude Code
claude
# 4. 在对话中输入
> 请根据 Figma 当前选中的 Stitch 设计稿，生成一个 React + TypeScript 组件。
> 使用 Tailwind CSS 处理样式，组件放在 src/components/Dashboard。
> 确保响应式布局和暗色模式支持。Claude Code 会读取 Figma 中的设计稿结构，生成可直接使用的 React 组件代码，包括完整的 props 类型定义和样式。