UI UX Pro MaxでAIが書くUIをプロ品質に——161業界のデザイン知識を自動装備する方法

プロンプト画伯

2026/04/02

AIが書くフロントエンドコードの「見た目問題」

Claude CodeやCursorでフロントエンドを書くと、機能はちゃんと動くんです。

ボタンを押せばデータが送られるし、一覧画面はちゃんとフィルターできる。

でも、出来上がった画面を見て「うーん......」ってなったこと、ありませんか？

背景はグレー一色。アクセントカラーはAIが大好きな紫ピンクグラデーション。フォントは何を作っても同じsans-serif。コンポーネントは「とりあえず並べました」感がすごい。

これ、AIコーディングあるあるです。

原因はシンプルで、AIに「デザインの構造化知識」が入っていないからです。

コードの書き方は大量に学習しているけれど、「フィンテックのダッシュボードには信頼感のあるブルー系が合う」とか「美容系サイトにはSoft UIで柔らかさを出す」といったデザインの文脈知識がない。

だから、どんな業界のどんなプロダクトを作っても、見た目が画一的になってしまう。

この問題を真正面から解決するツールが出てきました。

UI UX Pro Maxとは何か

UI UX Pro Maxは、AIコーディングアシスタントにデザインシステムの「知識ベース」を丸ごと装備させるSkill（プラグイン）です。

Claude Codeの場合はSkillsとして、CursorやWindsurfなどではルールファイルとして動作します。

ひとことで言えば、「AIにデザインの常識と引き出しを持たせる仕組み」です。

161業界ルール・67スタイル・161配色——内蔵データの全体像

内蔵されているデータ量がとにかくすごいです。

161条の業界別推論ルール —— SaaS、フィンテック、医療、EC、飲食、ゲームなど、業界ごとに「この業界ならこのスタイル・この配色・このフォントが最適」という推論ロジックが定義されています。つまり、フィンテック系のプロダクトを作ると言っただけで、AI自身が「この業界はブルー系・信頼感重視・ミニマル」と判断してコードを書き始めます。
67種のUIスタイル —— Glassmorphism、Brutalism、Neumorphism、Bento Grid、Cyberpunk、AI-Native UIなど。トレンドのスタイルから定番まで網羅されています。つまり、「最近トレンドの半透明UI」と伝えるだけで、Glassmorphismの実装が自動的に選ばれます。
161套の配色パターン —— 161の業界分類それぞれに最適化された配色が用意されています。つまり、業界を指定するだけで、「それっぽい」ではなく「それに合った」色が選ばれます。
57組のフォント組み合わせ —— タイトル用フォント＋本文用フォントのペアが57セット。しかもGoogle Fontsのリンク付きなので、そのまま使えます。つまり、フォント選びで悩む時間がゼロになります。
99条のUX規範 —— アクセシビリティ、アンチパターン、レスポンシブ対応のルールが99個。つまり、言われなくてもアクセシビリティ対応のコードが出てくるようになります。
25種のチャートタイプ推奨 —— ダッシュボードを作るときに、データの種類に応じた最適なチャートを提案してくれます。つまり、「棒グラフと折れ線グラフ、どっちにすべきか」をAIが文脈から判断してくれます。

これらが全部、AIのコンテキストに読み込まれるわけです。

人間のデザイナーが何年もかけて蓄積する「この業界ならこうする」という暗黙知を、構造化データとしてAIに一括インストールしているイメージですね。

では、実際にどんな出力が出てくるのか。具体例を見てみましょう。

仕組み：5つの観点で最適なデザインシステムを自動推論

従来のワークフローを思い出してください。

Dribbbleで参考デザインを探す
Coolorsで配色を決める
Google Fontsでフォントを選ぶ
それらをまとめてAIに指示する

この4ステップを毎回やっていたわけです。

UI UX Pro Maxはこれを全自動化します。

たとえば「SaaSのランディングページを作って」と指示するだけで、AIが5つの観点から最適なデザインを推論します。まるでデザイナー5人が同時に異なる角度から議論して、最善案を持ち寄るようなイメージです。

