スキル：画像からコードへ
視覚的なリファレンスから、単発のコピーではなく、真のデザインシステムとして設計を再構築します。システム（カラー/タイポグラフィ/スペーシングの言語）に合わせてください。決して著作権のある画像やブランド資産を流用しないでください。
ステップ
- リファレンスをデザイナーのように読み込む。 以下を推測して書き留めます。
- パレット — 1つの主要サーフェスファミリー、テキストカラー、1つの主要アクション + 最大1つのアクセント（色相をサンプリングし、ランダムなhexを推測しないこと）。
- タイポグラフィ — ファミリーの雰囲気（ジオメトリック/グロテスク/セリフ）、スケールの跳び方、ディスプレイ対ボディのコントラスト、ウェイト。
- スペーシングと密度 — 基本単位、セクションのリズム、カードのパディング；空気感があるかコンパクトか。
- 角丸と奥行き — 角丸の言語（シャープ/ソフト/ピル）、シャドウ対ヘアラインによる区切り。
- レイアウトアーキタイプと順序 — フルブリードヒーロー / 非対称スプリット / ベントー / エディトリアルスタック（
taste/design-taste.md→ バリアンス必須）。
- 既知のシステムにアンカーする 類似している場合 —
taste/aesthetic-systems.md/python3 scripts/design_systems.py search <term>を参照し、そのレシピを採用して判断を安定させます。 - 推測した値からトークンテーマを構築する → 3層DTCG（
design-tokensスキル）；単一のtheme.cssを生成します。すべてのカラーペアをscripts/contrast.py/scripts/validate_contrast.py（ライト＋ダーク）で検証 — サンプリングしたブランドカラーがAAに失敗した場合は調整；テイストがPOURを優先することはありません。 - トークン駆動でレイアウト＋コンポーネントを再構築する
frameworks/adapter-protocol.md+components/*経由：1つの共有プリミティブレイヤー、全8状態、a11y配線済み、絵文字なし（lucide）、単一テーマ。design-taste.mdを適用して、汎用的なものに後退しないようにします。 - リファレンスに対して検証する — レンダリングしてスクリーンショットを撮り、リファレンスと並べて比較；
node scripts/measure_render.mjs、lint_hardcodes.py、taste_audit.mjs、npm run verifyを実行します。
検証（完了条件）
npm run verifyが100%合格（トークンが解決、コントラストAAライト＋ダーク、ハードコード/絵文字なし、実レンダリングWCAG準拠）。- 再構築されたUIは1つの推測されたトークンテーマを使用 — セクションごとのパレットはありません。
- 結果のスクリーンショットが、リファレンスのデザイン言語と視覚的に一致していること。
正直な限界：これはデザインシステムに一致させるものであり、ピクセルパーフェクトなコピーではありません。リファレンスの写真、ロゴ、著作権のあるコピーを再現しないでください — 代わりに独自のものか汎用的なプレースホルダーを使用してください。