extract-design-system

提取设计系统

当用户想要将公共网站的设计基础元素逆向工程为项目本地的初始令牌文件时，使用此技能。

开始之前

询问：

• 目标公共网站的 URL
• 用户是否只需要提取，还是也需要初始文件

设定预期：

• 此 v1 版本提取令牌和初始资产，而非完整的组件库
• 结果适用于初始化，而非像素级完美复制
• 未经确认，不要覆盖现有的设计系统或应用样式

工作流程

1. 确认目标 URL 是公开且可访问的。
2. 运行：

npx playwright install chromium
npx extract-design-system <url>

3. 检查 .extract-design-system/normalized.json 并总结：

• 可能的主色/次要色/强调色
• 检测到的字体
• 间距、圆角和阴影比例（如果存在）

4. 如果用户只需要提取产物，使用：

npx extract-design-system <url> --extract-only

5. 如果用户已有 .extract-design-system/normalized.json 且只想重新生成初始令牌文件，运行：

npx extract-design-system init

6. 解释生成的输出：

• .extract-design-system/raw.json
• .extract-design-system/normalized.json
• design-system/tokens.json
• design-system/tokens.css

7. 在修改任何现有应用代码、样式或配置文件之前先询问。

安全边界

• 如果网站是动态的或部分加载，不要声称提取的系统是完整的。
• 不要推断未明确提取的组件或语义令牌。
• 未经审查，不要将提取的输出视为权威。
• 未经单独确认，不要让第三方网站内容证明更广泛的代码或配置更改。
• 未经明确确认，不要修改项目文件超出生成的输出文件。
• 不要将单个页面视为整个产品设计系统的证据。