任意のURLを渡すと、そのサイトのデザインを解析してAIエージェント向けの「デザイン文脈」に変換する Claude Code / Gemini CLI 用スキル。出力は Design Map、Taste DNA、そして個々の選択の理由まで。
出発点は「トークンだけでは足りない」という主張だ。背景色 #08090A、フォント Inter、角丸 6px——こうした値の羅列は spec sheet であって taste ではない。taste とは decisions × trade-offs、つまり「なぜこの near-black を純黒ではなく選んだのか」という意思決定と、「何を選び、何を意図的に捨てたか」という両側のトレードオフを指す。トークンしか持たないエージェントは数値を意味も分からず模倣するが、taste を持つエージェントは初見のページでも妥当な判断を下せる、という発想。
処理は4段階のパイプラインで、各段に役割の異なるエージェントを当てる。
- 01 Extract — 20カテゴリの計測。色・ウェイト・余白・角丸・影をすべて px / hex / 比率で根拠付き抽出。近似なし。
- 02 Detect — 5〜8個のシステムレベルのルールを検出。各ルールに Evidence と Design Goal を添える。
- 03 Infer — 4つの taste 原則を導出。それぞれ Trigger / Decision / Reason / Evidence / Trade-off を持ち、最低1つは「やらないこと」を定めた Restraint 原則。
- 04 Observe — 品質ゲート。anti-slop grep をかけ JSON を検証してから最終出力する。
成果物は {domain}.md と {domain}.json の2ファイル。Playwright MCP で実ブラウザからページを読み、Cursor・Windsurf・Claude Code・GitHub Copilot・v0・Figma Make など各ツールの形式に合わせて1ファイル追記するだけで、エージェントが次の実行から拾う。
