extract-design-system 是一个用于从公开网站反向工程提取设计系统的技能。完整包为 arvindrk/extract-design-system。
用途 该技能面向需要复用或参考现有网站视觉规范的设计与开发场景。它通过抓取并分析目标网站的 CSS，提取设计令牌，包括颜色调色板、字体排印比例、间距系统、边框圆角和盒阴影，最终输出 tokens.json（兼容 W3C 格式）和 tokens.css（CSS 自定义属性）两份文件，可直接在本地使用。此外，它也提供独立命令行工具形式，适合需要脚本化提取流程的场景。
主要能力
- 反向工程设计令牌：颜色、字体排印、间距、边框圆角、盒阴影。
- 输出 tokens.json（W3C 兼容）与 tokens.css（CSS 自定义属性）。
- 可作为独立 CLI 工具用于脚本化提取流水线。
使用方式 该技能提供决策树指引：首先检查是否已安装，查看 ~/.design-agent-skills/skills/ 目录下是否存在 extract-design-system 或相关目录；若已安装则直接调用并继续。若未安装，检查是否有 Shell 访问权限：有则按下方命令安装；无则向用户展示命令（Claude Code 中可用 ! 作为聊天消息发送，添加 -g 表示全局安装，省略则为仅项目安装）。
安装命令： npx skills add arvindrk/extract-design-system
安装后调用： 技能名称：extract-design-system 触发短语："extract design system"、"reverse-engineer tokens"、"extract tokens from website"
适用场景
- 需要参考或复用某个公开网站的设计规范时。
- 希望将现有网站的视觉样式转换为可维护的设计令牌时。
- 需要脚本化批量提取设计令牌的流水线场景。
限制与不适用场景
- 不适用于从 Figma 源文件提取令牌，应使用 Figma MCP（figma-official-skills）或 figma-variables-tokens-generator。
- 不适用于 Stitch/DESIGN.md 输出格式，应使用 extract-design-md（taste-design-stitch）。
- 不适用于从零构建令牌架构，应使用 design-tokens-skill。
暂未提供的信息 该技能的许可协议、价格、支持的平台范围、具体技术依赖、性能数据以及可提取网站的具体限制条件等信息暂未提供。