使用 Claude Code 将 Google Stitch 设计稿转换为代码
使用 Claude Code 将 Google Stitch 设计稿转换为代码
概述
Google Stitch 是 Google Labs 推出的 AI UI 设计工具，能够通过自然语言生成高保真 UI 设计，并支持导出 HTML/CSS 代码或复制到 Figma 。配合 Claude Code，你可以将 Stitch 生成的设计进一步精细化转换为生产级前端代码。
整体工作流
Stitch 生成设计 → 导出设计稿/代码 → Claude Code 代码转换/优化 → 集成到项目方法一：Stitch + Figma + Claude Code（推荐）
Step 1：在 Stitch 中生成设计
- 访问 Stitch 官网 并使用 Google 账号登录
- 选择Standard Mode（基于 Gemini 2.5 Flash，支持导出到 Figma）
- 输入设计提示词，选择界面类型（移动端/网页端）
提示词示例：
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中添加：
{"mcpServers":{"Figma":{"url":"http://127.0.0.1:3845/sse"}}}或通过命令行添加：
claude mcpadd--transportsse Figma http://127.0.0.1:3845/sse添加 Figma 自定义规则到CLAUDE.md：
<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 中输入：
请根据 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 优化：
请分析并优化这个 Stitch 导出的 HTML/CSS 代码： 1. 将样式重构为更可维护的 CSS 模块/组件结构 2. 将静态 HTML 转换为 [React/Vue] 组件 3. 优化语义化 HTML 标签和无障碍访问 4. 添加响应式断点适配移动端/平板/桌面 5. 使用 CSS 变量统一管理设计 tokenStep 3：集成到现有项目
请将这些重构后的组件集成到我的现有项目结构中： - 组件放在 src/components/[功能名]/ - 样式文件使用 [CSS Modules/Tailwind/Styled Components] - 路由配置添加到 src/router/index高级技巧：使用 Intuition 工作流进行系统化开发
对于复杂项目，推荐使用Intuition工作流系统，它提供 trunk-and-branch 的规范开发流程 。
安装 Intuition
npminstall-g@tgoodington/intuition完整工作流
/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 组件
# 1. 启动 Figma MCP（Figma 桌面端 → Preferences → Enable Dev Mode MCP）# 2. 在 Claude Code 中配置claude mcpadd--transportsse Figma http://127.0.0.1:3845/sse# 3. 启动 Claude Codeclaude# 4. 在对话中输入>请根据 Figma 当前选中的 Stitch 设计稿，生成一个 React + TypeScript 组件。>使用 Tailwind CSS 处理样式，组件放在 src/components/Dashboard。>确保响应式布局和暗色模式支持。Claude Code 会读取 Figma 中的设计稿结构，生成可直接使用的 React 组件代码，包括完整的 props 类型定义和样式。