核心用法
extract-design-system 是一款基于 Playwright 的命令行工具，用于逆向工程公开网站的设计原语。用户只需提供目标 URL，工具便会自动抓取并解析页面的视觉样式，生成结构化的 Token 文件。工作流程包括：安装 Chromium 依赖、执行提取命令、审查归一化数据、按需生成启动文件。支持两种模式：仅提取原始数据（--extract-only），或完整生成项目可用的 Token 文件（init）。
显著优点
- 快速启动：无需手动测量或逐页审查，自动化提取显著缩短设计系统初始化周期。
- 结构化输出：提供
raw.json（原始抓取数据）、normalized.json（归一化语义 Token）、tokens.json（项目级配置）及tokens.css（CSS 变量），覆盖设计与开发全链路。 - 非侵入式：默认不修改现有项目代码，所有输出隔离在
.extract-design-system/与design-system/目录，风险可控。 - 版本明确：v1 定位清晰，聚焦原语提取而非完整组件库，避免过度承诺。
潜在缺点与局限性
- 动态内容限制：SPA、懒加载或权限墙后的页面可能提取不完整，工具明确声明不保证动态站点的完整性。
- 语义推断边界：仅提取可观测的 CSS 值，无法自动推断组件级语义 Token（如
button-primary与button-danger的映射关系）。 - 单页视角：基于单一 URL 的提取无法代表整个产品的设计系统全貌，可能存在品牌不一致的子域或页面未覆盖。
- 质量依赖源站：若目标网站内联样式混乱或使用 CSS-in-JS 运行时生成，提取的 Token 可能缺乏系统性。
适合人群
- 需要快速搭建设计系统原型的前端开发者或设计师。
- 进行竞品视觉分析、品牌一致性审查的团队。
- 已有设计系统但希望参考外部站点进行 Token 校准的维护者。
常规风险
- 数据隐私：虽仅提取公开页面的样式，仍需确保目标 URL 符合组织的数据使用政策。
- 误用风险：归一化数据可能包含主观推断，直接作为权威设计系统使用可能导致与源站实际规范偏差。
- 覆盖风险：尽管工具默认隔离输出，若用户手动复制 Token 到现有系统，需确认不覆盖关键业务样式。
- 依赖安全：依赖 Playwright 与 Chromium，需确保
npx执行环境的包来源可信。