【Claude Code】「AIっぽさ」を消すプロンプト・デザインシステム設計

「Claude Code などで画面を作ると、毎回同じグラデーションと角丸カードが出てきて、一目で”AIが作った”と分かってしまう」——バイブコーディングでUIを量産している人ほど、この壁にぶつかりがちです。

原因はプロンプトの語彙不足ではなく、AIが学習データの”平均値”に収束する性質と、Tailwind や shadcn/ui の既定値をそのまま使っていることにあります。

この記事では、AI生成UIが「ダサく」見える7つの兆候をチェックリスト化したうえで、プロンプトの書き換え・デザイントークンの事前定義・Claude Code スキル・Claude Design のデザインシステム取り込みという4つの改善方法を設定例つきで解説します。

【Stable Diffusion】今なら約2時間、無料で使い放題！

無料会員登録で2,000Pt(約2時間分)貰える！

Stable Diffusionを基盤とした画像生成AI「PICSOROBAN」がリリース！ インストールやプログラミングの知識は一切不要で、Webブラウザから簡単に利用できます。

使い方をみる今すぐ使う

改善ポイントは「方向づけ → 生成 → 検出 → ゲート」の4段階

必要なのは、何を作るかを先に決める→ その制約の中で生成する → 既定値に戻っていないか機械的に検出する → 戻ったら通さないという流れです。

ポイントは①を飛ばさないことです。②〜④は「既定値を消す」ことはできても「何を代わりに出すか」は決められません。方向づけなしで検出だけ回すと、無難で正しいが記憶に残らないページになります。

「AIっぽいUI」診断チェックリスト

自分の画面を次の表と照らし合わせてください。

第1波は「誰が見てもAI製と分かる」兆候、第2波は「AIっぽさを消そうとした結果はまる」兆候です。

第1波：誰でも気づく7つの兆候

第7項は見た目の問題ではありませんが、信頼を損なう度合いはもっとも大きい項目です。デザインの方向性を与えても、数字の捏造は視覚ルールでは止まりません。

第2波：「AIっぽくしないで」の後に来る5つの兆候

Anthropic公式frontend-designスキル（2026年9月更新）が名指ししている5クラスタです。

同スキルはさらに、見出しの1語だけを斜体・太字・別色で強調する／ラベルを全部大文字にする／内容の上に不要なラベルを置く、の3つを「生成ページのもっとも一般的な兆候」としています。「01 / 02 / 03」の番号付きマーカーも、内容が本当に順序を持つとき以外は既定値だとしています。

【図版】チェックリストの各項目を、1枚のサンプル画面上に番号付きで示した図（第1波を赤、第2波を橙で色分け）

① プロンプトを「形容詞」から「制約」に変える

もっとも手軽で、もっとも効果が薄いのがプロンプトの改善です。それでも最初にやる価値があるのは、ここで「何を指示すれば変わり、何を指示しても変わらないか」が体感できるからです。

「モダン」「クリーン」はモデルにとって最頻値を出せという指示と同じです。この指示でほぼ確実に、ダーク背景＋紫〜シアンのグラデーション＋角丸カードの統計パネルが返ってきます。

変わる点は以下の4つです。

• 主題（誰が何のために3秒で何を判断するか）を書いたので、モデルはLPの型ではなく運用画面の型を選びます。
• 制約を数値で書いたので「クリーン」の解釈がぶれません。
• 禁止を名指ししたので第1波を避けます。
• 参照で密度と色の使い方を具体化しました。

禁止だけ増やすと第2波に落ちる

このプロンプトから「方向づけ」を消して「禁止」だけ残すと、高確率でクリーム背景＋テラコッタ、または黒背景＋アシッドグリーンの画面が返ってきます。禁止リストは「何を出さないか」しか言っていないので、空いた枠にモデルは次の既定値を入れます。禁止と同じ分量だけ、方向づけを書くのがコツです。