プロダクトタイプマッチング —— 「SaaS」という業界に合う推論ルールを特定
スタイル推薦 —— その業界に最適なUIスタイルを選択
配色選択 —— 業界とスタイルに合った配色パターンを決定
ページパターン —— ランディングページに適したレイアウト構成を選定
フォント組み合わせ —— トーンに合うタイトル＋本文フォントを決定

この5つの結果を統合して、完全なデザインシステム方案を出力してからコードを書き始めます。

つまり、「まず設計、それからコード」という、本来デザイナーがやるべきプロセスをAIが自律的に実行するようになるんです。

実際に動かしてみた——美容SPAランディングページの例

理屈はわかった。じゃあ実際に何が起きるのか、具体例で見てみましょう。

プロンプトから設計方案が出力されるまで

入力するプロンプトはこれだけです。

美容SPAのランディングページを作って

たったこの一文。

従来なら「配色はパステル系で、フォントはエレガントな感じで、レイアウトはヒーローセクションから始めて......」と延々と指示を書く必要がありました。

UI UX Pro Maxがインストールされた環境では、このシンプルなプロンプトから自動的にデザインシステムの推論が始まります。

出力された設計方案の中身

AIが実際に出力した設計方案がこちらです。

項目

推論結果

ページパターン

Hero-Centric + Social Proof（感情駆動＋信頼要素）

UIスタイル

Soft UI Evolution（柔和な影、繊細なデプス表現、ソフトな質感）

メインカラー

柔粉 #E8B4B8

サブカラー

鼠尾草緑 #A8D5BA

CTAカラー

金 #D4AF37

タイトルフォント

Cormorant Garamond

本文フォント

Montserrat

アンチパターン

ネオンカラー禁止、生硬アニメーション禁止、ダークモード禁止、AI紫ピンクグラデーション禁止

注目してほしいのは「アンチパターン」の行です。

「美容SPAにダークモードはNG」「AI定番の紫ピンクグラデーションは使うな」と、やってはいけないことまで明示されています。

これがあるだけで、AIが暴走して場違いなデザインを出す確率がグッと下がります。

配色も「柔粉＋鼠尾草緑＋金のCTA」という組み合わせで、美容SPAに来店するお客様が感じるであろう「上品さ」「リラックス感」「特別感」がちゃんと表現されています。

プロンプトには一切指定していないのに、です。

これ、初めて見たとき思わず声が出ました。「ちゃんとわかってるじゃないか」と。

でも、個人的に一番グッときたのは、インストールの簡単さよりも、ある別の機能なんです。

インストールと初期設定

ここからは実際の導入手順です。

嬉しいことに、めちゃくちゃ簡単です。

Claude Code向け（推奨・最も完全対応）

Claude Codeでの導入が最も完全に対応しています。

claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill

コマンド2つで完了です。

インストール後は特別な設定不要で、フロントエンド生成時に自動的にデザイン推論が走るようになります。

Cursor・Windsurf・その他ツール向け（uipro-cli）

Claude Code以外のツールでは、uipro-cliというCLIツール経由でセットアップします。

npm install -g uipro-cli
cd /path/to/your/project

ここからは使うツールに応じてコマンドを選びます（以下は主要なツールの例です）。

uipro init --ai cursor      # Cursor
uipro init --ai windsurf     # Windsurf
uipro init --ai codex        # Codex CLI
uipro init --ai copilot      # GitHub Copilot
uipro init --ai gemini       # Gemini CLI
uipro init --ai all          # 全ツール一括

--ai allを指定すれば、対応する全ツールのルールファイルを一括生成できます。

複数のAIエディタを併用している人はallが楽ですね。

なお、内部で検索スクリプトを実行するためにPython 3.xが必要です。

ほとんどの開発環境にはすでに入っていると思いますが、もしpython3 --versionでエラーが出る場合はインストールしておいてください。

対応する15の技術スタック

UI UX Pro Maxが対応しているフレームワークは15種類と幅広いです。

あなたが今使っているスタックがきっと含まれているはずです。

Web: HTML+Tailwind（デフォルト）、React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、Astro、shadcn/ui、Angular、Laravel

iOS: SwiftUI

Android: Jetpack Compose

クロスプラットフォーム: React Native、Flutter

Web系はもちろん、モバイルアプリ開発でもデザイン推論が効くのは大きいですね。

SwiftUIやJetpack Composeでの個人開発でも、業界に合ったデザインが自動適用されます。

