Claude Codeで作るWebサイトやUIが「どれも同じAIっぽい見た目」になってしまう問題は、2026年に入って一気に解決策が揃ってきた。Anthropic公式のfrontend-designスキル、design.md／DESIGN.mdによる設計ブリーフの明文化、そしてコミュニティ発のtaste-skillやSuperdesignなど、「AIに良いデザイン感覚を持たせる」ための道具が続々登場している。今日はClaude Codeやその周辺ツールで“おしゃれに”作るための最新の技をまとめる。
なぜ「AIっぽいデザイン」になるのか
AIにUIを作らせると、暖色系のクリーム背景＋セリフ見出し＋テラコッタのアクセント、あるいはほぼ黒の背景に蛍光グリーンや朱色を挿すだけ、といった“お決まりの型”に収束しがちだ。Anthropicが公開しているfrontend-designスキルのSKILL.mdは、この現象を「AI slop（AIの量産品っぽさ）」として明確に名指しし、避けるべきパターンを3つ挙げている。
- 暖色クリーム背景（#F4F1EA）＋セリフ見出し＋テラコッタのアクセント
- ほぼ黒の背景＋蛍光グリーンまたは朱色のアクセント
- 新聞風の細い罫線と密な段組みレイアウト
このスキルは「ブレインストーム（配色・タイポグラフィ・レイアウト・シグネチャー要素をトークン化）→レビュー（ブリーフから見て“よくあるAI的デフォルト”になっていないか確認）→実装」という2段階のプロセスを踏むよう指示しており、配色は4〜6色の名前付きHEX値として定義し、タイポグラフィは見出しと本文で意図的に異なる書体を組み合わせることを推奨している。Claude Codeで/plugin marketplace add anthropics/skillsとしてから該当プラグインを入れれば、誰でもこのガイドラインを呼び出せる。
DESIGN.mdでブリーフを固定する
プロジェクトのビルド方法を書くAGENTS.mdと対をなす発想で、見た目のルールを書くDESIGN.mdという慣習が広がっている。色・タイポグラフィ・余白・コンポーネントのルールをMarkdownにまとめてリポジトリのルートに置くと、Claude Codeやv0、Lovable、Google Stitchといった複数のAIツールが同じ設計言語を読み取って生成に反映できる。VoltAgent/awesome-design-mdには実際のWebサイトから抽出したDESIGN.mdの実例が集められており、そのまま自分のプロジェクトにコピーして「このデザインに似せて作って」と指示するだけで、見た目の一貫性を保ったUIを再現できる。
| ファイル | 読み手 | 役割 |
|---|---|---|
AGENTS.md |
コーディングエージェント | プロジェクトの作り方（ビルド・テスト・規約） |
DESIGN.md |
デザインエージェント | 見た目・触感のルール（配色・タイポ・余白・コンポーネント） |
taste-skill：AIに“良い趣味”を後付けする
2026年前半にGitHubトレンドで急伸したのがtaste-skillだ。Claude Code・Cursor・Codexに「anti-slop（量産品っぽさ回避）」の判断基準を追加インストールできるポータブルなAgent Skill集で、レイアウト・タイポグラフィ・モーション・リズムの質を引き上げることを目的にしている。インストールはnpxコマンド一発。
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"現在のデフォルトはv2（実験版）で、既存の挙動に依存するプロジェクト向けにv1も並行して提供されている。参照用のイメージボードを作る画像生成スキルも同梱されており、コーディングエージェントに渡す前段のビジュアル方向性決めにも使える。
Superdesign：無限キャンバスでUIを作り、コードに橋渡しする
SuperdesignはClaude Code・Cursor・Windsurfの中から呼び出せるデザインエージェントのスキルで、「無限キャンバス」上でUIを生成・反復し、完成したデザインプロンプトをそのままコーディングエージェントに渡してコード化する、という一連の流れをエディタから出ずに完結できる。既存プロジェクトに導入すると、現在のUIを解析してsuperdesignフォルダにデザインシステムファイルとページのレプリカHTMLを自動生成し、以降の新規デザインをその上に積み上げる仕組みになっている。
| Superdesignスキル | Superdesign Webアプリ | 手作業 | |
|---|---|---|---|
| 動作環境 | コーディングエージェント内 | ブラウザ | デザインツール |
| セットアップ | CLI 1コマンド | 不要（ログインのみ） | ツールの習熟が必要 |
| コードへの引き渡し | デザインプロンプトを直接渡す | プロンプトをコピペ | 手動の仕様書・赤入れ |
インストールはnpm install -g @superdesign/cli@latestでCLIを入れ、superdesign loginで認証、npx skills add superdesigndev/superdesign-skillでスキルを追加するだけ。Claude Codeでは追加設定なしで/superdesign help me design a pricing pageのようにスラッシュコマンドとして使える。
shadcn/uiという“共通の土台”
frontend-designスキルやSuperdesignが生成するUIの多くは、コンポーネントの実装部分でshadcn/uiを土台にしている。shadcn/uiはインストールして使う従来のUIライブラリではなく、Radix UIとTailwind CSSで書かれたコンポーネントのコードをそのままプロジェクトにコピーする方式のため、Claude Codeがコンポーネントの内部構造まで読み書きでき、DESIGN.mdやtaste-skillで定義した配色・タイポグラフィをコンポーネント単位で書き換えやすい。この「コピーして所有する」設計が、AIエージェントによる細かなデザイン調整との相性の良さにつながっている。
公式プロダクト「Claude Design」との違い
紹介したスキル群はいずれもClaude Codeなどのコーディングエージェント上で動く“開発者向けの技”だが、Anthropicは2026年4月17日、Anthropic LabsからClaude Designという別プロダクトも発表している。Claude Opus 4.7を基盤に、プロトタイプやスライド、ワンページャーなどの視覚的な成果物を会話ベースで作成できるツールで、オンボーディング時にコードベースやデザインファイルを読み込んでチームのデザインシステムを自動構築し、以降のプロジェクトに一貫して適用する。完成したデザインはCanvaやPDF、PPTX、単体HTMLへ書き出せるほか、「Claude Codeへのハンドオフ」機能でデザイン意図を含めたバンドルをそのままコーディングエージェントに渡せる。エンジニアがエディタ内でスキルを積み重ねて作る前述の手法群と、デザイナーやPM向けの会話型ツールという、目的の異なる2つのアプローチが並走している点は覚えておきたい。
まとめ：組み合わせて使うのが近道
現状のベストプラクティスは、単一のツールに頼るのではなく重ねて使うことにある。DESIGN.mdでブリーフを固定し、frontend-designスキルやtaste-skillで「AI slop」を回避する判断基準を持たせ、Superdesignで反復しながらUIを固め、最終的にshadcn/uiのコンポーネントとしてコードに落とす、という流れだ。いずれも導入コストは低く、Claude Codeに数コマンド追加するだけで試せるので、まずは既存プロジェクトの1画面に対して試してみる価値がある。
主な情報源
- Anthropic「frontend-design」SKILL.md（anthropics/claude-code）
- anthropics/skills（公式Agent Skillsリポジトリ）
- VoltAgent/awesome-design-md（DESIGN.mdの実例集）
- Leonxlnx/taste-skill（Anti-Slop Frontend Framework）
- Superdesign Skill公式ページ
- Anthropic「Introducing Claude Design by Anthropic Labs」
- shadcn/ui 公式サイト
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。