ただし、どれだけ丁寧に書いてもプロンプトはそのセッションでしか効きません。翌日、別の画面を頼むと最初に戻ります。次の②でこれをファイルに固定します。

あわせて読みたい

【2026年10月最新】everything-claude-codeとは？Claude Code最強プラグインを「入れるべき機能」だけ厳… 「GitHubで話題のeverything-claude-codeを入れてみたけど、エージェントもスキルもコマンドも多すぎて、結局何を使えばいいのか分からない」——Claude Codeを使い込んで…

② デザイントークンを先に定義する

AIにUIを作らせるときにもっとも効くのは、「色・書体・余白・角丸の選択肢を、こちらが先に用意してしまう」ことです。

図：トークンを「文章（DESIGN.md）」と「コード（@theme）」の両方で持ち、エージェントにはCLAUDE.mdから参照させる。検出ツールはDESIGN.mdと生成物の差分を見る。

css
/* src/app.css */
@import "tailwindcss";

@theme {
  /* Tailwind既定のカラーパレット（indigo, violet, ...）を丸ごと無効化 */
  --color-*: initial;

  /* 色：意味を持つものだけ */
  --color-white: #ffffff;
  --color-surface: #f4f6f8;
  --color-ink: #1a2129;
  --color-line: #d5dbe1;
  --color-util-low: #6b8aa6;
  --color-util-mid: #d39b2f;
  --color-util-high: #c2413a;

  /* 書体：1系統 */
  --font-sans: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;

  /* 角丸：既定を消して1段階だけ */
  --radius-*: initial;
  --radius-sm: 4px;

  /* 余白の基準単位。DESIGN.mdで 1/2/4/6/12 倍だけ使うと決める */
  --spacing: 4px;
}

markdown
# DESIGN.md — GPU利用状況ダッシュボード

## 主題
インフラ運用チームが1日に何度も開き、「どのノードが空いているか」を3秒で判断する画面。
ヒーロー・キャッチコピー・マーケティング要素は存在しない。

## 色
- surface #f4f6f8 / ink #1a2129 / line #d5dbe1 — UIの枠はこの3色のみ
- util-low #6b8aa6 / util-mid #d39b2f / util-high #c2413a — 使用率にのみ使う
- グラデーション、半透明、グロー、装飾背景は使わない

## 書体
- IBM Plex Sans JP 1系統。見出しはウェイト600、本文400
- 数値はすべて tabular-nums。本文16px、補助ラベルは最小13px

## 形と余白
- 角丸は4pxのみ。影は使わず1pxのlineで区切る
- 余白は 4 / 8 / 16 / 24 / 48px。関連する項目は近く、別グループは48px空ける
- カードの入れ子、左端の色ストライプ、見出し上のアイコンタイルは使わない

## 動き
- ページロード時のアニメーションはなし。ユーザー操作への応答（展開・確定）のみ150ms以内で

markdown
## UI実装のルール
- 新しい画面・コンポーネントを作る前に、必ず `DESIGN.md` を読むこと
- 色・書体・角丸・余白は `src/app.css` の @theme で定義済みのトークンだけを使う。任意の16進数やTailwind既定パレットを直接書かない
- DESIGN.mdにない表現が必要になったら、実装せずに提案として提示し、承認後にDESIGN.mdを先に更新する
- 実装後、`npx impeccable detect src/` を実行し、違反ゼロを確認してから完了報告する

これで、セッションをまたいでも同じトークンから生成されます。

avoid-ai-designのデモでは、DESIGN.mdなしでFAQページを追加生成した途端にインディゴのグラデーションとInterに戻る様子が示されており、「ページが2枚以上あるならDESIGN.mdは必須」と考えてよいでしょう。

③ Claude Codeスキルで「デザイン判断」を自動化する

②でトークンを固定しても、「ヒーローに何を置くか」「どこに余白を多く取るか」といった判断までは縛れません。そこを補うのがスキルです。スキルはライブラリではなく、SKILL.mdに書かれた行動指針で、エージェントがUIを書くときの前提に常駐します。

