mcpField
I
ingest-github

ingest-github

github.com/bluzir设计与 UI10747 次安装27 周前更新
代码仓库

关于 ingest-github

通过 GitHub CLI 获取代码库并提取设计令牌的设计工作流技能。它将令牌整理为结构化数据,供后续设计任务使用。

主要功能

  1. 01解析 GitHub 代码库链接
  2. 02使用 gh 浅克隆代码库
  3. 03查找令牌与主题文件
  4. 04提取颜色、字体、间距和圆角
  5. 05保存结构化令牌 JSON

适用场景

  1. 01从代码库导入设计令牌
  2. 02为视觉风格指南准备令牌
  3. 03在演示文稿或原型中使用代码库样式

安装

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

$npx skills add https://github.com/bluzir/claude-code-design --skill ingest-github

安装后在 Claude Code 中输入/ingest-github确认已加载。

详细介绍

导入 GitHub

将仓库拉取到临时位置并提取设计令牌。用户无需手动执行 git clone——使用 gh CLI。

预检

  1. Bash(which gh)——如果缺少,告知用户:brew install gh && gh auth login
  2. 检查 $ARGUMENTS 是否符合 github.com/owner/repo[/(tree|blob)/ref/path]

步骤

  1. 解析 URL,得到 {owner, repo, ref, subpath}。

    • 裸仓库:github.com/foo/bar → {owner:foo, repo:bar, ref:default, subpath:''}
    • Tree:github.com/foo/bar/tree/main/src → {owner:foo, repo:bar, ref:main, subpath:'src'}
  2. 浅克隆到 /tmp/cd-ingest-<slug>-<timestamp> 下的临时目录:

    Bash(mkdir -p /tmp/cd-ingest-<slug>)
    Bash(gh repo clone <owner>/<repo> /tmp/cd-ingest-<slug>/<repo> -- --depth 1 --branch <ref>)
    
  3. 通过 Glob 查找令牌文件(在克隆路径中):

    • **/theme.{ts,tsx,js,jsx,json}
    • **/tokens.{css,scss,json}
    • **/tailwind.config.{js,ts,cjs,mjs}
    • **/_variables.{css,scss}
    • **/colors.{ts,js,json}
    • **/*.tokens.json(W3C DTCG 格式)
    • **/design-tokens.*
    • **/palette.*
  4. 读取候选文件(最多读取 20 个最大的文件)并提取:

    • 颜色:正则 #[0-9a-fA-F]{3,8}、rgb\(...\)、oklch\(...\)、hsl\(...\),以及为它们赋值的 var/key
    • 字体:font-family: 值、命名字体栈
    • 间距:Tailwind 配置中的数值刻度、带有 --space-* / --spacing-* / --gap-* 的 CSS 变量
    • 圆角:带有 --radius-* / --rounded-* 的 CSS 变量、Tailwind borderRadius 配置
  5. 写入结构化输出:

    artifacts/ingested/<repo>-tokens.json
    

    架构:

    {
      "source": { "url": "...", "ref": "...", "ingested_at": "2026-04-20T..." },
      "colors": { "primary": "#...", "accent": "#...", "bg": "#...", "text": "#...", "semantic": {...}, "all": {...} },
      "fonts": { "display": "...", "body": "...", "mono": "...", "stacks": [...] },
      "spacing": [...],
      "radii": { "sm": 4, "md": 8, "lg": 16 },
      "shadows": [...],
      "components": { "Button": { "found_at": "src/.../Button.tsx" }, ... }
    }
    
  6. 向用户总结:

    • “找到 N 种颜色、M 种字体、间距刻度 [...]、K 种圆角。已保存到 artifacts/ingested/<repo>-tokens.json。”
    • 提供选项:使用 /create-design-system 将其转为视觉风格指南,或使用这些预加载的令牌开始 /make-deck / /interactive-prototype。
  7. **清理:**可选执行 Bash(rm -rf /tmp/cd-ingest-<slug>)——也可以保留以供进一步探索。

失败情况

  • 没有 gh → 明确报错并提供安装说明
  • 仓库为私有且未登录 → 提示执行 gh auth login
  • 未找到令牌 → 报告“仓库没有明确的设计令牌;建议手动使用 AskUserQuestion 作为回退,或尝试指定子路径”
  • 仓库过大(>500MB)→ 提醒用户,并提供 --subpath 以缩小范围

评论

支持 Markdown