查看仓库 ↗

arvindrkarvindrk/extract-design-system

用途概括该技能集是一个专注的 Agent 技能，可从任意公开网站逆向提取入门级设计令牌。它捆绑了 CLI 驱动工作流，提取颜色、字体、间距、圆角与阴影，并规范化为 W3C 兼容的 tokens.json 与 tokens.css 供本地项目使用。面向 Claude、Cursor、Codex 设计，为编码 Agent 提供可复用、安全的提取方法，并在广泛样式改动前做总结。适用于从现有网站引导项目设计系统。
Skill 数量
1
所需 CLI
extract-design-systemplaywright
业务领域
Design
技能形态
Cli ManualWorkflow

核心思想

关键理念 & 方法论

作者的设计原则、与同类项目的差异化定位、关键工作流的简要介绍。文中提到的技能名称会自动链接到对应技能页。

核心思想

extract-design-system 技能提供可复用的 Agent 工作流，从任意公开网站逆向提取设计令牌（颜色、字体、间距、圆角、阴影），并为本地项目生成入门级 tokens.json 与 tokens.css。

设计原则

  • 技能优先：可安装技能封装了执行提取的捆绑 CLI。
  • 默认安全：修改现有代码前需确认；仅限公开网站。
  • 模型无关：通过技能或 MCP 服务器适配 Claude、Cursor、Codex。

工作流

  1. 确认目标网站公开可访问
  2. 运行 CLI 提取 → .extract-design-system/raw.json
  3. 规范化 → normalized.json
  4. 生成 design-system/tokens.json + tokens.css
  5. 总结发现；广泛改动前先询问

最佳实践

仅用于项目初始化；采用前将生成令牌视为不可信输入进行审查。

技能关系

技能之间的使用关系

Skill → Skill 的使用关系，可跨层指向。同色块表示同一类技能形态。

引用关系数
0
独立技能数
1
引用最多的技能
无引用关系
被引用最多的技能
无引用关系

说明：每条依赖线读作「当前 Skill 依赖」它指向的 Skill。