AI コーディング デザイン — なぜどの AI も 同じ UI を作るのか。

Claude Code、Cursor、Windsurf、GitHub Copilot、Cline、Continue にランディングページを作らせたことのある人なら、誰でもあの出力を知っています。ディスプレイサイズに引き伸ばされた Inter、紫から青へのグラデーション、横並びに置かれた同一の 3 枚のカード、そしてヒーロー直下に並ぶ「Build something amazing」のコピー。問題はツールにあるわけではありません。問題は、どのツールも同じテンプレート群から学習したという点にあります。ux-skill は、145 の決定論的な正規表現ルールでこのパターンを CI 上から取り除きます。

By the ux-skill team · 9 分で読了 · MIT ライセンス・オープンソース

AI が毎回作る 8 つの視覚的デフォルト

私たちは AI デザインのフィンガープリント分類 ですべての指紋を整理しました。ヒーローセクションでほぼ必ず姿を見せる、もっとも目立つ 8 つは次のとおりです。

1. ディスプレイ書体としての Inter — 小さい画面サイズで読みやすさのために設計された書体を、ヒーローで 90px まで引き伸ばす。本来そのために作られたものではありません。
2. 紫から青のグラデーション — #7C3AED → #3B82F6 系のグラデーション。ファーストビューの背景に必ず登場する。
3. 横並びの同じ 3 つのカード — アイコン、一語のタイトル、一文のサブタイトル、それを 3 回繰り返すだけ。
4. 全要素への fade-in-up アニメーション — セクションの全直接子要素に同じトランジションがかかる。役割の区別がない。
5. すべて中央揃え — ヒーロー、カード、フォーム、何もかも画面の中央に並べる。
6. 具体性のないコピー — 「Build something amazing」「Beautiful experiences」「Revolutionizing X」など、製品の名詞が一切登場しない。
7. ストック画像の URL — 実際のプロダクトスクリーンショットの代わりに、汎用プレースホルダー画像。
8. フラットデザインに乗った重い影 — 「目立たせたい」という意図と「フラットがクール」という流行が同居して、ちぐはぐな立体感が生まれる。

ひとつひとつのデフォルトは、それ単体で見れば誤りではありません。問題はこの 8 つが 同時に 1 ページ上に揃ったときに、誰が見ても「これは AI が作った」と分かる指紋になることです。1 つなら肩をすくめて流せる。同じファーストビューに 4 つ並んだら、どの AI ツールが作ったかさえ言い当てられます。

なぜプロンプトでは足りないのか

ほとんどのチームの最初の反応は、プロンプトに指示を足すことです。「デフォルトのグラデーションは使うな」「本物のディスプレイ書体を選べ」「同じカードを 3 枚並べるな」。これは 1 メッセージの間は機能します。次のメッセージで、ガイダンスは薄まり、コンテキストウィンドウは膨らみ、指紋は戻ってきます。プロンプトによる制御は確率的で、長さとともに減衰します。

必要なのは決定論的な床 — モデルが書き終わった 後に、LLM をループに入れずに走るチェックです。これが ux-skill が埋める穴です。レコメンダーがモデルの選択肢を最初に狭め、リンターがそれでも漏れたデフォルトを叩き落とす。

確率的なものに確率的な対策を重ねない

「AI のアウトプットに別の AI で品質チェックを入れればよい」という案は何度も浮かびますが、AI による評価は、AI による生成と同じ揺らぎを持ちます。レーティング、Few-shot 例、その日のモデルバージョンに依存します。CI で必要なのは、毎回同じ結果を返す検出層です。決定論こそが正規表現の唯一の強みであり、それで十分です。

145 の正規表現ルール、LLM なし、CI で動作

リンターは *.tsx、*.jsx、*.vue、*.svelte、*.astro、*.css、*.scss、*.html のすべてのファイルをスキャンします。フラグ i と m で 145 の正規表現を適用し、ルール ID・重大度・ファイル・行・列・抜粋・推奨される修正を含む JSON を返します。

