UI UX Pro Max

何か

UI UX Pro Max は、AI コーディングエージェントに「プロレベルの UI/UX デザイン判断力」を付与するスキル。Claude Code・Cursor・Windsurf など 15 プラットフォームに対応。UI 制作をチャットで依頼するだけで、業界・スタックに最適化された完全なデザインシステムを自動生成する。

161

業界推論ルール

67

UI スタイル

57

フォントペア

99

UX ガイドライン

v2.0 のフラグシップ機能は デザインシステムジェネレーター。BM25 ランキングと正規表現のハイブリッド検索エンジンが 5 ドメインを並列照合し、パターン・スタイル・カラー・タイポグラフィ・エフェクト・アンチパターン・プリデリバリーチェックリストを一括で出力する。

生成パイプライン

「美容スパのランディングページを作って」という一言から、以下のパイプラインが動く。

1

ユーザーリクエスト

自然言語で UI 制作を依頼するだけ。スタック・業界・スタイルの指定は任意。

chat slash command

2

マルチドメイン並列検索（5 ドメイン）

製品タイプ・スタイル・カラーパレット・ランディングパターン・タイポグラフィを BM25 + 正規表現で同時照合。

products.csv styles.csv colors.csv landing.csv typography.csv

3

推論エンジン

161 の業界別ルールを適用。スタイル優先度付け・アンチパターン除外・JSON 条件ルール処理を経て最適解を絞り込む。

BM25 ranking rule matching anti-pattern filter

4

完全なデザインシステム出力

パターン・スタイル・カラー・タイポグラフィ・エフェクト・アンチパターン・プリデリバリーチェックリストを一括生成。

ASCII Markdown persist

出力例 — Beauty Spa

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Sections: Hero → Services → Testimonials → Booking → Contact                      |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes        |
|     Best For: Wellness, beauty, lifestyle brands, premium services                     |
|     Performance: Excellent  |  Accessibility: WCAG AA                                 |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8  (Soft Pink)      Secondary: #A8D5BA  (Sage Green)            |
|     CTA:        #D4AF37  (Gold)           Background: #FFF5F5 (Warm White)            |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Mood: Elegant, calming, sophisticated                                              |
|                                                                                        |
|  AVOID: Bright neon colors  +  Harsh animations  +  AI purple/pink gradients          |
|                                                                                        |
|  PRE-DELIVERY CHECKLIST:                                                               |
|     [ ] No emojis as icons (use SVG: Heroicons/Lucide)                                 |
|     [ ] cursor-pointer on all clickable elements                                       |
|     [ ] Hover states with smooth transitions (150-300ms)                               |
|     [ ] Light mode: text contrast 4.5:1 minimum                                        |
|     [ ] Focus states visible for keyboard nav                                          |
|     [ ] prefers-reduced-motion respected                                               |
|     [ ] Responsive: 375px, 768px, 1024px, 1440px                                       |
+----------------------------------------------------------------------------------------+

CSV データベース一覧

ファイル	内容	件数
`products.csv`	業界別推論ルール（パターン・スタイル優先度・カラームード・フォント・エフェクト・アンチパターン）	161
`styles.csv`	UI スタイル定義（CSS キーワード・AI プロンプト・適用シーン）。General 49 + Landing Page 8 + BI/Analytics 10	67
`colors.csv`	業界別カラーパレット（`products.csv` の 161 カテゴリと 1:1 対応）	161
`typography.csv`	フォントペア（Google Fonts インポート付き・ムード分類）	57
`landing.csv`	ランディングページ構造・CTA 戦略パターン	24+
`charts.csv`	チャートタイプとライブラリ推奨（ダッシュボード・分析向け）	25
`ux-guidelines.csv`	ベストプラクティス・アンチパターン・アクセシビリティルール	99
`stacks/`	スタック別ガイドライン（React, Next.js, Astro, Vue, Nuxt, Svelte, SwiftUI, Flutter, shadcn/ui ほか）	13

対応業界カテゴリ（抜粋）

カテゴリ	代表的なプロダクトタイプ
Tech & SaaS	SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity
Finance	Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing
Healthcare	Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder
E-commerce	General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery
Services	Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment
Creative	Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor
Lifestyle	Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker
Emerging Tech	Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet

CLI（推奨）

最も簡単な方法。プロジェクトへ移動してから対象の AI アシスタントを指定して初期化する。

# CLI をグローバルインストール
npm install -g uipro-cli

# プロジェクトへ移動してから AI を指定して初期化
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai codex       # Codex CLI
uipro init --ai gemini      # Gemini CLI
uipro init --ai all         # 全アシスタント対応

# その他のコマンド
uipro versions              # 利用可能なバージョン一覧
uipro update                # 最新版に更新
uipro init --offline        # GitHub ダウンロードをスキップ

