extract-design-system

extract-design-system

カタログ用の仮エントリー — スキルの全文：arvindrk/extract-design-system

判断ツリー

1. スキルの全文はすでにインストールされていますか？

   • グローバル：f=~/.agents/skills/extract-design-system/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/extract-design-system/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは extract-design-system としてインストール済みです。これを呼び出して続行します
   • pointer → ステップ 2 に進みます

2. スコープを検出してからインストールします：

   [ -e ~/.agents/skills/extract-design-system ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add arvindrk/extract-design-system --skill extract-design-system -g -y
   

   プロジェクト：

   npx skills add arvindrk/extract-design-system --skill extract-design-system -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、チャットメッセージを ! で始めて送信します。

注意事項

• 必要条件： npx とネットワークアクセスが利用できる Node.js（スキルの実行時に npx playwright install chromium と extract-design-system npm パッケージを使用します）
• ライセンス： MIT

インストール後の呼び出し

• スキル名：extract-design-system
• トリガー：「デザインシステムを抽出」「トークンをリバースエンジニアリング」「ウェブサイトからトークンを抽出」

このスキルの機能

公開ウェブサイトの URL から、初期デザイン用トークンをリバースエンジニアリングします。このスキルはエージェントに extract-design-system CLI（ヘッドレス Chromium によるクロール）を実行させ、検出した内容を要約します。内容には、主色・副色・アクセントカラーの候補、検出したフォント、スペーシング・角丸・シャドウのスケールが含まれます。.extract-design-system/raw.json と normalized.json に加え、W3C 形式の design-system/tokens.json と、CSS カスタムプロパティをまとめた design-system/tokens.css を書き出します。抽出対象はトークンと初期アセットであり、コンポーネントライブラリではありません。また、既存のアプリコードやスタイルを変更する前に確認を求めます。結果はプロジェクトの初期設定には適していますが、ピクセル単位の完全な再現には適していません。

使用しない場合

• Figma をソースとするトークンの抽出 → Figma MCP（figma-official-skills）または figma-variables-tokens-generator を使用します
• トークンファイルではなく DESIGN.md の仕様書が必要な場合 → extract-design-md を使用します
• ゼロからトークンアーキテクチャを構築する場合 → design-tokens-skill を使用します