skillui

SkillUI — デザインシステム抽出ツール

公開中のウェブサイト、ローカルプロジェクト、公開リポジトリからデザインシステムを抽出し、Claude が読み取れるファイル（SKILL.md、DESIGN.md、トークン JSON）にまとめます。既存のサイトのビジュアル言語に合わせて UI を構築したい場合は、事前にこちらを使用してください。

使用する場面

• ユーザーが URL を提示し、そのデザインスタイルに合わせる、またはクローンを作成したい場合
• 既存のサイトから色、フォント、余白を抽出したい場合
• ローカルプロジェクトまたはリポジトリからデザイントークンを抽出したい場合
• 「デザインを取り込んで」「このサイトに合わせて」「トークンを取得して」「スタイルを抽出して」とユーザーが言った場合

モード

モード	コマンド	使用する場面
URL（静的）	npx skillui --url <url>	高速な抽出 — HTML／CSS／フォント／色
URL（ウルトラ）	npx skillui --url <url> --mode ultra --screens 10	スクリーンショット、アニメーション、インタラクションを含む詳細な抽出。Playwright が必要です。
ローカルディレクトリ	npx skillui --dir ./path/to/project --name "ProjectName"	ローカルの Next.js／React／Tailwind プロジェクトをスキャンします
公開リポジトリ	npx skillui --repo https://github.com/user/repo	任意の公開 GitHub リポジトリをクローンして解析します

ワークフロー

ステップ 1 — 抽出ツールを実行する

# Basic (recommended first try)
npx skillui --url https://example.com

# With output folder
npx skillui --url https://example.com --out ./design-systems/example

# Ultra mode (full extraction with screenshots)
npx skillui --url https://example.com --mode ultra --screens 10

ステップ 2 — 出力を Claude Code で開く

生成されたフォルダーには、次のファイルが含まれます。

• SKILL.md / CLAUDE.md — フォルダーを開くと、Claude がこれらを自動的に読み取ります
• DESIGN.md — デザインシステムの詳細なドキュメント
• tokens/colors.json、tokens/spacing.json、tokens/typography.json
• screens/ — スクリーンショット（ウルトラモードのみ）
• fonts/ — バンドルされた Google Fonts（woff2）

生成されたフォルダーを開きます。

cd <generated-folder-name> && claude

または、Read ツールで DESIGN.md を読み込み、現在のセッションから直接参照できます。

ステップ 3 — デザインシステムを使用する

出力が生成されたら、トークンファイルと DESIGN.md をコンテキストに読み込み、UI の構築時に適用します。関連するトークンを frontend-design スキルと ui-ux-pro-max デザインシステムジェネレーターに渡します。

メモ

• API キーやクラウドへの依存はなく、すべてローカルで実行されます
• ウルトラモードでは、Playwright をインストールする必要があります：npm install playwright && npx playwright install chromium
• 出力フォルダー名は、サイト名またはリポジトリ名から自動的に決まります
• 出力内の .skill ZIP アーカイブは共有または保管できます