UI UX Pro Max スキル

複数のプラットフォームやフレームワークでプロフェッショナルなUI/UXを構築するためのデザインインテリジェンスを提供するAIスキル。

GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
ウェブサイト: https://uupm.cc

それは何ですか？

UI UX Pro Maxは、Claude Code、Cursor、Windsurf、GitHub Copilotなど、15以上のAIコーディングアシスタントにロードするように設計された**AIスキル（コンテキスト注入レイヤー）**です。インストールすると、開発者が毎回手動でデザインルールを指定する必要なく、AIがプロフェッショナルで本番グレードのUI/UXコードを生成する能力を自動的に拡張します。

その中核は、構造化された知識ベースとPythonベースの推論エンジンを組み合わせたもので、ユーザーのリクエストを分析し、コードが記述される前に完全でカスタマイズされたデザインシステム（スタイル + 色 + タイポグラフィ + レイアウトパターン + アンチパターン）を生成します。

コア機能

1. インテリジェントデザインシステムジェネレーター (v2.0 フラッグシップ)

推論エンジンは、以下を横断してマルチドメイン並列検索を実行します。

161の製品/業界カテゴリ → レイアウトパターンにマッチ
67のUIスタイル → BM25スコアリングでランク付け
161のカラーパレット → 業界に適した選択肢
57のフォントペアリング → 性格に合わせたタイポグラフィ
24のランディングページパターン → コンバージョン最適化された構造

出力は、推奨されるパターン、スタイル、色、タイポグラフィ、主要なエフェクト、回避すべきアンチパターン、および配信前チェックリストを含む、完全に構造化されたデザインシステムです。

2. 67のUIスタイル

3つのカテゴリにわたる、モダンでニッチなデザイン美学の全範囲をカバーします。

49の一般スタイル: グラスモーフィズム、ニューモーフィズム、ブルータリズム、クレイモーフィズム、ベントグリッド、ダークモード、AIネイティブUI、サイバーパンク、ヴェイパーウェイヴ、ピクセルアート、空間UI (VisionOS) など。
8つのランディングページスタイル: ヒーロー中心、コンバージョン最適化、機能豊富なショーケース、ストーリーテリング主導など。
10のBI/分析ダッシュボードスタイル: データ密度、エグゼクティブ、リアルタイム監視、金融、セールスインテリジェンスなど。

3. 161の業界固有の推論ルール

ルールは、以下を含む垂直分野をカバーします。

テック＆SaaS、フィンテック、ヘルスケア、Eコマース、クリエイティブエージェンシー、ライフスタイルアプリ、新興技術（Web3、空間コンピューティング、量子）、その他多数。

各ルールは、推奨レイアウトパターン、スタイル優先度、カラーのムード、タイポグラフィのムード、主要なアニメーション/エフェクト、および明示的なアンチパターン（例：「銀行アプリにAIパープル/ピンクのグラデーションは使用しない」）をエンコードします。

4. 99のUXガイドライン

レスポンシブ、ホバーステート、フォーカスインジケーター、減速モーションサポート、コントラスト比をカバーするベストプラクティス、アクセシビリティ標準（WCAG AA）、およびアンチパターン。

5. マルチスタックサポート (15 テックスタック)

React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel。

6. デザインシステム永続化 (マスター + オーバーライドパターン)

階層的なデザインシステムを design-system/MASTER.md に生成して永続化し、design-system/pages/ の下にページごとのオーバーライドファイルを生成します。これにより、セッション間および同じプロジェクトのページ間で一貫したデザイン言語が保証されます。

仕組み

ユーザーリクエスト
    │
    ▼
マルチドメイン検索 (5つの並列検索)
    │
    ▼
推論エンジン (BM25ランキング + JSON条件ルール)
    │
    ▼
完全なデザインシステム出力
(パターン + スタイル + 色 + タイポグラフィ + エフェクト + アンチパターン + チェックリスト)
    │
    ▼
AIが完全なデザインコンテキストでコードを生成

インストール

Claude Marketplace経由 (Claude Code)

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

CLI経由 (推奨 — すべてのAIアシスタントをサポート)

npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai copilot     # GitHub Copilot
uipro init --ai all         # サポートされているすべてのアシスタント

サポートされているAIアシスタント: Claude Code、Cursor、Windsurf、Antigravity、GitHub Copilot、Kiro、Codex CLI、Qoder、Roo Code、Gemini CLI、Trae、OpenCode、Continue、CodeBuddy、Droid (Factory)、KiloCode、Warp、Augment。

前提条件: Python 3.x (検索/推論スクリプトに必要)。

使用方法

インストール後、UI/UXリクエストを行うとスキルが自動的にアクティブになります。

SaaS製品のランディングページを作成してください
ヘルスケア分析用のダッシュボードを作成してください
ダークモードでポートフォリオウェブサイトをデザインしてください
Eコマース用のモバイルアプリUIを作成してください
ダークテーマのフィンテック銀行アプリを作成してください

ワークフローモードを使用するプラットフォームの場合 (Kiro、Copilot、Roo Code):

/ui-ux-pro-max SaaS製品のランディングページを作成してください

プロジェクト構造

src/ui-ux-pro-max/
├── data/*.csv          # 知識ベース (スタイル、色、フォント、ルール)
├── scripts/*.py        # 検索エンジン & デザインシステム推論
└── templates/          # プラットフォーム固有の設定テンプレート

cli/                    # CLIインストーラー (テンプレートからファイルを生成)
.claude/skills/         # Claude Codeのローカルインストールパス
docs/                   # ドキュメント
preview/                # UIプレビューアセット

なぜ重要なのか

ほとんどのAIコーディングアシスタントは、永続的で構造化されたデザイン知識を欠いています。この様な注入されたスキルがないと、それらは一般的で一貫性のない、または「AIらしい」UIパターンにデフォルトします。UI UX Pro Maxは、以下によってこれを解決します。

コード生成が開始される前にデザイン決定を標準化します。
一般的な間違いを防ぐために業界固有のアンチパターンをエンコードします。
単一のCLIインストーラーを介して、すべての主要なAIコーディングプラットフォームで動作します。
マルチページプロジェクトのセッション間でデザインシステムを永続化します。

これは実質的に、AIアシスタントに組み込まれたシニアUI/UXデザイナーとして機能します。