はじめに
Claude CodeやCursorなどのAIコーディングアシスタントに「ランディングページを作って」と頼むと、機能的には動くものの、デザイン面では物足りない結果になることがあります。配色がちぐはぐだったり、フォントの組み合わせが微妙だったり、業界に合わないスタイルが選ばれたりします。
UI UX Pro Maxは、この問題を解決するAI Skillです。161の業界別ルール、67のUIスタイル、161のカラーパレット、57のフォントペアリングをもとに、プロジェクトの要件に合ったデザインシステムを自動生成します。
この記事では、インストールから実際の活用例まで紹介します。
UI UX Pro Maxとは
AIコーディングアシスタント向けのデザインインテリジェンスSkillです。「SaaS向けのダッシュボードを作りたい」「スパのランディングページが欲しい」といったリクエストに対して、業界やプロダクトの種類を分析し、最適なデザインシステムを提案します。
提案される内容は以下の通りです。
- ランディングページのパターン（Hero-Centric、Conversion-Optimizedなど24種類）
- UIスタイル（Glassmorphism、Brutalism、Neumorphismなど67種類）
- カラーパレット（業界別に最適化された161種類）
- フォントペアリング（Google Fonts対応の57組）
- アンチパターン（「やってはいけないこと」の指摘）
- プリデリバリーチェックリスト
対応プラットフォーム
Claude Code以外にも幅広いAIコーディングアシスタントに対応しています。
| プラットフォーム | 対応状況 |
|---|---|
| Claude Code | CLIインストール / Plugin |
| Cursor | CLIインストール |
| Windsurf | CLIインストール |
| GitHub Copilot | CLIインストール |
| Gemini CLI | CLIインストール |
| Codex CLI | CLIインストール |
| その他（Kiro, Roo Code, CodeBuddyなど） | CLIインストール |
インストール
CLIによるインストール（推奨）
uipro-cliをグローバルインストールし、プロジェクトディレクトリで初期化します。
npm install -g uipro-cli
プロジェクトディレクトリに移動して、使用するAIアシスタントを指定します。
cd /path/to/your/project
# Claude Code向け
uipro init --ai claude
# Cursor向け
uipro init --ai cursor
# すべてのアシスタントに一括インストール
uipro init --ai all
Claude Code Pluginとしてインストール
Claude Code内で以下のコマンドを実行します。
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
バージョン管理
# 利用可能なバージョンを確認
uipro versions
# 最新版にアップデート
uipro update
# オフラインインストール（バンドル済みアセットを使用）
uipro init --offline
デザインシステム生成の仕組み
UI UX Pro Maxの中核は、5つの並列検索による推論エンジンです。
ユーザーが「ビューティーサロンのランディングページを作って」とリクエストすると、以下のような処理が行われます。
- プロダクトタイプを「Beauty/Spa」カテゴリにマッチング
- 業界に適したUIスタイル（Soft UI Evolutionなど）を選択
- カーミングな配色パレットを提案（ソフトピンク、セージグリーンなど）
- フォントペアリングを選定（Cormorant Garamond / Montserratなど）
- アンチパターンを警告（ネオンカラーや暗いモードは避けるべき、など）
業界別ルールの例
161の業界別ルールが搭載されており、プロダクトの種類に応じた最適なデザインを提案します。
| カテゴリ | 対応例 |
|---|---|
| Tech / SaaS | SaaS、開発者ツール、AI/Chatbotプラットフォーム |
| Finance | Fintech、銀行、保険、個人資産管理 |
| Healthcare | クリニック、薬局、メンタルヘルス |
| E-commerce | 一般EC、高級EC、サブスクリプションボックス |
| Creative | ポートフォリオ、写真、ゲーミング |
| Lifestyle | 習慣トラッカー、レシピ、瞑想アプリ |
各ルールには以下の情報が含まれます。
- 推奨パターン（ランディングページの構造）
- スタイル優先度（業界に合うUIスタイルのランキング）
- カラームード（業界に適した色調）
- アンチパターン（避けるべきデザイン要素）
対応テックスタック
13のフレームワーク/技術スタックに対応しており、選択したスタックに合わせたコード生成が行われます。
- React / Next.js
- Vue / Nuxt.js / Nuxt UI
- Svelte / Astro
- SwiftUI / React Native / Flutter
- HTML + Tailwind CSS
- shadcn/ui
- Jetpack Compose
使い方
基本的な使い方
Skill Modeでは、自然言語でリクエストするだけで動作します。
SaaS製品のダッシュボードUIを作ってください
個人ポートフォリオサイトのランディングページをデザインして
Workflow Modeでは、スラッシュコマンドで明示的に呼び出します。
/ui-ux-pro-max フィットネスアプリのオンボーディング画面を作って
実際のユースケース
ケース1：SaaSのダッシュボード
あるプロジェクトで分析ダッシュボードを作成した際、通常のClaude Codeだと白背景にデフォルトのチャートが並ぶだけの画面になりました。UI UX Pro Maxを導入後にリクエストすると、Data-Dense Dashboardスタイルが選ばれ、適切なカード配置、情報密度を考慮したレイアウト、視認性の高い配色が提案されました。
ケース2：飲食店のランディングページ
レストランのWebサイトを作成した際には、以下のようなデザインシステムが自動生成されました。
- パターン：Hero-Centric + Social Proof
- スタイル：Organic Biophilic（温かみのある自然派デザイン）
- カラー：暖色系の食欲をそそるパレット
- フォント：読みやすく親しみやすいペアリング
- アンチパターン：「サイバーパンク風のUI」「ダークモード」は避けるべきと警告
ケース3：開発者ツールのプロダクトページ
CLIツールのプロダクトページでは、以下が提案されました。
- パターン：Feature-Rich Showcase
- スタイル：Dark Mode（OLED）+ AI-Native UI
- カラー：ブルー/パープル系の信頼感のあるパレット
- チェックリスト：cursor-pointerの設定、ホバーステート、キーボードナビゲーション対応
UIスタイル一覧（抜粋）
67種類のUIスタイルから、代表的なものを紹介します。
| スタイル | 適した用途 |
|---|---|
| Minimalism & Swiss Style | エンタープライズアプリ、ドキュメントサイト |
| Glassmorphism | モダンSaaS、金融ダッシュボード |
| Brutalism | デザインポートフォリオ |
| Claymorphism | 教育アプリ、子供向けアプリ |
| Bento Box Grid | ダッシュボード、プロダクトページ |
| AI-Native UI | AIプロダクト、Chatbot |
| Spatial UI（VisionOS） | 空間コンピューティングアプリ |
| E-Ink / Paper | 読書アプリ、デジタル新聞 |
まとめ
UI UX Pro Maxは、AIコーディングアシスタントのデザイン品質を引き上げるSkillです。
-
npm install -g uipro-cli→uipro init --ai claudeの2コマンドで導入できます - 161の業界別ルールにより、プロダクトに合ったデザインが自動提案されます
- 67のUIスタイル、161のカラーパレット、57のフォントペアリングという豊富な選択肢があります
- Claude Code以外にも13以上のAIアシスタントに対応しています
「見た目はあとで整える」というアプローチから、「最初からプロレベルのデザインで実装する」というワークフローに切り替えられます。