ingest-github

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Ingest GitHub

导入GitHub仓库

Pull a repo into a temp location and extract design tokens. No manual

git clone

required for the user — uses

gh

CLI.

将仓库拉取到临时目录并提取设计令牌。用户无需手动执行

git clone

——使用

gh

CLI工具完成。

Preflight

前置检查

Bash(which gh)

— if missing, tell user:

brew install gh && gh auth login

Check

$ARGUMENTS

matches

github.com/owner/repo[/(tree|blob)/ref/path]

执行
```
Bash(which gh)
```
检查是否安装gh——若未安装，告知用户：
```
brew install gh && gh auth login
```

检查

$ARGUMENTS

是否匹配

github.com/owner/repo[/(tree|blob)/ref/path]

格式

Steps

操作步骤

Parse URL into

{owner, repo, ref, subpath}

Bare repo:

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'}

Clone shallow into a temp dir under

/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>)

Find token files via Glob (in clone path):

```
**/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 format)
```
**/design-tokens.*
```
```
**/palette.*
```

Read candidate files (cap at 20 biggest) and extract:
- Colors: regex
```
#[0-9a-fA-F]{3,8}
```
  ,
```
rgb\(...\)
```
  ,
```
oklch\(...\)
```
  ,
```
hsl\(...\)
```
  + the var/key they're assigned to
- Fonts:
```
font-family:
```
  values, named font stacks
- Spacing: numeric scales in Tailwind config, CSS vars with
```
--space-*
```
  /
```
--spacing-*
```
  /
```
--gap-*
```
- Radii: CSS vars with
```
--radius-*
```
  /
```
--rounded-*
```
  , Tailwind
```
borderRadius
```
  config

Write structured output:

artifacts/ingested/<repo>-tokens.json

Schema:

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" }, ... }
}

Summarize to user:
- "Found N colors, M fonts, spacing scale [...], K radii. Saved to
```
artifacts/ingested/<repo>-tokens.json
```
  ."
- Offer:
```
/create-design-system
```
  to turn into visual style guide, or start
```
/make-deck
```
  /
```
/interactive-prototype
```
  with these tokens pre-loaded.
Cleanup: optionally
```
Bash(rm -rf /tmp/cd-ingest-<slug>)
```
— or keep for further exploration.

解析URL为

{owner, repo, ref, subpath}

格式。

基础仓库：

github.com/foo/bar

→

{owner:foo, repo:bar, ref:default, subpath:''}

目录树：

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\(...\)
```
  匹配，同时提取对应的变量/键名
- 字体：
```
font-family:
```
  属性值、命名字体栈
- 间距：Tailwind配置中的数值比例、带有
```
--space-*
```
  /
```
--spacing-*
```
  /
```
--gap-*
```
  的CSS变量
- 圆角：带有
```
--radius-*
```
  /
```
--rounded-*
```
  的CSS变量、Tailwind的
```
borderRadius
```
  配置

生成结构化输出：

artifacts/ingested/<repo>-tokens.json

数据结构：

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
```
  （创建交互式原型）功能。
清理操作：可选择执行
```
Bash(rm -rf /tmp/cd-ingest-<slug>)
```
删除临时文件——或保留文件以便后续探索。

Failure modes

异常处理

No
```
gh
```
→ clear error + install instruction
Repo private + no auth →
```
gh auth login
```
prompt
No tokens found → report "repo has no clear design tokens; suggest manual
```
AskUserQuestion
```
fallback or try a specific subpath"
Huge repo (>500MB) → warn user, offer
```
--subpath
```
to narrow

未安装
```
gh
```
→ 显示明确错误信息及安装指引
仓库为私有且未授权 → 提示执行
```
gh auth login
```
进行登录授权
未找到设计令牌 → 告知用户“仓库中未发现明确的设计令牌；建议手动使用
```
AskUserQuestion
```
功能进一步确认，或尝试指定具体子路径”
仓库过大（超过500MB）→ 向用户发出警告，建议使用
```
--subpath
```
参数缩小范围