代码到设计的往返

往返工作流让代码库与 Stitch 实现双向连接。你可以从一个 React 应用出发，把它的设计系统和屏幕提取到 Stitch，在云端进行视觉编辑，再把更新后的设计导出为整洁的 React 组件。

你将构建什么

你将从现有的 React + Vite 应用出发，提取设计 token，把屏幕捕获为静态 HTML，将所有内容上传到 Stitch，编辑设计，再将其转换回 React 组件。

前置条件

• 已完成 技能入门（已安装技能，已连接 MCP）
• 一个可正常运行开发服务器的现有 React 应用
• 已安装 Node.js 18+ 和 puppeteer

第 1 步：从源代码中提取设计 token

扫描源文件，逆向推导出一份设计系统文档——无需构建步骤。

extract-design-md 技能会读取你的组件、样式表、Tailwind 配置和主题文件，识别其中的色彩、排版、间距和组件模式。

打开生成的 .stitch/DESIGN.md，你会看到：

• YAML frontmatter，包含机器可读的色彩 token
• Markdown 章节，描述视觉氛围、色板、排版和布局
• 描述性名称，例如 “Deep Ocean Blue (#1a365d)”，而不是原始的十六进制色值

第 2 步：捕获静态 HTML 快照

启动开发服务器，然后把正在运行的应用捕获为自包含的 HTML：

该技能会启动无头 Chrome，捕获完整渲染后的 DOM，内联所有 CSS，并把图片转换为 base64 data URI。每个输出文件都完全自包含——没有任何外部依赖。

如果有多个页面，请对每条路由重复操作：

第 3 步：上传到 Stitch

用一条命令把所有内容推送到新的 Stitch 项目：

该技能会创建一个项目，把 DESIGN.md 作为设计系统上传，并将每个 HTML 文件导入为一个屏幕。打开 Stitch，即可看到包含所有已上传屏幕的项目，其样式遵循你的设计系统。

第 4 步：编辑设计

无需改动代码，即可进行有针对性的视觉调整：

该技能会按照你的指令调用 edit_screens，同时保留现有设计系统。一次只做一项修改效果最好——请通过多次追加编辑逐步迭代，而不是把所有要求塞进一条提示词。

第 5 步：导出回 React

把更新后的 Stitch 屏幕转换回组件代码：

react-components 技能会下载最新的屏幕 HTML，提取 Tailwind 主题值，把设计拆分为模块化组件，创建类型安全的接口，将静态数据移到 src/data/mockData.ts，并通过 AST 校验所有内容。

启动开发服务器——现在的 React 组件已经反映了你在 Stitch 中所做的设计更改，包括新增的客户评价区。

完整往返流程

以下是你刚刚完成的步骤：

步骤	方向	发生了什么
提取 token	代码 → DESIGN.md	从源代码逆向推导出设计系统
捕获 HTML	代码 → 静态文件	把运行中的应用快照为自包含 HTML
上传	文件 → Stitch	把素材和设计系统导入云端
编辑	Stitch → 更新后的设计	进行有针对性的视觉调整
导出	Stitch → React	根据设计生成更新后的组件

下一步

• 从代码库导入 — 提取设计系统的更多方式，包括一条无需任何技能的快捷提示词
• 创建高端设计系统 — 生成一套精心策划、符合反同质化标准的设计系统
• 为什么使用语义化 token？ — 了解为什么描述性设计语言比原始 CSS 更适合 AI