AI 技能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点击查看免费下载本文围绕 stitch-skills 仓库中stitch::extract-design-md技能SKILL.md展开讲解如何在不构建、不渲染应用的前提下直接从 React、Vue、Svelte、Angular、纯 HTML/CSS 等前端源码中分析出完整的设计系统颜色、排版、间距、组件模式、布局原则并产出 Stitch 可解析的DESIGN.md文档。读完本文你将掌握完整的三阶段提取工作流、六维深度分析方法、DESIGN.md的 YAML frontmatter 与正文结构规范以及如何将该文档进一步接入manage-design-system技能同步进 Stitch。Skill 定位为什么需要从源码提取设计系统仓库中的另一个技能design-md见 plugins/stitch-utilities/skills/design-md/SKILL.md基于渲染后的 HTML工作它通过 Stitch MCP Server 拉取已设计屏幕的截图与 HTML 源码来合成语义化设计系统。但实践中常常存在如下处境依赖缺失、构建失败应用根本无法运行只想快速审计某个前端仓库的视觉语言不必启动项目需要把既有项目的视觉身份迁移到 Stitch需要统一或调和代码库中不一致的样式。extract-design-md正是为这些场景设计它直接读取源文件本身——样式表、组件文件、主题配置、Tailwind 配置——而非渲染产物。因此它更快、更轻且几乎不受环境限制是design-md渲染路线的互补方案。从技能元数据SKILL.md可以看到该技能声明了name: stitch::extract-design-md允许使用stitch*:*Stitch MCP 工具、Bash、Read、Write、web_fetch等工具说明它既能纯本地读取源码也具备与 Stitch 服务联动的能力。适用场景与前置条件何时使用以下任一需求出现时都应优先调用本技能用户持有前端代码库希望提取或记录其设计系统用户想把项目视觉身份迁移进 Stitch用户要求审计样式或理解代码库的设计语言用户希望从现有源码创建DESIGN.md应用无法构建/渲染但源码可用用户希望统一或调和代码库中不一致的样式。用户甚至只需要说一句这个应用长什么样或从这段代码里把设计抽出来就足以触发本技能。前置条件能够访问前端项目的源码目录不需要任何构建或运行时依赖——本技能只读取源文件这使其在 CI 审计、只读仓库、离线环境等场景下依然可用。Phase 1项目发现Project Discovery提取工作的第一步是搞清楚面对的是什么技术栈这决定了后续使用哪套提取模式。1. 检测框架与工具链扫描项目根目录的特征文件快速定位框架与样式工具特征文件框架 / 工具package.json含reactReact / Next.jspackage.json含vueVue / Nuxtpackage.json含svelteSvelte / SvelteKitpackage.json含angular/coreAngulartailwind.config.js/tsTailwind CSSpostcss.config.jsPostCSS 管线依赖中含styled-components或emotionCSS-in-JS仅有.css/.scss/.less文件纯 CSS / SASStheme.js/theme.ts/tokens.js设计令牌文件务必先读package.json它不仅揭示框架与 CSS 工具链还会暴露设计令牌库如style-dictionary、chakra-ui/react、mui/material、ant-design这些信息直接告诉你应该去哪里找样式信息。2. 绘制源码树识别需要分析的关键目录与文件src/ ├── components/ ← 组件级样式 ├── styles/ ← 全局样式表 ├── theme/ ← 主题定义、令牌 ├── assets/ ← 字体、图片 ├── app.css ← 根样式 └── index.css ← 入口 CSS同时检查tailwind.config.js/tailwind.config.ts—— 自定义颜色、字体、间距globals.css/global.css—— CSS 自定义属性变量任意theme.*或tokens.*文件组件库配置如chakra-theme.ts、vuetify.config.ts。3. 读取框架专属指南本技能为不同框架准备了专门的提取模式参考文档务必在深入前阅读与目标栈匹配的那一份React / Next.js / Tailwind→ references/react-tailwind.mdVue / Nuxt→ references/vue.mdSvelte / SvelteKit→ references/svelte.mdAngular→ references/angular.md纯 CSS / SASS / Less→ references/plain-css.md这些参考文档包含定位颜色、排版、间距与组件样式的框架特有模式。以 React 栈为例react-tailwind.md 给出的文件读取优先级是tailwind.config.js/ts最重要自定义theme.extend即设计系统定义→globals.css/index.cssCSS 自定义属性与font-face→theme.ts/tokens.ts显式令牌→ 根布局文件全局字体与背景→ 5~8 个代表性组件。其核心思想是优先级越高的文件越代表设计意图优先级越低越接近实际交付物。Phase 2深度提取Deep Extraction这是整个技能的核心阶段。逐维度系统化地处理每个设计维度先从源文件中收集原始数据再将其综合为描述性语言。目标不是倾倒每一个 CSS 属性而是理解样式选择背后的意图并用人工编辑式的语言加以描述使另一位设计师或 Stitch能据此复刻同样的视觉感受。1. 视觉主题与氛围Visual Theme Atmosphere先读最宏观的样式以把握整体基调根背景body或根元素背景是什么浅奶油色#f区间暗示轻盈/干净深色#0–#2区间暗示忧郁/戏剧性留白哲学间距值是否慷慨32px还是紧凑检查根容器、区块包裹器与卡片组件的 padding/margin密度统计每页/每区块的组件数量。少而疏 极简多而密 信息密集色温中性色偏暖奶油、棕褐还是偏冷蓝灰、石板灰整体感受综合成 1~2 句丰富的句子捕捉其情绪基调。在源码中寻找这些信号源码位置透露的信息根background-color或布局上的 Tailwindbg-*整体明暗Tailwind 配置或 CSS 变量中的间距刻度留白哲学组件数量 vs 包裹器 padding密度自定义属性命名--warm-*vs--cool-*色温意图主题文件中的注释开发者自己的设计意图表述2. 调色板与角色Color Palette Roles从代码库提取每一个独特颜色并赋予功能角色。需要在所有层中搜索颜色来源层搜索目标CSS 自定义属性--color-*、--primary、--bg-*Tailwind 配置theme.extend.colors主题/令牌文件颜色对象、调色板组件样式background-color、color、border-color内联/局部样式模板中的bg-*、text-*类CSS-in-JS 主题对象colors、palette键按功能而非色相分组Primary Foundation主要基底—— 背景与表面颜色Accent Interactive强调与交互—— CTA 按钮、激活态、链接Typography Text Hierarchy排版与文本层级—— 一级、二级、三级文本Functional States功能状态—— 成功、错误、警告、信息为每个颜色创建能唤起其性格的描述性名称而非生硬的十六进制值❌#294056→ Blue✅#294056→Deep Muted Teal-Navy—— Primary CTA激活导航去重至关重要。代码库往往存在近重复颜色如#333与#2C2C2C应将它们合并到最能代表意图的单一名称之下。对于没有显式令牌系统的项目plain-css.md 建议对所有样式表搜索background-color:、background:、color:、border-color:、box-shadow:、fill:、stroke:等属性收集全部hex、rgb()、rgba()、hsl()值再按色相近邻分组、依据选择器上下文分配角色。3. 排版规则Typography Rules提取完整的排版系统字体族检查 CSSfont-family、TailwindfontFamily、Google Fonts 链接或本地font-face声明记录每种字体的性格几何还是人文主义、衬线还是无衬线、唤起何种感觉。字号刻度层级找出每个标题层级H1-H6与正文记录font-sizerem 或 pxfont-weight数值 描述性名称letter-spacing以及为什么——优雅紧凑line-height为可读性而宽松为展示而紧凑映射组件用法产品卡片用哪个标题层级Hero 区块呢间距原则文本间距如何与整体间距刻度关联标题与正文的 letter-spacing 模式差异line-height 哲学正文宽松放松、展示紧凑。4. 组件样式Component Stylings分析 4~5 个最重要的 UI 基元按钮Buttons圆角传达什么——俏皮专业极简primary、secondary、ghost 变体的配色方案hover/focus/active 状态与过渡时长padding 比例水平 vs 垂直。卡片 / 容器Cards / Containers圆角常与按钮不同——略圆阴影策略扁平、微妙的 hover 阴影、或常驻悬浮边框处理发丝线边框、彩色强调线、或没有内部 padding慷慨还是紧凑卡片内图片处理全出血、留边、圆角。导航Navigation布局模式水平栏、垂直侧栏、抽屉排版处理大写、letter-spacing、字重激活/悬停状态指示下划线、颜色、背景移动端行为汉堡菜单、底部导航、抽屉。输入与表单Inputs Forms边框样式与焦点行为与按钮的圆角一致性padding 与触控目标尺寸。领域专属组件Domain-Specific Components识别 1~2 个本项目特有的组件如产品卡片、仪表盘组件、聊天气泡并描述其样式模式。5. 布局原则Layout Principles提取结构系统网格与结构Grid Structure最大内容宽度来自容器max-width列系统CSS Grid、Flexbox 模式、定义的断点响应式断点来自媒体查询或 Tailwind 配置。留白策略Whitespace Strategy基础间距单位8px 网格4px自定义区块间距主要区块之间的空间边缘 padding不同断点下的页面边距。对齐与视觉平衡Alignment Visual Balance文本对齐模式居中 Hero、左对齐正文图片与文字比例视觉重量分布。响应式行为Responsive Behavior移动优先还是桌面优先网格如何折叠padding 刻度如何变化触控目标尺寸。6. Stitch 生成备注Stitch Generation Notes将提取结果综合成可供 Stitch 直接使用的提示词材料氛围语言Atmosphere language把情绪基调翻译为自然语言描述词颜色引用Color references以描述名 十六进制形式列出颜色组件提示词Component prompts写出 2~3 个可在 Stitch 中复刻关键组件的示例提示词迭代指引Iteration guidance在此设计系统内优化屏幕的技巧。这一维度与design-md技能的理念一脉相承Stitch 通过视觉描述 具体色值来理解设计见 design-md/SKILL.md因此提取结果必须从技术数值转化为设计师友好、自然语言的表达例如把rounded-full描述为Pill-shaped药丸形、把rounded-lg描述为Subtly rounded corners微圆角。Phase 3撰写 DESIGN.md将所有内容组装进标准的DESIGN.md格式放置于项目目录的.stitch/DESIGN.md若.stitch/目录不存在则创建。[!IMPORTANT]必须在文件顶部包含带name与colors映射的 YAML frontmatter格式与 examples/DESIGN.md 中的示例完全一致。这份结构化数据是其他技能解析设计系统所必需的。未能包含至少核心颜色令牌的 YAML 块即视为未正确使用本技能。以 examples/DESIGN.md 为模板文件必须以 YAML 块开头随后是 markdown 章节# Design System: [Project Name] **Project ID:** [如已知否则省略] ## 1. Visual Theme Atmosphere [2 段式丰富描述情绪基调、哲学、关键特征] ## 2. Color Palette Roles ### Primary Foundation ### Accent Interactive ### Typography Text Hierarchy ### Functional States ## 3. Typography Rules ### Hierarchy Weights ### Spacing Principles ## 4. Component Stylings ### Buttons ### Cards [Domain-Specific Containers] ### Navigation ### Inputs Forms ### [Domain-Specific Components] ## 5. Layout Principles ### Grid Structure ### Whitespace Strategy ### Alignment Visual Balance ### Responsive Behavior Touch ## 6. Design System Notes for Stitch Generation ### Language to Use ### Color References ### Component Prompts ### Incremental IterationYAML frontmatter 结构解析仓库自带的 examples/DESIGN.md一个滑雪主题 Alpine Peak 设计系统展示了完整的 frontmatter 骨架可分为四组结构化数据1.colors颜色令牌采用 Material Design 3 风格的完整语义色阶包括表面体系surface、surface-dim、surface-bright、surface-container-lowest~container-highest、surface-variant文本/轮廓on-surface、on-surface-variant、outline、outline-variant、inverse-surface、inverse-on-surface、surface-tint主/次/第三角色primary、on-primary、primary-container、on-primary-container、inverse-primary、secondary系列、tertiary系列固定态primary-fixed、primary-fixed-dim、on-primary-fixed、on-primary-fixed-variantsecondary/tertiary 同理错误与背景error、on-error、error-container、on-error-container、background、on-background。2.typography排版令牌每个命名字体样式都带fontFamily、fontSize、fontWeight、lineHeight、letterSpacing五个字段例如display-lg: fontFamily: Inter fontSize: 48px fontWeight: 800 lineHeight: 56px letterSpacing: -0.02em3.rounded圆角刻度sm: 0.25rem、DEFAULT: 0.5rem、md: 0.75rem、lg: 1rem、xl: 1.5rem、full: 9999px。4.spacing间距刻度以unit: 4px为基准xs: 4px、sm: 8px、md: 16px、lg: 24px、xl: 32px外加gutter: 16px、margin-mobile: 20px、margin-desktop: 40px。正文部分则完全使用编辑式语言该示例把深蓝命名为Deep Peak Blue、把主画布命名为Powder White用 Glassmorphism、High-Contrast 等自然语言描述氛围与深度用最小 48x48px 触控目标适配戴手套的用户描述可访问性决策——这正是捕捉意图而非原始数值的范本。Phase 4可选集成Integration如果用户希望把设计系统推入 Stitch转交给manage-design-system技能执行 MCP 的 create/update 调用你写出的DESIGN.md就是输入——manage-design-system/SKILL.md 负责 Stitch API 集成。若用户只需要文档本身完成 Phase 3 即告结束。从 manage-design-system/SKILL.md 的源码可以看出后续链路通过upload-to-stitchPython 脚本base64 编码.md文件绕过输出 token 上限上传到/v1/projects/{projectId}/screens:batchCreate再调用create_design_system_from_design_md在项目级建立设计令牌之后生成屏幕时无需在提示词中重复颜色/字体/圆角——Stitch 已在项目层持有这些令牌。这印证了DESIGN.md的 YAML frontmatter 是整条设计系统管线的数据基石。质量检查清单Quality Checklist交付DESIGN.md前逐项核验每个颜色都有描述性名称、十六进制代码与功能角色排版包含字体族、字体性格描述与完整层级组件样式描述形状、颜色、状态与过渡布局包含 max-width、网格、断点与间距策略Stitch 生成备注使用自然语言而非 CSS 语法氛围章节读起来像编辑文案而非技术文档近重复颜色已合并文档捕捉的是样式背后的意图而非原始数值更优提取的实用技巧Tips for Better Extraction阅读注释与提交信息。开发者常在代码注释中记录设计意图/* hero section — breathable */提交信息同样如此。它们是理解为什么的金矿。检查设计令牌库。若项目使用style-dictionary、tokens-studio等这些文件是设计数值的最权威来源。主题文件比组件样式信号更强。定义调色板的theme.ts告诉你意图中的设计系统组件中零散的内联样式告诉你实际交付的样式。两者都重要但从主题入手。Tailwind 配置本身就是设计系统。如果项目有定制过的tailwind.config.js那就是设计系统——先从中提取再抽查组件找覆盖项。CSS 自定义属性是有意为之。开发者定义了--brand-primary就是在告诉你这是设计令牌。请尊重它。与其他技能的分工协作在stitch-design插件plugin.json的生态中extract-design-md与相邻技能形成了清晰的分工design-mdplugins/stitch-utilities/skills/design-md/SKILL.md面向 Stitch 项目内已渲染屏幕通过 MCP 拉取截图与 HTML 合成语义设计系统——从成品反推extract-design-md本技能面向任意前端源码仓库纯静态读取——从原料提炼覆盖design-md无法工作的场景无渲染、无构建、纯审计manage-design-systemmanage-design-system/SKILL.md消费两者产出的DESIGN.md完成上传、建系统、应用到屏幕的 MCP 操作。两条提取路线的产物都遵循同一DESIGN.md结构规范因此无论设计系统来自已渲染屏幕还是纯源码下游的 Stitch 集成链路完全一致。选择哪条路线只取决于你手上有什么能跑的项目给design-md只有代码的项目给extract-design-md。赞分享AI 技能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点击查看免费下载相关推荐Vue/Nuxt 设计系统提取指南基于 stitch-skills extract-design-md 从源码逆向出 DESIGN.mdVue/Nuxt 设计系统提取指南基于 stitch skills extract design md 从源码逆向出 DESIGN.md 导读 本文讲解 stAI 技能AI 插件为 Google Stitch 生成语义化设计系统taste-skill 的 stitch-skillStitch Design Taste完整实战指南为 Google Stitch 生成语义化设计系统taste skill 的 stitch skillStitch Design Taste完整实战指南AI 技能前端设计系统用 design-md Skill 打造 Stitch 语义化设计系统从屏幕分析到 DESIGN.md 生成的完整实战指南用 design md Skill 打造 Stitch 语义化设计系统从屏幕分析到 DESIGN.md 生成的完整实战指南 导读 本文基于 stitch sAI 技能AI 插件上一篇Dagger TypeScript SDK 中 DirectoryID 类型别名从声明到引擎实现的全解析下一篇Gutenberg Latest Posts 核心块完整指南从 block.json 属性到服务端渲染实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考