mcpField
E
extract-design-system

extract-design-system

github.com/podo设计与 UI30172 次安装4 天前更新
代码仓库

关于 extract-design-system

extract-design-system 可让 Agent 从公开网站提取初步设计令牌和素材，并生成 JSON 与 CSS 文件。修改现有应用代码或样式前会先征求同意。

主要功能

  1. 01提取颜色、字体、间距、圆角和阴影尺度
  2. 02使用无头 Chromium 抓取网站
  3. 03生成原始及规范化令牌 JSON
  4. 04生成 W3C 风格令牌和 CSS 变量
  5. 05修改应用代码前征求同意

适用场景

  1. 01根据公开网站初始化项目设计令牌
  2. 02将网站视觉样式作为设计起点进行检查

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill extract-design-system

安装后在 Claude Code 中输入/extract-design-system确认已加载。

附带文件stub.yaml

详细介绍

extract-design-system

目录简介 — 完整技能：arvindrk/extract-design-system

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/extract-design-system/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/extract-design-system/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已安装为 extract-design-system，调用它并继续
    • pointer → 转到第 2 步

  2. 检测作用域，然后安装：

    [ -e ~/.agents/skills/extract-design-system ] && echo "global" || echo "project"

    全局：

    npx skills add arvindrk/extract-design-system --skill extract-design-system -g -y

    项目：

    npx skills add arvindrk/extract-design-system --skill extract-design-system -y

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行命令。

注意事项

  • 要求： Node.js、npx 和网络访问（使用时，该技能会运行 npx playwright install chromium 和 extract-design-system npm 包）
  • 许可证： MIT

安装后调用

  • 技能名称：extract-design-system
  • 触发语句："extract design system"、"reverse-engineer tokens"、"extract tokens from website"

功能

从公开网站 URL 反向工程提取基础设计令牌。该技能会让 Agent 运行 extract-design-system CLI（通过无头 Chromium 爬取网站），然后总结发现的信息：可能的主色、次色和强调色，检测到的字体，以及间距、圆角和阴影尺度。它会写入 .extract-design-system/raw.json 和 normalized.json，以及 W3C 风格的 design-system/tokens.json 和包含 CSS 自定义属性的 design-system/tokens.css。它提取令牌和基础资源，而不是组件库；在修改任何现有应用代码或样式前，会先征求许可。结果适合用于初始化项目，不适合像素级复现。

不适用场景

  • 从 Figma 源文件提取令牌 → 使用 Figma MCP（figma-official-skills）或 figma-variables-tokens-generator
  • 需要 DESIGN.md 规范文档而非令牌文件 → 使用 extract-design-md
  • 从零开始构建令牌架构 → 使用 design-tokens-skill

评论

支持 Markdown