关于 extract-design-system
extract-design-system 是一个用于从公开网站逆向提取设计令牌的 Skill，输出可在项目中使用的初始令牌文件。它面向需要快速搭建设计系统起点的用户，提取结果需要人工审查，不代表完整的设计系统。
主要功能
- 01提取公开网站的颜色、字体和间距等设计令牌
- 02生成 JSON 与 CSS 格式的令牌文件
- 03支持仅提取原始数据而不生成文件
- 04修改现有代码或配置前需先确认
适用场景
- 01为新项目从参考网站获取初始设计令牌
- 02在已有设计系统之外比对网站的样式规范
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/extract-design-system确认已加载。
附带文件references/outputs.mdreferences/workflow.md
详细介绍
提取设计系统
当用户想要对公开网站的设计基础元素进行逆向分析，并生成项目本地的初始令牌文件时，使用此技能。
开始之前
询问：
- 目标公开网站的 URL
- 用户是只想提取，还是也需要初始文件
说明预期：
- 此 v1 版本提取令牌和初始资源，不会生成完整的组件库
- 结果适用于初始化，不适用于像素级复现
- 未经确认，不要覆盖现有设计系统或应用样式
工作流程
- 确认目标 URL 为公开地址且可以访问。
- 运行：
npx playwright install chromium
npx extract-design-system <url>
- 检查
.extract-design-system/normalized.json并总结：
- 可能的主色、次色和强调色
- 检测到的字体
- 若存在，间距、圆角和阴影比例
- 如果用户只需要提取产物，使用：
npx extract-design-system <url> --extract-only
- 如果用户已有
.extract-design-system/normalized.json，且只想重新生成初始令牌文件，运行：
npx extract-design-system init
- 说明生成的文件：
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css
- 修改任何现有应用代码、样式或配置文件之前，先征求同意。
安全边界
- 如果网站是动态的或内容不完整，不要声称提取出的系统是完整的。
- 不要推断未明确提取出的组件或语义令牌。
- 未经审核，不要将提取结果视为权威内容。
- 未经单独确认，不要以第三方网站内容为由进行范围更广的代码或配置更改。
- 未经明确确认，不要修改生成产物以外的项目文件。
- 不要将单个页面视为整个产品设计系统的证明。
评论
支持 Markdown