Tailwind配置就是设计系统stitch-skills提取设计令牌深度解析【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skillsstitch-skills是一个开源的 AI 智能体技能库其中extract-design-md技能能从前端源码中一键提取设计令牌自动生成 Stitch 兼容的 DESIGN.md 设计系统文档——React、Vue、Svelte、Angular 和原生 CSS 都支持无需构建和运行应用特别适合新手快速审计项目视觉语言。 一句话总结这个技能认为Tailwind 配置文件就是设计系统本身它优先从tailwind.config.js中提取色彩、字体、圆角和间距令牌再补全组件细节。为什么需要提取设计令牌很多团队的设计语言散落在 CSS 变量、组件样式和主题文件里没有统一文档。extract-design-md解决的就是这个问题不依赖构建环境直接读取源码文件依赖缺失或构建失败也能工作输出人类可读文档不是罗列 CSS 属性而是用编辑性语言描述设计意图与 Stitch 无缝衔接生成的 DESIGN.md 可交给manage-design-system技能上传并应用到界面技能如何工作四阶段流程技能的完整工作流定义在 SKILL.md 中第一阶段项目发现技能会扫描项目根目录的信号文件来识别技术栈信号文件识别结果package.json含reactReact / Next.jstailwind.config.js/tsTailwind CSStheme.js/tokens.js设计令牌文件识别后会自动加载对应的框架参考文档比如 react-tailwind.md、vue.md、svelte.md、angular.md 和 plain-css.md。第二阶段深度提取按六个维度系统性提取设计信息视觉氛围、色彩角色、字体系统、组件样式、布局原则、生成建议。第三阶段写入 DESIGN.md输出到项目目录下的.stitch/DESIGN.md必须包含 YAML 前置元数据颜色、字体、圆角、间距令牌 六个 Markdown 章节。第四阶段可选集成如需推送到 Stitch自动交接给manage-design-system技能完成 API 调用。核心思路Tailwind 配置就是设计系统这是整个技能最关键的洞见。在 SKILL.md 的提取技巧中明确写道Tailwind config is a design system.如果项目有定制的tailwind.config.js那就是设计系统——先从中提取再抽查组件是否有覆盖。参考文档 react-tailwind.md 给出了一份文件发现优先级表排在第一位的正是 Tailwind 配置tailwind.config.js/ts— 自定义的colors、fontFamily、borderRadius、spacing、screens就是设计系统定义globals.css— CSS 自定义属性--*变量、font-face声明theme.ts/tokens.ts— 显式令牌文件根布局文件 — 全局字体和背景设置组件文件 — 抽查 5~8 个代表性组件验证实际使用优先级背后的逻辑是高优先级文件代表意图低优先级文件代表实际落地。先看主题配置再看组件就能区分规范设计和临时样式。从 Hex 值到语义化命名提取不只是搬运数值更是翻译。技能要求给每个颜色起一个传达气质的描述性名称并标注功能角色反例 ❌正例 ✅#294056→ Blue#294056→Deep Muted Teal-Navy— 主 CTA 按钮、激活导航#FCFAFA→ Off-white#FCFAFA→Warm Barely-There Cream— 页面背景颜色会按功能而非色相分组基础背景层、强调交互层、文字层级层、功能状态层成功/错误/警告。同时自动合并近似重复色如#333与#2C2C2C让设计系统更干净。生成的 DESIGN.md 长什么样完整范例见 examples/DESIGN.md以Alpine Peak户外滑雪应用为例展示了理想输出形态YAML 令牌区结构化的colorssurface、primary、error 等、typography字号、字重、行高、字距、rounded、spacing完整映射品牌与风格用两段编辑性文案描述品牌个性——高性能、精致、可靠玻璃拟态 高对比度哲学色彩章节每个颜色都有名字、Hex 值和使用场景如安全橙仅用于紧急警告排版与布局解释字体选择的理由Inter 的小号可读性、Lexend 的活力感以及4px/8px 基线节奏的排版纪律配套的质量检查清单见 SKILL.md要求每个颜色都有描述名 Hex 角色、氛围章节读起来像杂志文案而非技术文档。上手指南一条命令开始在支持 Agent Skills 标准的智能体Claude Code、Cursor、Gemini CLI、Antigravity 等中安装技能后直接用自然语言触发扫描 /src 目录把设计系统提取到 .stitch/DESIGN.md技能会自动识别框架、读取 Tailwind 配置、抽查组件最后交付一份 Stitch 兼容的设计系统文档。如果想进一步推送到 Stitch还可以配合 upload_to_stitch.py 脚本上传本地资源或通过stitch-utilities插件中的 design-md 技能从 Stitch 项目反向生成文档形成双向闭环。值得借鉴的 4 个提取技巧技巧说明读注释和提交信息开发者常把设计意图写在/* hero — breathable */这类注释里优先查令牌库style-dictionary等库的文件是最权威的取值来源主题文件 组件样式theme.ts告诉你应该是什么样散落样式告诉你实际是什么样尊重 CSS 变量定义了--brand-primary就说明它是有意识的设计令牌总结extract-design-md技能用一份清晰的优先级规则和一个语义化命名标准把提取设计令牌这件原本需要资深设计师前端协作的事变成了一条自然语言指令。它输出的不只是数值清单而是一份能被人读懂、能被 AI 复用的设计语言说明书——这正是设计系统文档的理想形态。【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考