About ingest-github
A design workflow skill that uses the GitHub CLI to retrieve a repository and extract design tokens. It writes structured token data for use in subsequent design tasks.
Key features
- 01Parses GitHub repository URLs
- 02Shallow-clones repositories with gh
- 03Finds token and theme files
- 04Extracts colors, fonts, spacing, and radii
- 05Saves structured token JSON
Use cases
- 01Importing design tokens from a repository
- 02Preparing tokens for a visual style guide
- 03Using repository styles in a deck or prototype
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ bluzir/ claude-code-design --skill ingest-githubAfter installing, type/ingest-githubin Claude Code to confirm it loaded.
Details
From the project READMEIngest GitHub
Pull a repo into a temp location and extract design tokens. No manual git clone required for the user — uses gh CLI.
Preflight
Bash(which gh)— if missing, tell user:brew install gh && gh auth login- Check
$ARGUMENTSmatchesgithub.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'}
- Bare repo:
-
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-*, TailwindborderRadiusconfig
- Colors: regex
-
Write structured output:
artifacts/ingested/<repo>-tokens.jsonSchema:
{ "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-systemto turn into visual style guide, or start/make-deck//interactive-prototypewith these tokens pre-loaded.
- "Found N colors, M fonts, spacing scale [...], K radii. Saved to
-
Cleanup: optionally
Bash(rm -rf /tmp/cd-ingest-<slug>)— or keep for further exploration.
Failure modes
- No
gh→ clear error + install instruction - Repo private + no auth →
gh auth loginprompt - No tokens found → report "repo has no clear design tokens; suggest manual
AskUserQuestionfallback or try a specific subpath" - Huge repo (>500MB) → warn user, offer
--subpathto narrow
Comments
Markdown supported