Ingest Github

Name: Ingest Github
Author: bluzir

bluzir/claude-code-design

40 installs
98 repo stars
Updated April 20, 2026
bluzir/claude-code-design

Ingest-github is a Claude Code skill that clones a GitHub repo and extracts design tokens (colors, fonts, spacing) from its codebase.

About

Ingest-github clones a GitHub repo via the gh CLI and extracts design tokens (colors, fonts, spacing, radii) from theme files, token files, and Tailwind configs. It writes a structured tokens.json. A developer runs it to root new design work in a repo's existing visual style.

Clones a GitHub repo with gh and extracts colors, fonts, spacing, and radii from its codebase
Scans theme, tokens, tailwind.config, and _variables files via Glob
Writes a structured tokens.json to seed a design system or artifact

Ingest Github by the numbers

40 all-time installs (skills.sh)
Ranked #1,281 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 1, 2026 (Skillselion catalog sync)

At a glance

ingest-github capabilities & compatibility

Free; needs the gh CLI authenticated

Capabilities: ingest figma · ingest screenshot · make deck · interactive prototype
Works with: github
Use cases: ui design · web design
Pricing: Free

From the docs

What ingest-github says it does

Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase.

SKILL.md

No manual `git clone` required for the user — uses `gh` CLI.

SKILL.md

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/bluzir/claude-code-design/ingest-github.svg)](https://skillselion.com/skills/bluzir/claude-code-design/ingest-github)

Installs	40
repo stars	★ 98
Last updated	April 20, 2026
Repository	bluzir/claude-code-design ↗

What it does

Clone a GitHub repo and extract its colors, fonts, spacing, and radii into a tokens.json for design work.

When should I use this skill?

when a user gives a github.com URL and wants design work rooted in the repo's style

What you get

A tokens.json of colors, fonts, spacing, and radii extracted from the repo.

repo tokens.json

By the numbers

8 token-file glob patterns scanned
caps at 20 biggest candidate files

Files

SKILL.mdMarkdownGitHub ↗

Ingest GitHub

Pull a repo into a temp location and extract design tokens. No manual git clone required for the user — uses gh CLI.

Preflight

1. Bash(which gh) — if missing, tell user: brew install gh && gh auth login 2. Check $ARGUMENTS matches github.com/owner/repo[/(tree|blob)/ref/path]

Steps

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

2. 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>)

3. 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.*

4. 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

5. Write structured output:

   artifacts/ingested/<repo>-tokens.json

Schema:

   {
     "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. 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.

7. 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 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