最近、CursorやClaudeを傍らに置いてプロトタイプや簡単なランディングページを組むたびに、ある種の「既視感」に襲われることが増えた。
プロンプトを投げれば、ものの数秒でレスポンシブなWebページが組み上がる。エラーもない。機能要件は完全に満たしている。だが、ブラウザにレンダリングされたその画面は、決まって「Interフォント」で描かれ、アクションを促すボタンは「無難なブルー」、背景にはなぜか「紫からピンクへ抜けるグラデーション」が敷かれ、角丸の大きなカードが並んでいる。ご丁寧に、見出しの横には絵文字が添えられ、実在しない人物の「最高です！」というダミーの証言ブロックまでついている。
技術的には極めて正しい。しかし、視覚的にはひどく退屈で、いかにも「AIが作りました」という無味乾燥な手癖に溢れているのだ。LLMは優秀なコーダーではあるが、デザインの引き出しは巨大な学習データの「平均値」に収束してしまう傾向がある。
この「機能的（Functional）だが、魅力的（Stunning）ではない」という現代のフロントエンド開発特有のジレンマに対し、非常にエレガントなアプローチを見つけた。それが、AIエージェントの振る舞いそのものを矯正する「web-design-skill」だ。
AIの「手癖」を禁止するアンチ・クリシェ
誤解のないように言っておくと、これは新しいCSSフレームワークでも、気の利いたUIコンポーネント集でもない。CursorやClaude Codeといった自律型AIエージェントに読み込ませるための、約400行の構造化されたシステムプロンプト（SKILL.md）である。
your-project/
└── .agents/skills/web-design-engineer/
├── SKILL.md # メインのスキルファイル
└── references/
└── advanced-patterns.md # コードテンプレート集Anthropicの「Claude Design」の設計思想にインスパイアされたこのスキルは、プロジェクトの所定のディレクトリに配置するだけで、AIがフロントエンドのコードを書く際の「センス（Taste）」を根本から上書きする。
その核心は、「何をすべきか」と同じくらい「何をしてはいけないか」を徹底的に定義している点にある。スキル内には「Anti-cliché rules（お決まりのパターンの禁止）」という項目があり、先述したような紫・ピンクのグラデーションや、Inter・Robotoといった使い古されたフォント、アイコン代わりの絵文字、架空のロゴの羅列などを明確なブロックリストとして指定している。
代わりに、人間の視覚的知覚に合致した「oklch色空間」でのカラー選定や、厳選されたフォントペアリングを強制する。下手なSVGアイコンを生成してレイアウトを崩すくらいなら、潔く [icon] というプレースホルダー（目印）を置け、と指示している点などは、現場の痛みをよく分かっているエンジニアの知恵だと言える。
いきなりコードを書かせないという制約
もうひとつ、このスキルが優れているのは「ワークフローの設計」だ。
通常のプロンプトでは、AIは要件を聞いた瞬間にHTMLとCSSを全速力で吐き出し始める。しかし、このスキルを読み込んだエージェントは、いきなりコードを書かない。6つのステップからなる厳格なプロセスに沿って、まずは色、タイポグラフィ、余白、モーションのルールといった「デザインシステム」をMarkdownで宣言させられるのだ。
自身の選択を言語化し、プログラマティックな指針を定めてから、プレースホルダーを含んだ初期ドラフト（v0）を作り、ユーザーの軌道修正を挟んでフルビルドへと進む。これは、優れたシニアデザイナーやフロントエンドエンジニアが頭の中で組み立てている論理的なプロセスそのものである。
AIに魔法のようなデザインを期待して「かっこよくして」と曖昧な指示を投げる時代は終わった。良質なアウトプットを引き出すには、良質な「制約」という名のコンテキストを与えなければならない。優れたデザインとは結局のところ、無数の選択肢の中から「何をしないか」を選ぶことなのだ。
参考リポジトリ: ConardLi/web-design-skill