以 skill 自身的术语
这个 skill 读取前端代码库并写出一份 DESIGN.md，捕捉其视觉语言，而不构建或渲染应用。它通过 package.json 和配置文件检测框架（React、Vue、Svelte、Angular、Tailwind、CSS-in-JS、纯 CSS），然后依次梳理氛围、色彩调色板与角色、字体排印、组件样式、布局原则，以及供 Stitch 生成使用的备注。
输出落在 .stitch/DESIGN.md，且必须以带有 name 和 colors 映射的 YAML frontmatter 块开头，因为其他 skill 会解析它。面向对现有项目的设计系统进行逆向工程、审计或迁移的设计师和开发者。
它产出什么
- 一份按标准设计系统格式组装的 DESIGN.md 文档。
- 该文件顶部有一个带 name 和 colors 映射的 YAML frontmatter 块，随后是各个 markdown 章节。
- 最后一部分是供 Stitch 生成使用的设计系统备注，涵盖语言、色彩引用和组件提示词。
工作方式
- 01检测框架和技术栈
扫描项目根目录，查找 package.json、tailwind.config.js、postcss.config.js、theme.js 或 tokens.js 等标志性文件，然后读取 package.json 以了解框架、CSS 工具链和任何设计 token 库。
- 02阅读匹配的框架参考文档
React/Next/Tailwind、Vue/Nuxt、Svelte、Angular 和纯 CSS 各有一份参考文件，包含针对特定框架的模式，用于定位颜色、字体排印和间距。
- 03提取色彩调色板并分配角色
颜色来自 CSS 自定义属性、Tailwind 配置、主题文件、组件样式、局部作用域类和 CSS-in-JS 对象，随后按功能而非色调分组。
- 04分析组件和布局
该 skill 会查看按钮、卡片、导航、输入框和特定领域的组件，以及网格、留白、对齐方式和响应式表现。
- 05写出 DESIGN.md
所有内容按标准 DESIGN.md 格式组装，并写入一个 .stitch 目录（若不存在则创建）。
- 06可选：交给 Stitch 处理
如果用户希望将设计系统推送到 Stitch，写好的 DESIGN.md 就会成为 manage-design-system skill 的输入。