Claude Marketplace

Claude Code から直接インストールする場合は、2 コマンドのみ。

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

Claude Codeスキルモード

Cursorスキルモード

Windsurfスキルモード

Codex CLIスキルモード

Gemini CLIスキルモード

Continueスキルモード

OpenCodeスキルモード

Qoderスキルモード

CodeBuddyスキルモード

Antigravityスキルモード

Droidスキルモード

TraeSOLOモード

Kiroスラッシュコマンド

GitHub Copilotスラッシュコマンド

Roo Codeスラッシュコマンド

スキルモード（自動起動）

対応エージェントでは、UI/UX 作業をチャットで依頼するだけでスキルが自動起動する。

Build a landing page for my SaaS product

Create a dashboard for healthcare analytics

Design a portfolio website with dark mode

Make a mobile app UI for e-commerce

Build a fintech banking app with dark theme

ワークフローモード（スラッシュコマンド）

Kiro・GitHub Copilot・Roo Code ではスラッシュコマンドで呼び出す。

/ui-ux-pro-max Build a landing page for my SaaS product

デザインシステムコマンド（上級）

スクリプトを直接呼び出すことで、デザインシステムを CLI から生成・永続化できる。

# ASCII 出力でデザインシステム生成
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Markdown 出力で生成
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# ドメイン指定検索
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

# スタック別ガイドライン検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

# デザインシステムをファイルへ永続化
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

デザインシステムの永続化（Master + Overrides パターン）

--persist フラグを使うと design-system/ フォルダが作成され、セッションをまたいでもデザインシステムが維持される。

design-system/
├── MASTER.md           # グローバル設定（カラー・タイポ・スペーシング・コンポーネント）
└── pages/
    └── dashboard.md    # ページ別オーバーライド（Master からの差分のみ）

利用時は「ページ固有ファイルが存在すればその設定を優先し、なければ MASTER を使う」という階層取得で運用する。

ディレクトリ構造

src/ui-ux-pro-max/          ← Source of Truth
├── data/
│   ├── products.csv        ← 161 業界推論ルール
│   ├── styles.csv          ← 67 UI スタイル
│   ├── colors.csv          ← 161 カラーパレット
│   ├── typography.csv      ← 57 フォントペア
│   ├── landing.csv         ← ランディングパターン
│   ├── charts.csv          ← 25 チャートタイプ
│   ├── ux-guidelines.csv   ← 99 UX ガイドライン
│   └── stacks/             ← 13 スタック別ガイドライン
├── scripts/
│   ├── search.py           ← CLI エントリーポイント
│   ├── core.py             ← BM25 + 正規表現ハイブリッド検索エンジン
│   └── design_system.py    ← デザインシステムジェネレーター
└── templates/
    ├── base/               ← 共通 SKILL.md・クイックリファレンス
    └── platforms/          ← プラットフォーム別設定 JSON

cli/                        ← npm パッケージ（uipro-cli）
├── src/
│   ├── commands/init.ts    ← インストールコマンド
│   └── utils/template.ts   ← テンプレートレンダリングエンジン
└── assets/                 ← バンドル済みアセット（~564KB）
    ├── data/               ← src/ui-ux-pro-max/data/ のコピー
    ├── scripts/            ← src/ui-ux-pro-max/scripts/ のコピー
    └── templates/          ← src/ui-ux-pro-max/templates/ のコピー

検索エンジンの仕組み

core.py は BM25 ランキングと正規表現マッチングのハイブリッド検索エンジン。--domain 指定なしでも入力テキストから適切なデータベースを自動選択して検索できる。

design_system.py はこの検索エンジンを 5 ドメイン（製品・スタイル・カラー・ランディング・タイポグラフィ）で並列実行し、業界別ルール（ui-reasoning.csv）に基づいて結果を統合。最終的なデザインシステム推奨を生成する。

コントリビューション手順

変更は必ず src/ui-ux-pro-max/ を Source of Truth として行う。CLI への反映は cp で cli/assets/ を同期し、bun run build でビルド後にテストする。

# データ・スクリプトを変更後、CLI アセットへ同期
cp -r src/ui-ux-pro-max/data/* cli/assets/data/
cp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/

# CLI をビルドしてローカルテスト
cd cli && bun run build
node dist/index.js init --ai claude --offline

公式・関連

GitHub: nextlevelbuilder/ui-ux-pro-max-skill — 本体リポジトリ（Python + TypeScript）
npm: uipro-cli — CLI インストーラー
uupm.cc — 公式サイト
NextLevelBuilder.io — 開発者サイト
リリース履歴 — バージョン情報・変更点

対応プラットフォーム