design-system-analyzer

デザインシステムアナライザー

ChromeDevTools を通じてウェブサイトを分析し、詳細な CSS ロジック（キーフレーム、トランジション、トークン）を抽出して、包括的なデザインシステム用システムプロンプトを生成します。

重要なルール

1. 最終プロンプトは、references/design-system-template.md の構造と完全に同じ形式で出力する必要があります。
2. コンテキストがあふれないよう、抽出データを制限する必要があります（上限については analysis-guide.md を参照）。
3. テンプレートのプレースホルダーをすべて、抽出または観察した値で埋める必要があります。
4. セクションを省略してはなりません。データがない場合は「未観察」と記載してください。

ベストプラクティス：自分の Chrome を使う

最高の使用感を得るために（CAPTCHA が表示されず、ログイン Cookie を共有できるように）、次のコマンドで Chrome を実行するようユーザーに案内してください。 chrome.exe --remote-debugging-port=9222 （詳細は references/setup-guide.md を参照してください）

---

ワークフローの概要

[1. Navigate] → [2. Anti-Bot Check] → [3. Deep Extraction] → [4. Synthesize to Template]

重要：スクリーンショットを撮らないでください。スクリーンショットはコンテキストを過剰に消費するうえ、不要です。視覚的なデータはすべて CSS から抽出します。

---

ステップ 1：移動とボット対策チェック

mcp__chrome-devtools__navigate_page (url: "<target-url>")

ボット対策のチャレンジがないか、すぐに確認してください。

() => {
  const text = document.body.innerText.toLowerCase();
  const title = document.title.toLowerCase();
  if (text.includes('cloudflare') || text.includes('verify you are human') || title.includes('just a moment')) {
    return 'CHALLENGE_DETECTED';
  }
  return 'OK';
}

CHALLENGE_DETECTED の場合：

1. すべての操作を一時停止します。
2. ユーザーに次のように伝えます：「ボット保護が検出されました。ブラウザーで CAPTCHA を手動で解決してから、ここで確認してください。」
3. 続行する前にユーザーの確認を待ちます。

---

ステップ 2：CSS を詳細に抽出

references/analysis-guide.md の抽出スクリプトを順番どおりに実行します。

順序	スクリプト	目的	最大項目数
1	CSS 変数とトークン	色、余白、タイポグラフィの変数	50 トークン
2	アニメーションとキーフレーム	@keyframes、アニメーションの使用状況、トランジション	10 KF、15 トランジション
3	インタラクション状態	:hover、:focus、:active のルール	15 ルール
4	タイポグラフィ	主要な要素のフォントスタック	7 要素
5	レイアウトと余白	角丸、間隔、シャドウ	各 5 項目
6	技術スタック	フレームワークの検出	-

重要：各スクリプトには上限が組み込まれています。より多くのデータを抽出するために変更しないでください。

---

ステップ 3：テンプレートに統合

必須：references/design-system-template.md のテンプレート構造と完全に同じ形式で出力を生成します。

テンプレート対応表

抽出データ	テンプレートのセクション	備考
tokens.colors	Design Token System > Colors	表形式にする
tokens.spacing	Spacing, Radius & Borders	角丸の値を含める
tokens.typography	Typography	フォントスタックを含める
タイポグラフィのスクリプト	Typography > Font Stacks, Type Scale	計算済みスタイル
keyframes	Animation & Motion > Key Animations	キーフレーム定義の全体
animationUsage	Animation & Motion > Timing	継続時間、イージング
transitions	Animation & Motion > Timing	一般的なパターン
interactions	Component Styling > State Transitions	ホバー／フォーカスの効果
レイアウトサンプラー	Layout Principles	余白のシステム
技術スタック	Implementation Notes	Tailwind／CSS に関する注意事項

出力形式チェックリスト

出力する前に、以下のセクションがすべてあることを確認します。

• <role> ブロック（テンプレートからそのままコピー）
• <design-system> ラッパー
• コア原則、雰囲気、歴史的背景を含む ## Design Philosophy
• 色の表、タイポグラフィ、余白を含む ## Design Token System
• ボタン、カード、フォーム入力欄を含む ## Component Styling Principles
• 余白のシステム、グリッド、レスポンシブを含む ## Layout Principles
• 必須要素 3 項目を含む ## The "Signature" Factor
• 原則、タイミング、主要なアニメーションを含む ## Animation & Motion
• ## Accessibility Constraints
• 視覚面とインタラクション面の禁止事項を含む ## Anti-Patterns
• 技術固有のガイダンスを含む ## Implementation Notes
• 検証項目 4 項目を含む ## Aesthetic Checklist
• 終端の </design-system>

リソース

• references/design-system-template.md：必須の出力テンプレート
• references/analysis-guide.md：コンテキスト制限付きの詳細な抽出スクリプト
• references/setup-guide.md：ユーザーの Chrome を再利用するためのガイド