2026年11月時点で、まず検討すべきは次の3つです。

まずはAnthropic公式「frontend-design」

公式スキルの中身は数百行のMarkdownですが、要点は3つです。

1. 主題から設計する：「ブリーフにプロダクトが書かれていなければ、自分で特定して確認せよ」「業界・素材・語彙から独自の視覚的選択が生まれる」
2. 2パスで作る：まず色4〜6色・書体・レイアウト・原則のトークン計画を書き、「似たブリーフで同じ結果になるなら既定値」と自己レビューしてから実装する
3. 既定値の名指し：前述の第2波5クラスタと、典型的なタイポグラフィの兆候

導入は~/.claude/skills/に置くだけです。

git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropic-skills
mkdir -p ~/.claude/skills
cp -r /tmp/anthropic-skills/skills/frontend-design ~/.claude/skills/

Claude Codeを再起動（または/reload-plugins相当の再読み込み）すると、UI関連の依頼時に自動で参照されます。プロジェクト限定にしたい場合は.claude/skills/frontend-design/に置きます。

Impeccable（pbakaus/impeccable）：検出ルールで”戻り”を止める

Impeccableは、jQuery UIの開発者として知られ、Googleでデベロッパーアドボケイトを務めたPaul Bakaus氏が開発するOSSで、GitHubではpbakaus/impeccableとして公開されています。自身を「エージェントに欠けているデザインの語彙」と位置づけ、この分野で最も普及したツールの1つです。

特徴は、デザイン判断と検出を分けていることです。62件の検出ルールのうち「AI slop」カテゴリには、紫グラデーション、Inter一択、片側ストライプ付きカード、角丸要素への太い色ボーダー、放射状の光、グラデーションテキスト、クリーム／ベージュ既定パレット、脈打つステータスドット、自動スクロールのマーキー、「supercharge」等の汎用コピー、さらにはem dashの多用まで含まれます。

# インストール（Claude Code / Cursor / Codex / Gemini CLIを自動判別）
npx impeccable install

DESIGN.mdがあると、そこに書かれていないフォント・色・文字サイズ・角丸を「デザインシステム外」として検出します。②で作ったDESIGN.mdがそのまま効きます。

Hallmark：参考サイトから「DNA」を抜き出す

Hallmarkで独特なのはstudyです。気に入ったサイトのURLやスクリーンショットから、レイアウト構造・書体ペア・色のアンカーを抽出してdesign.mdに書き出します。ピクセル単位のコピーや有料テンプレートの複製は拒否する設計です。

npx skills add nutlope/hallmark

ポイント：Hallmarkは2026年前半に急速にスターを集めましたが、更新頻度は他のツールより落ち着いています。導入前にリポジトリの最終コミット日を確認してください。

自社ルールを最小のSKILL.mdにする

既製スキルが大きすぎる、または自社の表現を足したい場合は、数十行の自作スキルで十分効きます。②のDESIGN.mdと重複させず、「判断のしかた」だけを書くのがコツです。

---
name: our-ui-judgement
description: 自社プロダクトのUIを新規作成・改修するときの判断基準。画面・コンポーネント・ページの実装依頼で必ず使う。
---

# UI判断基準

## 作る前に
1. DESIGN.md を読み、主題（誰が・何を・何秒で）を1行で言い直してから着手する
2. 「この画面で一番大事な1要素」を決め、それ以外は静かにする
3. レイアウト案をASCIIワイヤーフレームで示し、承認を得てから実装する

## 作りながら
- 新しい色・書体・角丸・影が必要になったら、実装せず提案する
- カードを使う前に「表・リスト・区切り線で済まないか」を検討する
- アニメーションはユーザー操作への応答のみ。ロード時の演出は入れない
- コピーは「ユーザーが何をできるか」を動詞で書く。数値は出典がなければ入れない

