使用 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 画布中CtrlV粘贴所有组件、文字、图片会自动分层并保留 Auto Layout在 Figma 中精修设计细节可选Step 3配置 Figma MCP 连接 Claude CodeFigma 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.mduser_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_rulesStep 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 的规范开发流程 。安装 Intuitionnpminstall-gtgoodington/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导出完整对话记录为 MarkdownCtrlR搜索历史 Prompt!命令直接执行终端命令如! npm run dev注意事项与最佳实践设计还原度Figma MCP 能最大程度保留设计稿的精确度优先使用此方式Token 管理复杂对话后使用/compact释放上下文避免超出 token 限制安全第一使用Plan Mode让 Claude 先规划再执行避免误修改环境变量如需连接数据库或 API向开发同事获取.env文件切勿在对话中粘贴密钥预览调试如内置预览失败可让 Claude 启动本地服务器并提供 localhost 链接快速上手示例从 Stitch 设计到 React 组件# 1. 启动 Figma MCPFigma 桌面端 → 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 类型定义和样式。