uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
ブログ · 日本語 · 2026-05-28

# 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 全部をカバーします。エディタに最も近いルートを選んでください:

エディタ | ルート | コマンド
--- | --- | ---
Claude Code | マーケットプレイス | `/plugin install ux@ux-skill`
Cursor | `.cursorrules` + MCP | `uxskill init --target cursor`
Windsurf | `.windsurfrules` + MCP | `uxskill init --target windsurf`
GitHub Copilot | `copilot-instructions.md` | `uxskill init --target copilot`
Cline / Continue | MCP サーバ | `uxskill mcp-config --target cline`
JetBrains AI Assistant | `.junie/guidelines.md` | `uxskill init --target jetbrains`
Zed | MCP stdio | `uxskill init --target zed`
Codex CLI / Aider | 直接 CLI | `pip install uxskill`

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

正直なスコープ

#### 正規表現は構造を捕まえる。趣味は捕まえない。

リンターは「このセクションのリズムが悪い」「コピーが冷たく感じる」を検出できません。それは人間か、レビュー時の LLM の仕事です。一方で、正規表現が 確実に 捕まえるのは、リテラルトークン、パターン、形状で表現できるすべての指紋です。これが AI のデフォルトの大半を占めます。モデルは毎回同じ成果物に戻ってくるからです。

CI で LLM ジャッジを走らせるのは意図的に避けています。「デザイナーが作ったように見えるか」が基準なら、それはコードレビューであって lint ではありません。ux-skill にはエディタからオンデマンドで実行する `ux critique` もありますが、CI では走らせません。

## 関連記事

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

インストール

## 17 IDE。1 つのエンジン。145 のルール。

レコメンダー、リンター、MCP サーバ、22 のコマンド、160 のブランド仕様、1,243 のカタログエントリはすべて同梱で配布されます。リンターはサブセカンドで走り、残りはオンデマンド。MIT、テレメトリなし、アカウント不要です。

$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill
— または —
$ pip install uxskill
— または —
$ npx uxskill@alpha init

## 関連記事

- 35 の AI デザイン指紋
- 正規表現リンター — 145 ルール
- アンチスロップのランキング
- Cursor デザインプラグイン