这个 Skill 是做什么的

这个工具可以反向分析任何公开网站，把颜色、字体、间距、圆角、阴影等设计元素提取出来，输出标准化的 tokens.json 和 tokens.css 文件。 当你需要参考某个网站的配色或排版风格，或者想快速搭建一套设计系统时很有用。提取的结果符合 W3C 规范，可以直接导入到自己的项目中。 支持 Claude Code、Cursor、Codex 等 AI 助手以 Skill 形式调用，也可以作为独立 CLI 工具使用，输入网址就能生成设计 token 文件

基本信息

  • 分类：设计与多媒体
  • 作者 / 来源：arvindrk
  • 价格：免费
  • 更新日期：2026-09-05
  • 项目主页：github.com

适用场景

设计配图 · 智能体

安全审计结论

❔ 未审计：未能取到可扫描的文件

  • 未能取到可扫描的文件，仅按公开信誉信号定档
  • 审计日期：2026-09-26
  • 静态评分：100 / 100

未命中高危 / 中危特征。

口径说明：这是对仓库内可执行内容的静态特征扫描，外加开源许可、维护活跃度等公开信誉信号，不是杀毒引擎，也不能替代你自己核对源码。标记为「已审计」只代表扫过的这批文件里没发现高危写法。完整口径与全站审计明细 →

如何安装

来源：GitHub 开源仓库。克隆命令：git clone https://github.com/arvindrk/extract-design-system.git

  1. 在终端执行下面的克隆命令，把仓库拉到本地。
  2. 按仓库 README 找到 Skill 目录（通常在根目录，或 skills / agents 这类子目录）。
  3. 把该目录整体复制到你的 Agent 技能目录 —— Claude Code 是 ~/.claude/skills/，其它 Agent 以各自文档为准。
  4. 重启或刷新 Agent，让它重新扫描技能目录，然后按技能名调用。

仓库地址：github.com/arvindrk/extract-design-system

同类 Skills