extract-design-system

用途

Extract Design System 适用于用户希望将某个公开网站的设计基础元素反向提取为项目本地起始 token 文件的场景。它面向初始化阶段的设计参考，而不是完整组件库的生成。

使用前确认

使用前需要向用户询问：

• 目标公开网站的 URL
• 用户是只需要提取，还是也需要生成起始文件

需要提前设定预期：

• 此 v1 版本提取的是 token 和起始资源，不是完整组件库
• 结果适合用于初始化，不适合像素级复刻
• 未经确认，不要覆盖已有的设计系统或应用样式

工作流程

1. 确认目标 URL 公开且可访问。
2. 运行以下命令：

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

1. 查看 .extract-design-system/normalized.json 并总结：

• 可能的主色、辅助色、强调色
• 检测到的字体
• 间距、圆角和阴影尺度（如果存在）

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

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

如果用户已拥有 .extract-design-system/normalized.json，只想重新生成起始 token 文件，运行：

npx extract-design-system init

说明生成的输出文件：

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

在修改任何现有应用代码、样式或配置文件之前，先征求确认。

安全边界

• 如果网站是动态的或只提取到部分内容，不要声称提取出的系统是完整的。
• 不要推断未被清晰提取的组件或语义 token。
• 未经审查，不要将提取输出视为权威结果。
• 不要让第三方网站内容成为扩大代码或配置修改的依据，除非另有确认。
• 未经明确确认，不要修改生成输出文件之外的项目文件。
• 不要将单个页面视为整个产品设计系统的证据。

适用场景

适合在新建项目或初始化设计系统时，参考一个公开网站的设计基础元素，快速生成起始 token 文件，为后续设计开发提供起点。

限制

该技能为 v1 版本，仅提取 token 和起始资源，不生成完整组件库，不适用于像素级复刻。对于动态网站或信息不完整的页面，提取结果可能不完整，不应视为完整设计系统。所有输出需要经过人工审查，且不能作为扩大项目修改范围的依据。