インストール
npx skills add arvindrk/extract-design-system向いている人
公開サイトからデザイントークンを逆算し、ローカルプロジェクト向けに開始用 JSON と CSS カスタムプロパティを出したいときに、この Skill を入れる。公式の対象は colors、typography、spacing、border radius、shadows。AI agent skill（Claude、Cursor、Codex）または standalone CLI として使える。
starter tokens を早く欲しい人向けであり、コンポーネント庫一式向けではない。本文はこの3エージェントと独立 CLI を並べる。どれか1つ専用と読まない。対象サイトが公開到達できない、またはフレームワーク設定変更やアプリ自動改変を期待するなら、このスキルは合わない。
ページ： https://github.com/arvindrk/extract-design-system
3分で最初の試行を終える
このインストールコマンドだけ：
npx skills add arvindrk/extract-design-system
前提条件：ローカルプロジェクトがあり、「公開到達できる1ページ」からトークンを抜くつもり。公式が挙げたファイルへ書き込むことを受け入れる。出ていないディレクトリは指定しない。
最初は範囲照合だけ。すぐファイルを書かない。エージェントへ確認：抜けるトークン、生成ファイル、やらないこと。成功の合図は colors / typography / spacing / border radius / shadows を言い、.extract-design-system/raw.json、.extract-design-system/normalized.json、design-system/tokens.json、design-system/tokens.css を挙げ、Public websites only、Single-page extraction workflow、Starter tokens, not a full component library、No framework config patching or automatic app rewrites を復唱すること。
確認後、公式例で抽出させる： https://stripe.com and generate starter token files for this project。成功の合図は上記4ファイルが現れ、フレームワーク設定が変わっていないこと。ページは standalone CLI と書くが起動コマンドはない。捏造しない。
使用例
事例1：公式例で Stripe を抜く。原文は Extract the design system from https://stripe.com and generate starter token files for this project。ファイル書き込みと外網アクセス。実行前にプロジェクトディレクトリを確認。照合できるのはスタータートークンファイルであり、コンポーネント一式ではない。
事例2：別の公開単一ページでもスタータートークンだけ出す。公開で開ける1ページを渡し、トークンだけ抜き、アプリは変えないと求める。成功の合図は同じ4公式ファイルで、エージェントがフレームワークパッチを拒むこと。複数ページサイトを全クロールするとは仮定しない。本文は single-page。
利用の境界
公開サイトだけ。非公開、ログイン必須のページは範囲外。
一度に1ページ。産物は starter tokens であり、完全なコンポーネント庫ではない。
framework config patching も automatic app rewrites もしない。
出力パスは本文準拠。改名や未記載位置への保存はしない。
Claude、Cursor、Codex と standalone CLI は原文にある。独占対応と書かない。CLI の起動方法は未記載。発明しない。書いていないセレクタ、ログイン状態、一括ドメインは補わない。