デザインリファレンス
参照: $ARGUMENTS
1. 参照をキャプチャする
URL: 共有ツールキットで1440pxと375pxのスクリーンショットを撮り、シートを読み込みます：
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
--injectを使用して計算済みスタイルを取得するか、${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjsをインポートした一回限りのCDPスクリプト（launch()→navigate()→evaluate()）で取得します。body、h1–h3、p、a、button、プライマリCTA、カード、アイブロウ/キッカー、入力フィールド、フッターのgetComputedStyleをサンプリングします。font-family/font-size/font-weight/line-height/letter-spacing、color、background、border-radius、box-shadow、padding、gapを収集します。
貼り付けられたHTML / メール: /tmp/design-ref/ref.htmlに保存し、render-html.mjsでレンダリングしてインラインスタイルを直接読み取ります。
2. システムを抽出する
- カラーロール: キャンバス、サーフェス、インク、ミュートインク、アクセント、アクセントインク、ボーダー、成功/警告。各ロールのHEX値と、それが使用される場所を示します。
- タイポグラフィ: フォントファミリー（ライセンスフォントの場合は最も近い無料代替フォントも）、ピクセル値/行間/ウェイト/トラッキングを含むスケールステップ、およびケース設定（アイブロウは大文字＋トラッキング？）。
- スペーシング: 実際に使用されているリズム（例：8/16/24/40/64）、セクションパディング、カードパディング。
- シェイプ: 要素クラスごとの角丸、シャドウレシピ、ボーダーの太さ。
- コンポーネント構造: ボタン（高さ、パディング、角丸、ウェイト、アイコン）、カード、アイブロウ、ヒーロー構成。
- トーン: 3つの形容詞と、コピーが何をしているか（短い文章？二人称？数字？）。
3. プロジェクトにマッピングする（フォークしない）
プロジェクトのトークン（app/globals.cssの@theme/:root、tailwind.config、またはテーマファイル）と既存のコンポーネントを読み取ります。以下を生成します：
| ロール | 参照 | 現在のプロジェクトトークン | 提案 |
|---|---|---|---|
| accent | #FF5A1F | --color-brand #… | 維持 / 再調整 / 新規（理由を記載） |
ルール:
- 新しいトークンを追加する前に、既存トークンを再調整します。新しいトークンごとに1行の理由が必要です。
- ブランド固定の項目は変更しません：ロゴ、プロジェクトに既存のブランドカラー、すでにライセンスまたは使用中のフォント。
- すべての提案について、アクセントオンキャンバスとインクオンサーフェスのコントラストを確認します（テキスト≥4.5:1、UI≥3:1）。
- プロジェクトがコードと同期しているFigmaファイルを保持している場合、トークンの変更は同じタスク内でFigmaにも反映します。
終了条件
- 各行が「維持」「再調整」「新規」のいずれかにマークされたトークンテーブルが完成している。
- 提案されたペアのコントラストが確認されている。
- まだコードは変更されていない。コード変更は
design-passで、ユーザーがテーブルに同意した後に行う。 - テーブルの下に1文の要約がユーザーに提示されている。