ingest-github について
GitHub CLIでリポジトリを取得し、デザイントークンを抽出するデザインワークフロースキルです。トークンを構造化データとして保存し、後続のデザイン作業に使えます。
主な機能
- 01GitHubリポジトリURLの解析
- 02ghによる浅いクローン
- 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}に解析します。- リポジトリ URL のみの場合:
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'}
- リポジトリ URL のみの場合:
-
/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スキーマ:
{ "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 対応