Claude CodeやCursorに「かっこいいランディングページを作って」と頼むと、出てくるのはなぜかいつも同じような紫グラデーションのカードとガラス風エフェクト——通称「AIっぽさ(AI slop)」。この“量産型UI”から抜け出すための2026年時点の主要な武器を、公式スキルからサードパーティ製ツールまで横断的に整理する。
なぜAIは「無難で似たようなUI」しか作れないのか
LLMにフロントエンドを書かせると、紫〜青のグラデーション、意味もなく多用されるグラスモーフィズム、同じフォント(Space Grotesk等)への収束といった「AI slop」がしばしば発生する。原因は、モデルが学習データの中央値的な「無難なデザイン」に引き寄せられやすいこと。「モダンにして」のような曖昧な指示ではこの傾向は直らず、具体的な設計言語・制約・お手本を与えるスキル(SKILL.md)という形で問題を解こうとする動きが2025年後半から急速に広がった。
本命：Anthropic公式のfrontend-designスキル
Claude Codeには標準でfrontend-designプラグインが同梱されており、フロントエンド作業時にClaudeが自動的に参照する。中身は一枚の「SKILL.md」で、Claudeに次のような姿勢を取らせる。
- 自分を「テンプレート的な提案をすでに断られた小さなスタジオのデザインリード」だと想定させる
- コーディング前に「brainstorm→explore→plan→critique→build→critique」の順で設計思想を言語化させる
- 4〜6色の名前付きカラートークン、2種類以上のタイポグラフィ役割、ASCIIワイヤーフレーム、記憶に残る「signature要素」をあらかじめ計画させる
2026年に入ってからはコミュニティによる改善提案も相次ぎ、「同じフォントに収束させるな」といった曖昧な禁止事項が、より実行可能な指示へ書き換えられている。Cursor等の他エージェントでも同じSKILL.mdをそのまま利用できるのが強みだ。
対抗馬：Taste SkillとImpeccable
公式スキルだけでは物足りないと感じたコミュニティは、独自の「デザイン語彙」を持つスキルを作り始めている。代表格がTaste SkillとImpeccableだ。
Taste Skillはレイアウト・タイポグラフィ・モーション・余白について「良い/悪い」の具体例を持ち、AIエージェントに”taste”を移植することを狙う軽量スキル。2026年に大幅書き換えのv2(実験版)が公開され、旧挙動に依存するプロジェクト向けにv1も併存させている。
一方のImpeccableは、20前後のコマンド(/bolder /quieter /delight など)と7つの「デザインの柱」を持つ、より体系立った設計言語システム。ブラウザ上でリアルタイムにデザインを試せるライブ編集モードも備え、Claude Code・Cursor・Gemini CLI・Codexなど複数のエージェントに対応する。
3つのスキルの位置づけ比較
| スキル | 提供元 | 特徴 | 導入のしやすさ |
|---|---|---|---|
| frontend-design | Anthropic公式 | Claude Codeに標準同梱、設計思想の言語化を重視 | ◎(設定不要) |
| Taste Skill | コミュニティ(Leonxlnx) | 良い例/悪い例ベースで”taste”を移植、軽量 | ○(npx skills addで追加) |
| Impeccable | コミュニティ(pbakaus) | 20コマンド+7つの柱、ブラウザでライブ編集 | △(ZIP導入・学習コストやや高め) |
設計を「持続させる」ためのDESIGN.md
スキルが「その場でのデザイン判断」を助けるのに対し、DESIGN.md(Google Labsが提案するフォーマット仕様)はプロジェクト全体で一貫した「視覚的アイデンティティ」をエージェントに持たせるための器だ。YAMLフロントマターの機械可読なデザイントークンと、人間向けの説明文(なぜその色・書体を選んだか)を1つのMarkdownファイルにまとめる。
npx @google/design.md lint DESIGN.mdでトークン参照切れやWCAGコントラスト比の問題を検出npx @google/design.md diff DESIGN-v1.md DESIGN-v2.mdでトークンや説明文の差分(デザインの「退行」)を比較- W3C Design Token Format(DTCG)ベースなので、
tokens.jsonとしてエクスポートしてFigmaなど他ツールとも連携可能
frontend-designやTaste Skillが「初回の一枚をどう作るか」に強いのに対し、DESIGN.mdは「2回目以降のセッションでも同じトーンを保てるか」という継続性の課題に答える位置づけと言える。
仕上げの部品：shadcn/uiの新機能
設計思想が固まったら、実装はshadcn/uiのようなコピー&ペースト型コンポーネント基盤に任せるのが2026年の定番ワークフローだ。2026年7月にはReact AriaがBase UI・Radixと並ぶ第一級の「base」として追加され、pnpm dlx shadcn@latest init --base ariaやshadcn/createから選択できるようになった。既存プロジェクトのbaseは変わらず、Vega・Nova・Maia・Lyraなど8種類のスタイルすべてで利用できる。
また6月にはチャットUI向けコンポーネント(MessageScroller・Message・Bubble・Attachment・Marker)が第一弾として公開され、AIプロダクトのチャット画面をゼロから組む手間が大きく減った。
実践のコツ：プロンプト術としてまとめると
- 「モダンに」「かっこよく」ではなく、具体的な被写体・トーン・1つの「これぞ」という差別化要素を先に決めさせる(frontend-designの手法)
- 良い例・悪い例を見せて「taste」を移植する、あるいはコマンド化された語彙(Impeccableの
/bolder等)で微調整を指示する - 一度決めたトーンは
DESIGN.mdのようなファイルに固定し、次のセッションでも参照させる - 最終的な実装はshadcn/uiのような「所有できる」コンポーネント基盤に落とし込み、アクセシビリティ(React Aria)や既製パターン(チャットUI)を再利用する
主な情報源
- anthropics/skills — frontend-design SKILL.md(GitHub)
- anthropics/claude-code — Frontend Design Plugin README
- Leonxlnx/taste-skill(GitHub)
- Impeccable公式サイト / GitHubリポジトリ
- google-labs-code/design.md(GitHub)
- shadcn/ui Changelog — July 2026, React Aria
- shadcn/ui Changelog — June 2026, Chat Components
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。