stitch-skills 设计提取指南：从 Plain CSS / SASS / Less 代码库逆向还原设计系统

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::extract-design-md技能框架参考文档的深度实战篇。它面向无 JavaScript 框架的项目——静态站点、WordPress 主题、纯 HTML/CSS 站点以及重度依赖 CSS 预处理器的项目——讲解如何系统性地定位样式文件、抽取设计令牌Design Token、还原颜色/字体/间距/响应式体系并最终合成一份可被 Stitch 直接消费的DESIGN.md设计系统文档。读完本文你将掌握从.css/.scss/.less源码中完成一次完整设计系统逆向工程的可复现方法论。适用范围为什么需要专门的纯 CSS 提取模式stitch::extract-design-md技能的完整工作流SKILL.md分为三个阶段项目发现Phase 1→ 深度提取Phase 2→ 撰写 DESIGN.mdPhase 3。其中 Phase 1 的「框架检测」会先扫描项目根目录的特征文件当项目只存在.css/.scss/.less文件而没有package.json中的框架依赖时就应当采用本文描述的 Plain CSS / SASS 提取模式。这类项目包括静态站点纯 HTML CSS 的多页面网站WordPress 主题以style.css头部注释声明主题元数据、通过functions.php入队资源的传统主题Jekyll / Hugo静态站点生成器项目样式集中在_sass/或assets/css/CSS 预处理器重度项目以 SCSS 变量、SASS Maps、Less 变量承载设计令牌的代码库。与 React/Vue/Svelte 等框架项目不同纯 CSS 项目的设计信息全部沉淀在样式文件本身没有tailwind.config.js、theme.ts之类的「设计系统声明文件」可读因此提取顺序和推断策略显得尤为关键。文件发现顺序按信息密度优先级读取在没有任何框架上下文时样式文件需要按优先级逐层发现高优先级文件通常承载全局设计意图低优先级文件展示组件层实现index.html/*.html—— 检查link标签和style块定位样式表引用、内联样式与字体加载方式主样式表style.css、main.css、app.css—— 项目的主 CSS 文件重点关注自定义属性、基础样式和排版规则_variables.scss/_tokens.scss/variables.less—— 预处理器变量文件承载设计令牌_mixins.scss—— 可复用的样式模式反映设计惯例组件/模块样式表—— 服务于具体 UI 组件的独立 CSS 文件。这套顺序的核心理念是先全局后局部先确定项目的视觉基调与令牌系统再核对组件层的实际落地。需要说明的是本文参考文档references/plain-css.md给出的是一般性指引实际项目中文件名可能不同可以结合extract-static-html技能的脚本思路见 scripts/extract_inline_html.ts 中通过style块正则与link relstylesheet解析收集样式内容的方式验证自己的发现是否完整。CSS 自定义属性现代纯 CSS 的最干净令牌源现代原生 CSS 项目通常通过:root中的自定义属性Custom Properties声明一整套设计系统这是最干净的事实来源cleanest source of truth应直接提取并为每个令牌命名:root { /* Colors */ --color-primary: #294056; --color-bg: #FCFAFA; --color-surface: #F5F5F5; --color-text: #2C2C2C; --color-text-secondary: #6B6B6B; --color-border: #E0E0E0; --color-success: #10B981; --color-error: #EF4444; /* Typography */ --font-heading: Manrope, sans-serif; --font-body: Inter, sans-serif; --font-size-base: 1rem; --line-height-body: 1.7; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 6rem; /* Shapes */ --radius-button: 8px; --radius-card: 12px; /* Shadows */ --shadow-card: 0 2px 8px rgba(0,0,0,0.06); }提取要点变量名即角色提示--color-primary、--spacing-md、--radius-card这类命名本身就是设计意图的声明SKILL.md 的 Tips 中强调「CSS custom properties are intentional —— 开发者定义了--brand-primary就是在告诉你这是设计令牌应当尊重它」按功能分组而非按色相分组SKILL.md 的 Phase 2 要求将颜色归类为「Primary Foundation背景/表面色→ Accent InteractiveCTA/激活态/链接→ Typography Text Hierarchy主/次/三级文本→ Functional States成功/错误/警告/信息」四层每个令牌要映射为描述性名称 角色例如#294056不应写成 Blue而应写成Deep Muted Teal-Navy — Primary CTA, active navigation参考 examples/DESIGN.md 中对每个颜色给出描述性名称 hex 功能角色的写法。SASS/SCSS 令牌模式把 Maps 当设计字典提取SCSS 项目通常把设计值组织成 Sass Maps 与命名变量它们本质上就是「设计令牌字典」需要提取所有值// _variables.scss $colors: ( primary: #294056, background: #FCFAFA, surface: #F5F5F5, text: #2C2C2C, text-muted: #6B6B6B, ); $font-stack-heading: Manrope, sans-serif; $font-stack-body: Inter, sans-serif; $breakpoints: ( mobile: 768px, tablet: 1024px, desktop: 1280px, ); $spacers: ( section: 5rem, component: 2rem, element: 1rem, );提取时注意Sass Maps 的 key 就是语义角色primary、background、surface、text、text-muted直接映射为 DESIGN.md 中的颜色角色层断点与间距的 Maps 同样属于设计系统$breakpoints对应 Layout Principles 中的响应式断点$spacers对应 Whitespace StrategyAngular 项目的 SCSS 变量亦可类比参考文档 references/angular.md 中展示了$color-primary: #294056等扁平命名变量映射逻辑完全一致——「These are explicit design tokens. Map them directly」。Less 变量模式Less 使用前缀变量提取方法相同——将每个变量映射为描述性名称与功能角色primary-color: #294056; bg-color: #FCFAFA; text-color: #2C2C2C; font-heading: Manrope, sans-serif; border-radius-base: 8px;注意 Less 生态的组件库如 NG-ZORRO 的ng-zorro-antd.less变量覆盖也遵循同样的「覆盖文件即设计系统」原则这在 references/angular.md 中同样有说明。静态站点与 WordPress 主题的专属检查点对于无构建流程的站点样式信息的分布更分散需要按平台定制检查WordPress检查style.css头部注释中的主题元数据Theme Name、Author、Version 等样式表通常位于wp-content/themes/name/assets/css/functions.php可能通过wp_enqueue_style()入队 Google Fonts字体信息要从 PHP 代码中提取Jekyll / Hugo检查_sass/或assets/css/目录SASS 部分文件_*.scss通常在构建时被合并静态 HTML一切信息都存在于 CSS 文件与style块中同时要留意 HTML 内联的字体link。一个实用的验证手段是参考extract-static-html技能的 extract_inline_html.ts 脚本它用正则收集style块内容、解析link relstylesheet的 href仅保留 http 开头的外部样式表可以快速摸清一个纯 HTML 站点的样式依赖图谱。内联样式扫描遗留代码库与邮件模板的兜底方案对于重度依赖内联样式的项目遗留代码库、HTML 邮件模板需要通过正则搜索 HTML 文件中的style...属性按属性类型对唯一值分组background-color: #FCFAFA, #F5F5F5, #294056 color: #2C2C2C, #6B6B6B, white border-radius: 8px, 12px font-family: Manrope, Inter随后去重deduplicate并为每个值分配角色。这是提取信息密度最低的场景也是最需要人工归纳的场景——内联样式没有语义化命名只能靠值的分布频率与**使用上下文哪个选择器/元素在用**推断设计意图。颜色提取策略无令牌系统时的全量发现当项目没有任何显式令牌系统时需要跨所有样式表发现颜色。建议在全库中搜索以下属性声明background-color: background: color: border-color: border: outline-color: box-shadow: fill: stroke:收集所有唯一的十六进制值、rgb()、rgba()、hsl()值后按两步整理按邻近度分组将色差在几个色阶内的相近颜色归并例如#333与#2C2C2C常是同一颜色的近似副本SKILL.md 的 Quality Checklist 明确要求「near-duplicate colors are consolidated」按上下文分配角色观察哪些选择器使用该颜色——按钮背景色、链接色、边框色、文本色——从而推断其功能角色。补充说明fill与stroke通常出现在内联 SVG 中对图标色系功能色、强调色的还原价值很高容易在纯 CSS 项目中被遗漏。响应式模式断点与各断点下的内容策略在所有样式表中搜索media查询常见的三类模式media (max-width: 768px) { ... } /* Mobile-first breakpoint */ media (min-width: 1024px) { ... } /* Desktop enhancement */ media (prefers-color-scheme: dark) { ... } /* Dark mode support */需要记录的不仅是断点数值还包括每个断点下的内容策略——列数变化、内边距调整、导航形态转换如汉堡菜单——这些将写入 DESIGN.md 的「Responsive Behavior Touch」小节。注意prefers-color-scheme: dark的存在意味着项目支持深色模式应在 DESIGN.md 的 Visual Theme Atmosphere 中体现双主题基调。从提取到成文DESIGN.md 的产出标准提取完成后按 SKILL.md Phase 3 的要求将结果组装为标准格式的DESIGN.md放置在项目目录下的.stitch/DESIGN.md。文件必须以 YAML frontmatter 开头含name与colors映射字段结构可参考 examples/DESIGN.md 中colors、typography、rounded、spacing等键的完整形态随后依次是 Visual Theme Atmosphere、Color Palette Roles、Typography Rules、Component Stylings、Layout Principles、Design System Notes for Stitch Generation 六个部分。在将纯 CSS 项目的原始值转化为 DESIGN.md 时务必遵循「意图优先于字面值」的原则技术值border-radius: 12px、#294056应翻译为设计师与 Stitch 都能理解的自然语言描述Subtly rounded corners、Deep Muted Teal-Navy。交付前用 SKILL.md 的 Quality Checklist 自检每个颜色是否有描述性名称 hex 功能角色、排版是否含字体族/字重/完整层级、组件样式是否描述形状/颜色/状态/过渡、布局是否含 max-width/网格/断点/间距策略、生成说明是否使用自然语言而非 CSS 语法。总结Plain CSS / SASS / Less 提取模式的核心方法论可归纳为五步闭环按信息密度排序发现文件——HTML → 主样式表 → 变量/令牌文件 → Mixins → 组件样式优先寻找显式令牌——CSS 自定义属性、Sass Maps、Less 变量是最高信号源直接映射语义角色无令牌系统时做全量颜色发现——扫描颜色相关属性按邻近度去重、按上下文分配角色补齐排版、间距、形状与响应式维度——满足 DESIGN.md 六大章节的数据需求翻译为描述性语言输出——按 examples/DESIGN.md 模板合成.stitch/DESIGN.md交给manage-design-system技能上传至 Stitch。这套流程无需构建或运行应用仅靠读取源码即可完成设计系统逆向适用于「依赖缺失、构建失败或仅需快速审计」的任意场景——这正是stitch::extract-design-md相较基于渲染结果的design-md技能design-md/SKILL.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点击查看免费下载相关推荐Stitch Skills 实战从 React / Next.js / Tailwind 源码中逆向提取完整设计系统Stitch Skills 实战从 React / Next.js / Tailwind 源码中逆向提取完整设计系统 导读 本篇文章以 stitch skilAI 技能AI 插件Vue/Nuxt 设计系统提取指南基于 stitch-skills extract-design-md 从源码逆向出 DESIGN.mdVue/Nuxt 设计系统提取指南基于 stitch skills extract design md 从源码逆向出 DESIGN.md 导读 本文讲解 stAI 技能AI 插件Angular 设计系统逆向提取实战基于 stitch-skills 的 extract-design-md 模式指南Angular 设计系统逆向提取实战基于 stitch skills 的 extract design md 模式指南 导读 本文面向需要从现有 AngulaAI 技能AI 插件上一篇Erlang/OTP 废弃接口管理实战-deprecated/-removed 属性、DEPRECATIONS 清单与 otp_build 自动化流程下一篇ty 类型检查器中的 TypeVar 下标与切片语义解析基于 ruff 仓库 mdtest 测试套件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考