UI UX Pro Max を試す — Claude Code に「デザインの脳」を差し込むスキル

「AI に UI を書かせるとなんとなく整うけど、あと一歩で 普通 を超えられない」 — これは Cursor でも Claude Code でも皆が通る壁です。

そこに デザインの前提知識を CSV で持ち込む アプローチで対応してきたのが、今回紹介する UI UX Pro Max（以下 UUPM）。Claude Code 用のスキルとして配布されており、カラーパレット・フォントペア・UX アンチパターンを RAG ライクに検索しながらコードを生成させられます。

この記事では、AIGP 本体（Next.js 16 + shadcn/ui リライト）に実際にインストールして手を動かした所感と、どこに効くかを整理します。

UUPM が持ち込むデータ量

スキルの中身は、ほぼ 14 枚の CSV と 検索用 Python スクリプト 3 本 です。シンプル。

データ	件数
UI スタイル（styles.csv）	67
カラーパレット（colors.csv）	161
タイポグラフィ（typography.csv）	57 pair
UX ガイドライン（ux-guidelines.csv）	99
チャート種別（charts.csv）	25
対応スタック（stacks/）	13（shadcn, Next.js, Vue, SwiftUI, Flutter …）

配布は npx uipro-cli init --ai claude 一発。プロジェクト直下に .claude/skills/ui-ux-pro-max/ が生えて、以後 Claude Code は「UI を作って」「ダッシュボード設計して」と言っただけでこのスキルを自動発火します。

161 パレットの中身 — AIGP のようなサイトに合うもの

products.csv は プロダクト種別 → 5 色セット で整理されています。Primary / Secondary / CTA / Background / Text がすべて決まっており、各行に “Trust blue + orange CTA” のようなロジックメモ付き。

AIGP のように「AI プロンプトを扱うサイト」なら、素直に行けば AI / Chatbot Platform の #7C3AED + #06B6D4 が第一候補です。これは後述する適用プランのベースにもなります。

67 スタイル — CSV からコードへ落ちるまでが早い

styles.csv は 1 行 1 スタイルで、以下の列まで入っています。

• AI Prompt Keywords（Claude に渡すためのプロンプト断片）
• CSS/Technical Keywords（実装側のキーワード）
• Implementation Checklist（レビュー用）
• Design System Variables（CSS 変数の初期値）

たとえば Glassmorphism なら backdrop-filter: blur(15px) と rgba(255,255,255,0.15) が Design System Variables に含まれており、AI はこれをそのまま Tailwind config に展開します。いわば 「ChatGPT の雰囲気」を CSS に翻訳する辞書。

4 ステップの推論ワークフロー

SKILL.md を読むと、UUPM の挙動は意外にもシンプルな 4 段階でした。

1. Discover — products.csv から「何を作ろうとしているか」を同定 2. Style — styles.csv から 1st / 2nd / 3rd スタイル候補を選定 3. System — colors.csv + typography.csv から DesignSystem トークンを合成 4. Emit — stacks/{stack}.csv に従ってコード片に落とす

stacks/shadcn.csv には「globals.css に .dark クラスを書け」「ハードコード色禁止、bg-primary を使え」といった具体ルールが入っており、shadcn ベースのプロジェクト（＝AIGP）では特に相性が良いです。

実際に検索してみる

Python スクリプトが CLI として叩けるので、Claude 経由でなく直接確認できます。

# プロダクト種別の推薦を引く
python .claude/skills/ui-ux-pro-max/scripts/search.py "blog" --domain product

# スタック固有のガイドライン（shadcn）
python .claude/skills/ui-ux-pro-max/scripts/search.py "dark minimal" --stack shadcn

BM25 + 正規表現のハイブリッド検索なので、曖昧な自然言語クエリでも 1 件は必ず返ります。Claude Code からは Skill 経由で自動的にこの検索を挟んでくれるので、普段は意識せずに済みます。

AIGP への適用プラン

ここが本題。AIGP は現在 Next.js 16 + shadcn/ui + Tailwind v4 で Headless WP からのリライトを進めている最中（Phase 1 MVP）。UUPM は「常用するスキル」ではなく、最初のデザインシステム確定に 1 回だけ通す のが費用対効果として一番高い、と判断しました。

1. ブランド基盤 — products.csv の AI / Chatbot Platform を起点に CSS 変数を刷新 2. プロンプトカード UI — ux-guidelines.csv の CRITICAL 2 カテゴリ（Accessibility / Touch & Interaction）を BlogCard に適用 3. 管理画面チャート — charts.csv の 25 種から、自動投稿ログ・YouTube Shorts 連携メトリクスに合うものを選定 4. LP コンバージョン — landing.csv の Storytelling-Driven + Hero-Centric パターンをトップに反映 5. アクセシビリティ棚卸し — color-contrast / focus-states / alt-text / aria-labels / keyboard-nav / form-labels の 6 項目で既存コンポを総点検 6. 位置づけ — 決まった tokens をコミットしたら skill はそこまで。以降は .claude/skills/ に置いたまま、必要な時だけ再参照

インストール手順（3 行）

# 任意のプロジェクトルートで
npx uipro-cli init --ai claude

# これだけ。あとは Claude Code を再起動して
# 「ブログカードのデザインを UUPM で見直して」のように話しかけるだけ

生成されるのは .claude/skills/ui-ux-pro-max/ 以下の約 1.6MB（CSV + Python + SKILL.md）。.gitignore に含めるか迷うところですが、チームで同じ前提を共有したいなら コミットして良いサイズです。

向いていない使い方

• 既存サイトへの一括適用 — 既に動いているコンポーネントを書き換える用途には弱い。あくまで「最初に方針を決める」道具。
• ブランドのトーン＆マナー決定 — ロジック的には SaaS 向けパレットしか返らないので、独自性は人間側で乗せる必要あり。
• 細かいマイクロインタラクション — アニメーションパターンの提案はあるが、Framer Motion や CSS アニメの実装コードレベルでは他のリソースが必要。

まとめ

UUPM は 「デザイン判断を外部記憶に逃がす」 という発想が面白いスキルです。AI の出力品質を底上げするというより、判断の根拠となるデータを持ち込むことで出力を再現可能にする のが本質。

AIGP の Next.js リライトでは、最初のデザインシステム確定フェーズに 1 回だけ通し、決まったトークンをコミットして卒業する予定。今後 BlogCard の UX 改善や管理画面チャートの刷新を記事にしていきます。

• 公式: uupm.cc / ui-ux-pro-max-skill.nextlevelbuilder.io
• GitHub: nextlevelbuilder/ui-ux-pro-max-skill
• ライセンス: MIT