## 作ったあと
- `npx impeccable detect src/` を実行し、結果を報告に含める
- 第2波チェック：クリーム＋テラコッタ、黒＋ネオン1色、新聞風罫線、全見出しの大文字アイブロウになっていないか自己確認する

あわせて読みたい

Claude Codeのハーネス設計 ―― 3層構造で読み解く、LLMを「動くエージェント」に変える足場の正体 LLMをベースとした実用レベルの「動くエージェント」に変換するには、モデル本体とは別にハーネスと呼ばれる足場が必要です。 システムプロンプト、ツールセット、セッ…

④ Claude Designにデザインシステムを取り込む

Claude Designは、自然言語からプロトタイプやビジュアルを作るAnthropicのツールです。2026年6月のアップデートで、デザインシステムのインポートとClaude Codeとの同期が入り、「AIっぽさ」対策の文脈で使えるようになりました。

Claude Code側の/design-syncコマンドで、ローカルのコードベースにある実際のデザインコンポーネントをClaude Designに取り込むことができます。

GitHubリポジトリ、デザインファイル、直接アップロードから、1つまたは複数のデザインシステムを取り込めます。

対策としての使い方

②で作った@themeとコンポーネント群を持つリポジトリを取り込むと、Claude Designはそのトークンとコンポーネントの範囲で描きます。これは③の検出とは逆方向のアプローチで、出力の前に制約するため、検出→修正のループが短くなります。

おすすめの流れは次のとおりです。

1. Claude Codeへハンドオフして実装し、③のdetectをかける
2. Claude Codeで②のトークンと基本コンポーネントを作り、DESIGN.mdとともにコミットする
3. /design-syncでClaude Designに取り込む
4. Claude Designで新しい画面のプロトタイプを作り、取り込んだシステムに照合された状態で確認する

ポイント：Anthropic自身が「デザインシステムのインポートはソースの質に依存する」と注記しています。トークンが散らかったコードベースや不完全なファイルを取り込むと、その散らかりがそのまま出力に現れてしまうので注意しましょう。

Before / After：同じ要件でどう変わるか

活版印刷の名刺オーダーページを、(A) 形容詞プロンプトのみ、(B) ①〜③を適用、の2条件で生成して比べます。

条件は次のとおりです。

• (A)：「活版印刷の名刺オーダーページを作って。モダンでクリーンなデザインにして。」のみ
• (B)：利用者と目的（活版が初めての個人事業主が5分以内に注文を確定する）を主題として与え、DESIGN.md・@theme・CLAUDE.md・frontend-design・Impeccableを導入した状態で生成

(A)：活版印刷の名刺オーダーページを作って。モダンでクリーンなデザインにして。」のみ

形容詞だけの(A)でも、ヒーローや特長カード、お客様の声は出ませんでした。

2026年11月時点のモデルは、第1波の兆候をかなり避けるようになっています。その代わりに現れたのが、要件にない英語サブタイトル・補足説明・単価表示・発送予定日といった「気を利かせた追加」です。1つ1つは親切に見えますが、どれも「このプロダクトのために誰かが選んだ」ものではなく、活版印刷の注文ページという題材から連想される最頻値です。

同じ名刺オーダーページでも、方向づけの有無で「宣伝の画面」と「注文の画面」に分かれます

(B)：利用者と目的（活版が初めての個人事業主が5分以内に注文を確定する）

(B)が優れているのは派手さではなく、「選びながら確かめる」という主題が画面の構造に表れている点紙や活字といった素材を装飾ではなく、プレビューという機能に使うと、既定値に戻る余地がなくなります。

紙やインクの選択肢に色見本を付けていないのは、「紙色とインク色はプレビュー内だけ」という自分のルールを守った結果で、色を見ながら選びたい人には不親切です。

ルールと使いやすさのトレードオフであり、必要ならDESIGN.mdに「選択肢の色見本は例外」と書き足してから実装する、という順序になります。

あわせて読みたい

