extract-design-system

デザインシステムを抽出する

ユーザーが公開ウェブサイトのデザインプリミティブをリバースエンジニアリングし、プロジェクト内のスタータートークンファイルにまとめたい場合に、このスキルを使用します。

開始前

以下を確認します。

• 対象となる公開ウェブサイトの URL
• 抽出のみを希望するか、スターターファイルも希望するか

あらかじめ、次の点を説明します。

• この v1 ではトークンとスターターアセットを抽出しますが、完全なコンポーネントライブラリは作成しません
• 結果は初期化には役立ちますが、ピクセル単位での完全な再現には向いていません
• 確認なしに、既存のデザインシステムやアプリのスタイルを上書きしません

ワークフロー

1. 対象の URL が公開されており、アクセス可能であることを確認します。
2. 次を実行します。

npx playwright install chromium
npx extract-design-system <url>

3. .extract-design-system/normalized.json を確認し、次の項目を要約します。

• 主色、副色、アクセントカラーと思われる色
• 検出されたフォント
• 検出されている場合は、スペーシング、角丸、シャドウのスケール

4. ユーザーが抽出成果物のみを希望する場合は、次を使用します。

npx extract-design-system <url> --extract-only

5. ユーザーがすでに .extract-design-system/normalized.json を持っており、スタータートークンファイルの再生成のみを希望する場合は、次を実行します。

npx extract-design-system init

6. 生成される出力を説明します。

• .extract-design-system/raw.json
• .extract-design-system/normalized.json
• design-system/tokens.json
• design-system/tokens.css

7. 既存のアプリコード、スタイル、設定ファイルを変更する前に、ユーザーに確認します。

安全上の制約

• サイトが動的または部分的な場合、抽出したシステムが完全であると断言しません。
• 明確に抽出されていないコンポーネントやセマンティックトークンを推測しません。
• レビューなしに、抽出結果を確定事項として扱いません。
• 第三者のウェブサイトのコンテンツを根拠に、別途確認を得ずにコードや設定を広範囲に変更しません。
• 明示的な確認なしに、生成された出力ファイル以外のプロジェクトファイルを変更しません。
• 単一ページを、製品全体のデザインシステムを示す証拠として扱いません。