关于 ingest-github
通过 GitHub CLI 获取代码库并提取设计令牌的设计工作流技能。它将令牌整理为结构化数据,供后续设计任务使用。
主要功能
- 01解析 GitHub 代码库链接
- 02使用 gh 浅克隆代码库
- 03查找令牌与主题文件
- 04提取颜色、字体、间距和圆角
- 05保存结构化令牌 JSON
适用场景
- 01从代码库导入设计令牌
- 02为视觉风格指南准备令牌
- 03在演示文稿或原型中使用代码库样式
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ bluzir/ claude-code-design --skill ingest-github安装后在 Claude Code 中输入/ingest-github确认已加载。
详细介绍
导入 GitHub
将仓库拉取到临时位置并提取设计令牌。用户无需手动执行 git clone——使用 gh CLI。
预检
Bash(which gh)——如果缺少,告知用户:brew install gh && gh auth login- 检查
$ARGUMENTS是否符合github.com/owner/repo[/(tree|blob)/ref/path]
步骤
-
解析 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'}
- 裸仓库:
-
浅克隆到
/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>) -
通过 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.*
-
读取候选文件(最多读取 20 个最大的文件)并提取:
- 颜色:正则
#[0-9a-fA-F]{3,8}、rgb\(...\)、oklch\(...\)、hsl\(...\),以及为它们赋值的 var/key - 字体:
font-family:值、命名字体栈 - 间距:Tailwind 配置中的数值刻度、带有
--space-*/--spacing-*/--gap-*的 CSS 变量 - 圆角:带有
--radius-*/--rounded-*的 CSS 变量、TailwindborderRadius配置
- 颜色:正则
-
写入结构化输出:
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" }, ... } } -
向用户总结:
- “找到 N 种颜色、M 种字体、间距刻度 [...]、K 种圆角。已保存到
artifacts/ingested/<repo>-tokens.json。” - 提供选项:使用
/create-design-system将其转为视觉风格指南,或使用这些预加载的令牌开始/make-deck//interactive-prototype。
- “找到 N 种颜色、M 种字体、间距刻度 [...]、K 种圆角。已保存到
-
**清理:**可选执行
Bash(rm -rf /tmp/cd-ingest-<slug>)——也可以保留以供进一步探索。
失败情况
- 没有
gh→ 明确报错并提供安装说明 - 仓库为私有且未登录 → 提示执行
gh auth login - 未找到令牌 → 报告“仓库没有明确的设计令牌;建议手动使用
AskUserQuestion作为回退,或尝试指定子路径” - 仓库过大(>500MB)→ 提醒用户,并提供
--subpath以缩小范围
评论
支持 Markdown