「アンチパターン検出」が地味にすごい

個人的に一番グッときた機能がこれです。

「何を使うべきか」を教えてくれるツールは多いけど、「何をやったらダメか」まで教えてくれるツールはなかなかありません。

業界別に「やってはいけないこと」を自動チェック

UI UX Pro Maxの161業界ルールには、それぞれ「Anti-Patterns」セクションが定義されています。

いくつか例を挙げます。

銀行・金融系 —— AI紫ピンクグラデーション禁止。信頼感が最優先の業界で、トレンディすぎるデザインは逆効果。
子供向け教育 —— ダークモード禁止。子供が使うアプリに暗い画面は不適切。
エンタープライズSaaS —— 派手なアニメーション禁止。業務ツールでキラキラした演出は邪魔になる。

これ、言われてみれば当たり前なんですが、AIに指示しないと平気でやってしまうんですよね。

デザイナーなら無意識に避けることを、ルールとして明文化してAIに守らせる。

この発想、本当に痺れます。「守るべきことを教える」という設計が、「使うべきものを教える」よりもずっと実用的だと気づかされます。

交付前チェックリスト——見落としがちなUXの細部

UI UX Pro Maxには、コードを納品する前のチェックリストも内蔵されています。

絵文字をアイコン代わりに使っていないか（SVGを使うべき）——だからAIは指摘されるまでずっと絵文字を使い続けます
クリック可能な要素にcursor: pointerが設定されているか——だからAIはインタラクティブ要素でも矢印カーソルのままにしがちです
hoverアニメーションが150〜300msの範囲か——だからAIは0msか1000msかの極端な値を入れてしまいます
テキストのコントラスト比が4.5:1以上か——だからAIはおしゃれに見せようとして読めない色を使います
prefers-reduced-motionを尊重しているか——だからアクセシビリティを意識していないと絶対に忘れます

どれも「プロのフロントエンドエンジニアなら当然やること」ですが、AIが生成するコードでは抜け落ちがちなポイントです。

こういう細部まで自動でカバーしてくれるのは、本当に助かります。

では、これが他の方法とどう違うのか。比較してみます。

他の手法との比較——どれをいつ使うべきか

AIにデザイン知識を与える方法は、UI UX Pro Maxだけではありません。

他の手法と比較して、どんな場面で何を選ぶべきかを整理します。

手法

初期コスト

メンテナンス

柔軟性

おすすめの場面

UI UX Pro Max

低（コマンド2つ）

不要（更新で自動反映）

161業界から自動選択

新規プロジェクト・個人開発・業界が明確なとき

CLAUDE.md手書き

中（自分で書く）

高（手動更新）

完全にカスタム可能

独自ブランドガイドラインがあるとき

Figma MCP

高（Figma設計が前提）

中（Figma側で管理）

デザインカンプ依存

デザイナーとの協業があるとき

社内デザインシステムMCP化

非常に高（構築が大変）

高（運用チーム必要）

最も高い

大規模チーム・プロダクトが成熟期

ポイントは「排他的に選ぶ必要はない」ということです。

たとえば、UI UX Pro Maxで業界のベースラインを自動設定しつつ、CLAUDE.mdで自社ブランド固有のルールを上書きする、という組み合わせが実用的です。

個人開発なら、まずUI UX Pro Maxだけで十分です。

デザイナーがいなくても、「この業界ならこのデザインが標準」というラインまで自動で引き上げてくれます。

次は、AIエディタを使わない人にも使える意外な活用法を紹介します。

デザインシステム生成器として単独で使う

意外と知られていない使い方として、AIコーディングツールなしでも単独でデザインシステムを生成できます。

CLIから直接Pythonスクリプトを実行する方法です。

# フィンテック銀行向けのデザインシステムをMarkdownで出力
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Glassmorphismスタイルの詳細を検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

# エレガントなセリフ系フォントを検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography

これはAIツールを使わないデザイナーにも便利です。

「フィンテック向けの配色パターンをサクッと確認したい」「トレンドのUIスタイルの特徴を調べたい」——そういうリファレンスツールとしても使えます。

出力形式はMarkdownのほか、JSONでも取得できるので、自社のデザインシステムドキュメントに組み込むことも可能です。