まず、このプロジェクトのスター数を見てほしい
GitHub スター数：
フォーク数：
そのスターの伸び方がこちらです（クリックするとリアルタイムグラフが開きます）：
リリースからほぼ垂直に伸びているのが分かります。
なぜこれほど注目されているのか——今回の記事で、その仕組みと Codex CLI での使い方を丁寧に解説します。
はじめに
Codex CLI で UI を作るとき、こんな経験はありませんか？
- 何度プロンプトを書いても「いかにも AI が作った感」のデザインが出てくる
- 業種に合った配色やフォントを、毎回自分で考えてプロンプトに書き込まなければならない
- 「透明感のある最新スタイルにして」と言っても、業種とまったく合わないデザインが返ってくる
- 「銀行アプリなのに派手なパープルのグラデーション」みたいな的外れなデザインが頻発する
こうした悩みをまるごと解決しようとしているのが、ui-ux-pro-max-skill です。
この記事で分かること
-
ui-ux-pro-max-skillが何を解決しているのか - デザインシステム自動生成の仕組み（推論エンジン）
- Codex CLI への導入方法と実際の使い方
- 67 種UIスタイル・161 業種ルール・57 フォントペアの意味
- このスキルから学べる「AI スキル設計」の考え方
対象読者
- Codex CLI をメインで使っている開発者
- UI/UX の品質を上げたいけど、デザイン専門家ではない
- AI スキルの設計・仕組みに興味がある
- 「プロっぽい UI を素早く作りたい」すべての人
まず結論：ui-ux-pro-max-skill は何をするのか
一言でいうと：
AI に「プロ級のデザイン判断力」を与えるための知識ベース + 推論エンジン
単なるスタイルサンプル集ではありません。やっていることは大きく 3 つです。
1. プロジェクト内容を分析してデザインシステムを自動生成する
「医療系 SaaS のダッシュボードを作って」とだけ言えば、最適なカラーパレット・フォントペア・UIスタイル・避けるべきアンチパターンをまとめて提案してくれます。
2. 161 業種に対応した推論ルールを持つ
SaaS・医療・金融・EC・ポートフォリオなど、161 種類の業種ごとに「どのスタイルが合うか」「何を避けるべきか」まで細かく定義されています。
3. Codex CLI を含む 18 以上のAIツールに対応
Codex では UI/UX リクエストをするだけでスキルが 自動アクティブ化されます。コマンドやスラッシュ指定は不要です。
デザインシステム自動生成の仕組み
v2.0 から搭載された Design System Generator がこのスキルの核心です。
たとえば「美容スパのランディングページを作って」と Codex に伝えると、次のような出力が得られます：
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |
+----------------------------------------------------------------------------------------+
| |
| PATTERN: Hero-Centric + Social Proof |
| Conversion: Emotion-driven with trust elements |
| CTA: Above fold, repeated after testimonials |
| |
| STYLE: Soft UI Evolution |
| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |
| Performance: Excellent | Accessibility: WCAG AA |
| |
| COLORS: |
| Primary: #E8B4B8 (Soft Pink) |
| Secondary: #A8D5BA (Sage Green) |
| CTA: #D4AF37 (Gold) |
| Background: #FFF5F5 (Warm White) |
| Text: #2D3436 (Charcoal) |
| |
| TYPOGRAPHY: Cormorant Garamond / Montserrat |
| Mood: Elegant, calming, sophisticated |
| |
| AVOID (Anti-patterns): |
| 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 |
| [ ] prefers-reduced-motion respected |
| [ ] Responsive: 375px, 768px, 1024px, 1440px |
+----------------------------------------------------------------------------------------+
スタイル・配色・フォント・チェックリストまで、一発で揃います。
推論エンジンの処理フロー
内部では次の 4 ステップが走っています：
1. リクエスト受信
"Build a landing page for my beauty spa"
│
▼
2. マルチドメイン並列検索
・プロダクト分類（161カテゴリ）
・スタイル推薦（67スタイル）
・カラーパレット選択（161パレット）
・LPパターン（24パターン）
・フォントペアリング（57組）
│
▼
3. 推論エンジン（BM25ランキング）
・プロダクト → UIカテゴリのルール適用
・業種のアンチパターンをフィルタ
・JSONの条件ルールを処理
│
▼
4. 完全なデザインシステムを出力
パターン + スタイル + カラー + タイポグラフィ +
エフェクト + アンチパターン + 事前チェックリスト
ポイントはステップ3の推論エンジンです。単純なキーワードの一致ではなく、検索エンジンでも使われるランキングアルゴリズム（BM25）で候補に重みをつけて選択します。「wellness」「calming」「premium」といった言葉の組み合わせを総合的に判断して、最も適したスタイルを決めます。
161 業種対応の推論ルール
| カテゴリ | 対応業種の例 |
|---|---|
| Tech & SaaS | SaaS、Micro SaaS、B2Bサービス、開発ツール、AI/チャットボット、サイバーセキュリティ |
| Finance | フィンテック/仮想通貨、銀行、保険、家計管理、請求書ツール |
| Healthcare | クリニック、薬局、歯科、獣医、メンタルヘルス |
| E-commerce | 一般EC、高級品、マーケットプレイス、サブスク、フードデリバリー |
| Services | 美容/スパ、レストラン、ホテル、法律、ホームサービス |
| Creative | ポートフォリオ、エージェンシー、写真、ゲーム、音楽ストリーミング |
| Lifestyle | 習慣トラッカー、レシピ、瞑想、天気、日記、気分トラッカー |
| Emerging Tech | Web3/NFT、空間コンピューティング、量子コンピューティング |
各ルールには次の情報が含まれています：
- Recommended Pattern — ランディングページの構造
- Style Priority — 最適な UIスタイル（BM25スコア順）
- Color Mood — 業種に合ったカラーパレット
- Typography Mood — フォントの雰囲気
- Key Effects — アニメーションとインタラクション
- Anti-Patterns — やってはいけないこと（例：銀行系なら「AIパープルのグラデーション禁止」）
67 種の UIスタイル（一部抜粋）
スタイル名は英語のデザイン用語ですが、それぞれ「どんな見た目か」「どんなサービスに合うか」がルールとして定義されています。
| スタイル | 見た目のイメージ | 最適な用途 |
|---|---|---|
| Minimalism & Swiss Style | 余白多め・シンプルで整然とした画面 | エンタープライズアプリ、ダッシュボード |
| Neumorphism | 柔らかい影で浮き出て見える立体的なUI | ヘルス/ウェルネス、瞑想アプリ |
| Glassmorphism | 半透明のすりガラス風パネルを重ねた画面 | 現代的SaaS、金融ダッシュボード |
| Brutalism | 大胆な黒枠・不規則なレイアウトで個性を主張 | デザインポートフォリオ |
| Claymorphism | 粘土細工のようなふっくらした丸みのあるUI | 教育アプリ、子ども向け |
| Liquid Glass | 光沢感・高級感のあるガラス素材風 | プレミアムSaaS、高級EC |
| Neubrutalism | シンプルさと太い枠線・ポップな色の組み合わせ | Gen Zブランド、スタートアップ |
| Bento Box Grid | お弁当箱のようにカードをグリッド状に並べた画面 | ダッシュボード、プロダクトページ |
| AI-Native UI | チャット・ストリーミング・サジェストが前面に出るUI | AIプロダクト、チャットボット |
| Spatial UI (VisionOS) | 奥行きと浮遊感のある3D的なレイアウト | 空間コンピューティング |
スタイルを自分で選ぶ必要はありません。業種やプロジェクト内容をプロンプトに書くだけで、推論エンジンが最適なスタイルを自動選択します。
LPスタイル 8 種・BI/分析ダッシュボードスタイル 10 種も内包されており、合計 67 種が用意されています。
Codex CLI への導入方法
前提条件
Python 3.x が必要です（スキルの検索スクリプトが Python で動きます）。
# バージョン確認
python3 --version
# Ubuntu/Debian（WSL含む）
sudo apt update && sudo apt install python3
# macOS
brew install python3
# Windows
winget install Python.Python.3.12
インストール手順
# CLI をグローバルインストール
npm install -g uipro-cli
# プロジェクトへ移動
cd /path/to/your/project
# Codex CLI 向けにインストール
uipro init --ai codex
これで .codex/ 配下にスキルファイルが展開されます。
その他の便利なコマンド
uipro versions # 利用可能なバージョン一覧
uipro update # 最新バージョンに更新
Codex CLI での実際の使い方
基本：自動アクティブ化
Codex は Skill Mode（自動アクティブ化） に対応しています。
特別なコマンドは不要です。UI/UX に関するリクエストをするだけでスキルが起動します：
# これだけでOK。スキルが自動で起動する
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
Codex がリクエストの UI/UX 文脈を検出し、自動的にスキルのワークフローを実行します。
スタックを指定する
プロンプトにスタックを明記すると、そのフレームワーク向けのガイドラインが適用されます：
Build a SaaS dashboard with React and Tailwind
Create a landing page using Next.js and shadcn/ui
Design a mobile UI with React Native
何も指定しない場合は HTML + Tailwind がデフォルトです。
実践例：SaaS ダッシュボード
Build a B2B SaaS analytics dashboard
with dark mode, data-dense layout, and React.
Focus on subscription metrics.
このリクエストを送ると、スキルは自動的に：
- 「B2B SaaS」→ Tech & SaaS カテゴリに分類
- Data-Dense Dashboard スタイルを選択
- 業種に合ったカラーパレット（インディゴ系ダークカラー）を選択
- 「AI パープルのグラデーション」はアンチパターンとして排除
- 事前納品チェックリストを含めて出力
という処理を内部で実行します。
デザインシステムコマンド（Codex 上級活用）
Codex に任せるだけでなく、コマンドラインから直接デザインシステムを生成することもできます。
スキルのスクリプトは .codex/skills/ui-ux-pro-max/scripts/ にインストールされています。
# デザインシステムを ASCII 形式で生成
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "SaaS B2B analytics" --design-system -p "MyApp"
# Markdown 形式で出力
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# ドメイン別検索
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
# スタック別ガイドライン
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
デザインシステムを永続化する（プロジェクト全体で再利用）
長期プロジェクトでは、デザインシステムをファイルとして保存しておくことで、セッションをまたいで一貫性を保てます：
# MASTER.md として保存
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
# ページ固有のオーバーライドも作成できる
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
生成されるフォルダ構造：
design-system/
├── MASTER.md # グローバル設計システム（色・タイポグラフィ・スペーシング）
└── pages/
└── dashboard.md # ページ固有のオーバーライド
Codex に渡すプロンプトもシンプルに書けます：
I am building the Dashboard page.
Please read design-system/MASTER.md.
Also check if design-system/pages/dashboard.md exists.
If the page file exists, prioritize its rules.
Now, generate the React component...
内部アーキテクチャ：なぜこの設計が強いのか
データ構造
スキルのデータはすべて CSV ファイルで管理されています：
src/ui-ux-pro-max/
└── data/
├── products.csv # 161業種の分類ルール
├── styles.csv # 67スタイルの定義
├── colors.csv # 161カラーパレット
├── typography.csv # 57フォントペア
├── ui-reasoning.csv # 推論ルール
├── ux-guidelines.csv # 99のUXガイドライン
├── charts.csv # 25チャートタイプ
└── stacks/ # 15スタック別ガイドライン
知識をプロンプトに直接埋め込まず、外部 CSV として管理することで、追加・更新が容易になっています。Skill 設計の手本として参考になる構造です。
検索エンジン（ランキング型ハイブリッド検索）
src/ui-ux-pro-max/
└── scripts/
├── search.py # CLI エントリーポイント
├── core.py # BM25 + 正規表現ハイブリッド検索エンジン
└── design_system.py # デザインシステム生成ロジック
core.py が核心部分です。検索エンジンのランキング手法（BM25）で候補を絞り込み、JSON 条件ルールで最終的な推論をします。「候補をデータから検索→AI が判断」という流れは、AI にあらかじめ知識を与えてから回答させる RAG（検索拡張生成）の考え方と同じです。
このスキルの設計から学べること
1. 知識の外部化
161 ルール・67 スタイル・57 フォントペアという膨大な知識を、AI のプロンプトに直接埋め込まず CSV ファイルとして外部管理しています。新しい業種やトレンドへの対応も、CSV を更新するだけで済みます。
2. アンチパターンの明示
「何をすべきか」だけでなく「何をすべきでないか」まで定義。銀行系 UI に「AI っぽいパープルのグラデーション」を使わないよう明示することで、業種ミスマッチを防いでいます。
3. 事前納品チェックリストの組み込み
デザインシステムの出力に自動で含まれるチェックリスト：
[ ] 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
AI コードの品質担保を「プロンプトの暗記」に頼らず、構造化されたチェックリストで確実に実行させています。
まとめ
ui-ux-pro-max-skill は、スター数 58,000超・急激な伸びが示す通り、現在最も実用的な AI スキルの一つです。
特に Codex CLI ユーザーにとっては：
- インストールは
uipro init --ai codexの一行 - UI リクエストをするだけでスキルが自動起動
- 161 業種のルールが「業種ミスマッチ」を自動排除
- デザインシステムをファイル保存してプロジェクト全体で再利用可能
- 事前納品チェックリストで品質担保が自動化
という恩恵が得られます。
このスキルの本質は一言で言えます：
デザインの判断力をルール化・外部化し、AI が確実に再利用できる形に整理したこと
おわりに
AI による UI 生成の品質が低い多くの場合、原因は AI の能力ではなく「どのスタイルが業種に合うか」「何を避けるべきか」という知識が与えられていないことにあります。
ui-ux-pro-max-skill はその問題を、膨大なルールの外部化と検索ランキング型の推論エンジンの組み合わせで解決しています。
Codex CLI を使っているなら、まず uipro init --ai codex で試してみてください。「いかにも AI っぽいデザイン」から卒業できるはずです。
参考リンク
- GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- 公式サイト: https://uupm.cc
- npm (uipro-cli): https://www.npmjs.com/package/uipro-cli