从代码库导入

你的代码库里已经有一套设计语言——色彩散落在各个样式表中，间距模式埋藏在组件文件里，排版选择锁在 Tailwind 配置中。DESIGN.md 把这一切汇集到一处，让 Stitch 生成的屏幕看起来属于你的产品，而不是从零起步的默认外观。

实现这一目标有两条路径：一段可以粘贴到任何编码智能体中的快捷提示词，或一个能将整个流程自动化的专用技能。

快捷提示词

在项目目录下，把这段提示词复制到任何编码智能体（Gemini、Claude Code、Cursor、Antigravity）中。无需技能或插件——智能体会读取你的源文件，并根据所发现的内容写出 DESIGN.md。

PROMPT

Context — optionalAdd specifics about your codebase’s purpose, critical files, and goals.

InstructionsRead the codebase and/or website before designing. The repo and/or website are the source of truth. Start with real content. Pull product names, taglines, and copy from the README. Pull labels, values, and terminology from config files, CLI help text, schemas, and error messages. Nothing invented, nothing placeholder — if the repo doesn’t contain it, the design doesn’t show it. Look at existing code for visual identity: color values, type scales, spacing tokens, component patterns. If a design system exists, inherit it. If values are scattered across files, collect them — they reveal visual intent even when undocumented. Read the core logic and data structures, not just the docs. They tell you the product’s native shape — a timeline, a graph, a catalog, a pipeline. Let that shape organize the page instead of a section template. Find what the README leads with. That feature dominates the page. Establish its weight before placing anything else — what matters before what measures.

这段提示词的作用

这段提示词要求智能体从你的代码出发倒推，而不是从模板出发正推。它会提取三个层面：

内容——直接取自源文件的产品名称、标签和文案。没有填充文本，没有 lorem ipsum。
视觉识别——从样式表、主题文件和 Tailwind 配置中收集的色彩、字体、间距和组件模式。
信息架构——产品数据的天然形态，它决定了页面的组织方式。

产出的 DESIGN.md 可以直接放进 .stitch/DESIGN.md，立即用于生成屏幕。

提升效果的技巧

**让智能体关注特定目录。**在上下文块中加入类似“重点关注 src/styles/、tailwind.config.ts 和 src/components/”的内容。
**说明你的技术栈。**告诉智能体“这是一个 React + Tailwind + shadcn/ui 项目”，有助于它找对地方。
**反复迭代。**第一次提取捕捉的是整体轮廓。继续打磨它：“强调色应该用导航栏里的青绿色，而不是页脚里的蓝色。”

使用 Stitch Design Skills 自动提取

上面的提示词在任何地方都能用，但它依赖智能体的通用推理能力。Stitch Design Skills 是专门构建的智能体指令，确切知道在每个主流框架中该去哪里寻找设计 token——React、Vue、Svelte、Angular、纯 CSS 和 Tailwind。

什么是 Stitch Design Skills？

Stitch Design Skills 是一个开源集合，包含 13 个智能体技能，组织为三个插件：

插件	功能
stitch-design	创建并捕获设计——从代码中提取 token、为运行中的应用截取快照、上传到 Stitch
stitch-build	把设计变成代码——React 组件、演示视频、shadcn/ui 集成
stitch-utilities	提升质量——提示词优化、高级设计系统、自主多页面生成

这些技能遵循 Agent Skills 开放标准，可与任何兼容的编码智能体配合使用。

安装插件套件

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

根据你使用的智能体，把 claude-code 替换为 cursor、gemini-cli 或 antigravity。

从源代码中提取 DESIGN.md

extract-design-md 技能会扫描你的源码树，无需构建或运行应用：

PROMPT

Extract the design system from ./src and write it to .stitch/DESIGN.md

该技能会自动检测你的技术栈（Tailwind 配置、CSS 自定义属性、主题文件、styled-components），并逐一梳理每个设计维度：

视觉氛围——整体情绪、留白理念、色温
调色板——每一种独一无二的色彩，去重后赋予功能角色
排版——字体族、字号层级体系、字重与字距模式
组件样式——按钮、卡片、导航、输入框，以及领域特有的元素
布局原则——网格系统、响应式断点、间距策略

输出同时包含 YAML frontmatter（机器可读的 token）和 Markdown 正文（人类可读的设计依据）。正是这种双模格式，让 DESIGN.md 既能服务于工具，也能服务于 AI 智能体。

上传到 Stitch

拿到 DESIGN.md 后，把它推送到 Stitch 项目，让此后生成的每个屏幕都遵循你的设计系统：

PROMPT

Upload .stitch/DESIGN.md to Stitch and create a design system from it.

manage-design-system 技能负责处理上传，并在项目层面注册设计系统。之后生成的所有屏幕都会自动继承你的 token。

完整的 code-to-design 流水线

若想一次性完成完整导入——设计系统提取、静态 HTML 捕获并上传到 Stitch——请使用编排技能：

PROMPT

Upload the frontend at ./my-app into a Stitch project called “My App Migration”.

code-to-design 技能串联三个步骤：从运行中的应用提取静态 HTML、从源码逆向推导设计系统，最后把所有内容上传到 Stitch。

我应该用哪种方法？

场景	推荐做法
快速提取，无需配置	把上面的提示词复制到任何智能体中
彻底、感知框架的提取	安装技能，使用 `extract-design-md`
完整迁移到 Stitch	安装技能，使用 `code-to-design`
从零撰写 DESIGN.md	参见什么是 DESIGN.md？了解格式