SuperAPI AI 工具集

design-system-extractor

设计与创作

查看项目

更新于 10-16 08:49

技能介绍

用途:扫描前端仓库,发现设计令牌(token)定义位置,提取实际使用的值,汇总为一份可读的 DESIGN-SYSTEM.md,覆盖排版、颜色、间距/布局、过渡、阴影和组件样式。

主要能力:自动识别多种令牌来源,不假设框架,包括 Tailwind 配置、CSS 自定义属性、SCSS/LESS 变量、CSS-in-JS 主题(styled-components、emotion、vanilla-extract、stitches)、设计令牌 JSON、全局样式表与字体声明。通过频率排序区分真实令牌与一次性漂移值,并以作者已有命名为准,缺名时标注为推断值。

使用方式:对仓库根目录运行两个脚本。 bash /mnt/skills/user/design-system-extractor/scripts/scan-tokens.sh [repo_root] bash /mnt/skills/user/design-system-extractor/scripts/extract-values.sh [repo_root] repo_root 默认为当前目录。第一个脚本输出各类别源文件清单的 JSON,第二个输出按频率排序的取值映射 JSON。随后直接阅读权威源文件,整理出名称到值的对照表,撰写文档。

适用场景:需为既有前端项目补建设计系统文档、跨框架整理令牌、发现硬编码或近似重复颜色等不一致。

限制:脚本结果为空通常因扫描了构建产物或错误根目录,应改指向源码包;脚本权限不足时用 bash 执行或先 chmod +x;大型 monorepo 中 find 较慢,脚本已剪枝 node_modules、.git、build,可缩小范围。近似重复值属于漂移而非错误。其余功能、收费与平台信息暂未提供。