# ローカルで lint、デフォルトでは high+critical をゲート
$ uxskill lint
[OK] Scanned 142 files in 412ms · 0 findings at threshold high

# サブディレクトリ + JSON 出力
$ uxskill lint apps/web/src --json | jq '.summary'
{
  "critical": 0,
  "high": 4,
  "medium": 11,
  "low": 3,
  "total": 18
}

LLM の呼び出しはゼロ。200 ファイルの Next.js リポジトリでの平均走査時間は、コールドで 380ms、ウォームで 90ms です。ルールの完全な仕様は 正規表現リンターのガイド で公開しています。

実際のヒーローでのビフォーアフター

以下は、Next.js のスターターから切り出した簡略化されたヒーローブロックで、3 つのルールに引っかかります。下が exit 0 で通る書き換え版です。コンバージョンの意図は同じ、指紋は別物です。

// Before — 3 件の high 検出
<section className="bg-gradient-to-br
  from-purple-500 via-violet-500
  to-blue-500 py-32">
  <h1 className="font-['Inter']
    text-7xl leading-none">
    Build something amazing.
  </h1>
  <div className="grid grid-cols-3 gap-6">
    <Card icon="Zap" title="Fast" />
    <Card icon="Shield" title="Safe" />
    <Card icon="Heart" title="Loved" />
  </div>
</section>

// After — 0 件
<section className="bg-stone-50 py-28">
  <h1 className="font-['Fraunces']
    text-6xl leading-[1.04]
    tracking-tight">
    TMS が出荷しなかった
    貨物ルーティング層。
  </h1>
  <div className="grid grid-cols-12 gap-6 mt-16">
    <Card className="col-span-7"
      title="貨物統合" />
    <Card className="col-span-5"
      title="キャリアランキング" />
  </div>
</section>

Before では 3 つのルールが発火します。Inter を text-7xl で使う、AI 定番のグラデーション、3 枚同一カードのグリッド。After では Fraunces（ディスプレイ）と Inter（ボディ）をペアにし、フラットなサーフェスを採用し、7 と 5 の非対称グリッドに切り替えています。意図は同じ、指紋はもう残っていません。

レコメンダーが床を上げ、リンターが天井を決める。両方が必要だ。

Claude Code 用デザインシステムの組み立て方

Claude Code は ux-skill のホームグラウンドです。プラグインマーケットプレイスからのインストールは 2 行で完了します。

# Claude Code のプラグインマーケットプレイス
$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill

インストール後、22 のスラッシュコマンドが Claude Code セッションに登録されます。/ux-discover は 10 項目のブリーフを質問形式で集め、/ux-recommend は 5 つの並列検索（業界・スタイル・パレット・タイポグラフィ・モーション）を実行し、/ux-persist save がリポジトリのルートに MASTER.md、tokens.css、manifest.json を書き出します。トークンが書き出されてしまえば、Claude Code は以後のセッションでもそれを参照しながらコードを書きます。

Cursor では .cursorrules ファイル + MCP サーバの組み合わせです。uxskill init --target cursor がセットアップ全体を生成します。Windsurf では .windsurfrules と MCP の組み合わせで uxskill init --target windsurf。GitHub Copilot は .github/copilot-instructions.md + ディスクベースリンターで、uxskill init --target copilot です。

3 つのインストール経路、1 つのエンジン

同じ Python パッケージが互換マトリクスの 17 IDE 全部をカバーします。エディタに最も近いルートを選んでください:

すべての下に共通するのは: 1,182 のカタログエントリ、145 のルール、160 のブランド仕様、22 のコマンド、リリースごとにグリーンになる 75 のテスト。

関連記事

• AI ツールがデフォルトで吐く 35 のデザインフィンガープリント
• AI コーディング向け正規表現リンター — CI 上の 145 ルール
• Claude Code 向けアンチスロップツールの正直なランキング
• Cursor デザインプラグイン — インストールガイド
• README（日本語版）
• インストールページ / MCP セットアップ