Claude Codeの料金を賢く抑える、モデル振り分け・キャッシュ設計の裏技5選 Claudeを使ったシステムやワークフローが増えるほど気になってくるのが、APIコストです。 同じ成果を出すにも、トークンの使い方次第で料金は数倍変わることがあります...

Claude CodeのDESIGNに関する質問

Q. グラデーションやセリフ体を使うのは、もう避けるべきですか？

いいえ。どのツールも「兆候は誰も選んでいない既定値の証拠であって、禁止技法ではない」と明記しています。ブランドが紫を持っているなら紫のグラデーションは正解です。大事なのは選んだことをDESIGN.mdに書き、検出の除外指定で「意図した選択」と印をつけることです。

v0やLovableでも同じ対策は効きますか？

①の「主題＋制約＋禁止＋参照」プロンプトと、②のトークン事前定義は、どのツールでも効きます。③のスキルとhooks、④の/design-syncはClaude Code／Claude Design固有です。v0・Lovableはツール自体に特徴的な既定スタイルがあるため、②でトークンを上書きする効果が特に大きい印象です。

デザイナーがいないチームでも「方向づけ」は書けますか？

書けます。方向づけの材料は美的センスではなく、「誰が・何を・何秒で判断するか」と「プロダクトの素材」です。名刺ページなら紙・インク・活字、業務システムなら帳票の構造が出発点になります。公式frontend-designスキルも「ブリーフに主題がなければ自分で特定して確認せよ」とエージェントに指示しており、その提案を叩き台にできます。

あわせて読みたい

Stable Diffusion WebUI Forge Neoとは？インストール手順・使い方をForge Classicとの違いも交えて解説！ Stable Diffusion WebUI Forgeの開発が一段落した後を引き継ぐ形で登場した「Forge Neo」。 Flux・Qwen-Imageなど最新モデルに対応しつつ、軽量・高速な動作を実現した...

Claude Codeを使いこなして、定番のUIから抜け出そう！

AIが作るUIが「ダサい」のは、モデルが学習データの最頻値を出し、誰もそれを選び直していないからです。禁止だけでは次の既定値（クリーム＋テラコッタなど）に逃げるため、対策は4段階で組みます。

• 方向づけ：主題からトークンを導き、DESIGN.mdと@themeに書く（改善方法①②）
• 生成：Anthropic公式frontend-designスキルで「計画→自己レビュー→実装」させる（改善方法③）
• 検出：Impeccable（pbakaus/impeccable）のdetectとhooksで既定値への"戻り"を機械的に見つける（改善方法③・運用）
• ゲート：CIでdetectを回し、Claude Designにはデザインシステムを取り込んで出力前に制約する（改善方法④・運用）

最初の一歩は、今あるプロジェクトにDESIGN.mdを1枚書いてnpx impeccable detect src/を1回走らせることです。何件引っかかるかを見れば、自分のUIの「AIっぽさ」が数値で分かります。

公式ドキュメント・一次情報

• anthropics/skills — frontend-design SKILL.md
• pbakaus/impeccable（GitHub）
• Impeccable — Docs
• Impeccable — Slop（検出ルールのカタログ）
• Hallmark（GitHub）
• avoid-ai-design（GitHub）
• Tailwind CSS v4 — Theme variables
• Claude Code — Skills（公式ドキュメント）

📌 本記事の情報は2026年10月時点のものです。Claude Code・プラグインともにアップデートが頻繁なため、最新の仕様は公式ドキュメントをあわせてご確認ください。

GPUSOROBAN

GPUSOROBANは、高性能なGPU「NVIDIA A4000 16GB」を業界最安値の1時間50円で使用することができます。

さらに、クラウドGPUを利用しない時は停止にしておくことで、停止中の料金はかかりません。

クラウドGPUを使えばいつでもStable Diffusionの性能をフルに引き出すことができるので、理想の環境に近づけることができます。

＼快適に生成AI！1時間50円～／

GPUSOROBANへ