UI UX Pro Maxとは｜v2.15.0のデータ中身を実測して分かった使い方と注意点

Claude CodeやCursorに「ログイン画面を作って」と頼むと、動くものは出てくる。でも配色は素人っぽく、業種の空気に合っていない——UI UX Pro Max（ユーアイ・ユーエックス・プロマックス）は、この問題に「AIへ渡すデザインの判断材料をローカルのデータベースとして持たせる」という方法で答えるMITライセンスのAIスキルです。GitHubで120,606スター（2026年8月25日時点）を集めており、Claude Code本体の使い方から整理したい方はClaude Code｜2026年版・インストールからCLAUDE.md・Hooks・本番運用までの実装手引きを先に読むと、スキルという仕組みの位置づけが掴めます。

この記事は、日本語の既存解説が軒並み引用している「67スタイル・161配色・161業種ルール」という数字がすでに2世代前のものだという発見から出発しています。最新のv2.15.0を実際にクローンし、同梱CSVを1行ずつ数え、検索スクリプトを走らせて確認しました。結果として、①何が入っているのか（公称13項目は実測と完全一致）、②何を解決するのか（「AI紫グラデ」は全面禁止ではなく192製品タイプ中14件の文脈ルール）、③何に注意すべきか（npmパッケージ名の罠、READMEが案内するのにCLIが受け付けない --ai ターゲット、再現しないREADME出力例）が分かります。

UI UX Pro Maxとは——AIに渡すのは「絵」ではなく「判断材料」

UI UX Pro Maxは、AIコーディングアシスタントに読み込ませて使うデザイン知能のスキルです。画像もコードも生成しません。生成するのはその一歩手前、「どう作るべきか」の設計図です。

ここが理解の勘所で、正体はCSVの束とPythonの検索スクリプトです。リポジトリを覗くと .claude/skills/ui-ux-pro-max/data/ に18個のCSV/JSONが並んでおり、AIはこれを検索して設計判断の根拠にします。LLMの記憶に頼らず、ローカルの構造化データから引くという設計です。

この構造には実用上の利点があります。外部依存がゼロで、標準ライブラリだけで動きます。実測した実行環境と所要時間は次のとおりです。

・検証環境：macOS 14.5 / Python 3.14.4 / リポジトリ main（v2.15.0時点）
・依存パッケージ：なし（argparse json sys io のみ）
・--design-system 1回の実行時間：0.14秒

APIキーもネットワークアクセスも要らないため、オフラインでも動き、社内ネットワークの制約下でも導入しやすい構成です。

「知らないことは知らないと言わせる」設計になっている

このスキルで感心したのは、該当データが無いときの振る舞いです。AIにデータベースを渡す仕組みで最も怖いのは、ヒットしなかったときにLLMが平然と埋め合わせて、それらしい嘘を出力することです。

そこで対照群として、絶対にヒットしないクエリを2種類投げてみました。デタラメな文字列と、UIとは無関係なインフラ用語です。

$ python3 .claude/skills/ui-ux-pro-max/scripts/search.py "zzzqxwv nonsense token" --domain style
**Domain:** style | **Found:** 0 results

No matches. This is not a match with an empty value -- the query did not hit
the database. Retry with broader/different keywords before falling back to
general defaults, and say explicitly that no database match was found if you
do fall back.

どちらも0件で、しかもAIに対する指示文が一緒に返ります。「これは空値がヒットしたのではなくデータベースに当たらなかったのだ」「一般論で埋めるなら、データベースに一致が無かったと明示せよ」という趣旨です。近いものを無理やり返さず、黙って埋めることも許さない設計になっています。

一方で、単純なタイポには寛容でした。buton contrast（buttonのスペルミス）は正しく3件を返します。「綴り間違いは救うが、無関係な問い合わせは救わない」という線引きです。

SKILL.md 側にも同じ思想が明文化されており、空振り時は「1回だけ狭めて再試行し、それでも駄目なら検証済みの一致が無かったと述べ、一般的な指針はフォールバックとして明示せよ。検証されていない出力を永続化するな」と指示されています。データの正確さ（前述の13項目一致）と合わせて、この棄権の作法はこのスキルの信頼性を支えている部分です。

インストール：npmパッケージ名を間違えると7か月前のデータが入る

導入経路は2つあります。Claude Codeのマーケットプレイス経由と、npm CLI経由です。

# 経路1: Claude Code のマーケットプレイス（Claude Code 内で実行）
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

CLI経由なら他のAI環境にも入れられます。パッケージ名は ui-ux-pro-max-cli、コマンド名は uipro です。この不一致が後述する事故の原因になります。

# 経路2: npm CLI（Claude Code 以外にも導入可能）
npm install -g ui-ux-pro-max-cli

cd /path/to/your/project
uipro init --ai claude       # Claude Code
uipro init --ai cursor       # Cursor
uipro init --ai universal    # Agent Standard (.agents/skills/)
uipro init --ai all          # 全環境へ一括

# 全プロジェクトで使う場合は --global（~/.claude/skills/ へ配置）
uipro init --ai claude --global

--ai が受け付ける環境は20種類あり、Claude Code・Cursor・Windsurf・Antigravity・GitHub Copilot・Kiro・Codex CLI・Qoder・Roo Code・Gemini CLI・Trae・OpenCode・Continue・CodeBuddy・Droid（Factory）・KiloCode・Warp・Augment・CodeWhale・universalが並びます。ただしREADMEの同じ一覧には openclaw（OpenClaw）の1行が加わって計21環境になっており、この1つだけは公開版CLIが受け付けません。

READMEに載っている --ai openclaw は公開版CLIが受け付けない

2026年8月24日、READMEのCLI初期化コマンド一覧に uipro init --ai openclaw の1行が追記されました。一方、2026年8月25日時点で公開されているCLIは v2.15.0（2026年8月13日公開） で、README追記の11日前のビルドです。実際に走らせると弾かれます。

# 公開版CLIを固定バージョンで入れて試す
npm install [email protected]
npx uipro init --ai openclaw

# Invalid AI type: openclaw
# Valid types: claude, cursor, windsurf, antigravity, copilot, roocode, kiro,
#              codex, qoder, gemini, trae, opencode, continue, codebuddy,
#              droid, kilocode, warp, augment, codewhale, universal, all

「openclawだけ特別な扱いを受けている」のではないことは、対照群で確かめられます。実在しないデタラメな値（bogusxyz）を渡すと一字一句同じメッセージが返り、両者はCLIから見て区別されていません。openclawは単に未対応の値として扱われています。

弾かれる原因はテンプレートの不足ではなく、その手前の値の検証です。CLIのソース cli/src/types/index.ts の AI_TYPES は、公開タグ v2.15.0 でも開発中の main でも20種類（＋all）のままで、openclawは入っていません。テンプレート不足が原因でないことは --ai antigravity で確認できます。cli/assets/templates/platforms/ に antigravity.json というファイルは存在しませんが、uipro init --ai antigravity は正常に完了し .agents/ 配下へスキルを展開しました（--ai claude を陽性対照として同時に実行し、こちらは .claude/ へ展開されることを確認済み）。

つまり同じ「openclaw対応」でも、ドキュメント・ソース・公開バイナリの3面で状態が違います。

旧パッケージ uipro-cli を掴んでいないか確認する

ここが実務上いちばん事故りやすい点です。npmには uipro-cli という紛らわしい旧パッケージが今も生きており、README自身が「古い uipro-cli のリリースは陳腐化しているので現行アセットには使うな」と警告しています。

問題は、日本語圏の解説記事の一部が今も npm install -g uipro-cli を案内していることです。両パッケージの実測値（2026年8月25日取得、月間ダウンロードは2026-07-25〜08-23の30日窓）を並べると差は歴然でした。

旧パッケージは更新が7か月止まっているにもかかわらず、月2.3万件のダウンロードが残っています。全体の約20%が古い世代のデータを掴んでいる計算です。自分がどちらを入れたかは次のコマンドで確認できます。

# どちらのパッケージが入っているか
npm ls -g --depth=0 2>/dev/null | grep -E "uipro-cli|ui-ux-pro-max-cli"

# 旧パッケージが出たら入れ替える
npm uninstall -g uipro-cli && npm install -g ui-ux-pro-max-cli

# 導入済みスキルのデータ世代を確認（192 なら v2.15.0 世代）
wc -l < ~/.claude/skills/ui-ux-pro-max/data/products.csv

最後のコマンドで 192（ヘッダ込みで193行）が返れば現行世代です。161前後なら古い世代を掴んでいます。

UI UX Pro Maxの中身をv2.15.0で実測する——公称13項目はすべて一致した

このリポジトリは data/catalog-summary.json という「自己申告のカタログ」を同梱しており、verifiedAt: 2026-08-13 として各データの件数を宣言しています。宣言と実データが合っているかを1行ずつ数えて確かめました。

結果は、13項目すべてが実測と完全一致でした。

自己申告のカタログが実データと1件も食い違わないのは、率直に言って珍しいことです。データ量を売りにするOSSでは、READMEのバッジだけ更新されて中身が追いついていない例が珍しくないためです。ここは素直に信頼度の高い材料と評価できます。

日本語圏で流通している数字は2世代前

一方で、日本語の既存解説が引用している数字は現行と合いません。本記事の旧版を含め、多くが「67スタイル・161配色・161業種ルール・57フォントペア」と書いています。現行との対応は次のとおりです。

119件のUXガイドラインは、アクセシビリティに最も厚い

「デザイン」を名乗るスキルの中身が意匠寄りなのか実務寄りなのかは、ux-guidelines.csv のカテゴリ分布に表れます。119件を分類した実測値がこちらです。

最多はアクセシビリティの20件で、全体の約17%を占めます。実際の中身も「Color Contrast → 通常テキストは最低4.5:1、低コントラストは不可」といった、検証可能な数値基準として書かれています。対象プラットフォームの内訳は All 62件・Web 47件・Mobile 8件・VisionOS 2件でした。

SKILL.md はこれらに優先順位を明示しており、1位 Accessibility、2位 Touch & Interaction（最小44×44px・8px以上の間隔）、3位 Performance（WebP/AVIF・遅延読み込み・CLS 0.1未満） と続きます。意匠の好みではなく、まずアクセシビリティと操作性から詰めさせる設計です。配色やタイポグラフィは6位に置かれています。

「AIが作るUIがダサい」という入口の課題に対して、実際に効いているのは配色データよりもこの実務ガイドラインの層かもしれません。

見落とされがちな本体：22スタックに紐づく1,260件の実装ガイドライン

カタログの中で最大の量を占めるのは、スタイルでも配色でもなく data/stacks/ 配下の1,260件です。22個のCSVに分かれており、実装フレームワークごとの具体的な指針が入っています。

注目したいのは列構成です。react.csv を開くと Category / Guideline / Description / Do / Don’t / Code Good / Code Bad / Severity / Docs URL / Applies To / Status / Verified At の13列があり、単なる箇条書きではなく良い実装例と悪い実装例のコード片、重大度、公式ドキュメントURL、検証日まで構造化されています。

React・Vue・Angular・Svelte・Astroといったウェブ系だけでなく、SwiftUI・Jetpack Compose・Flutter・React Nativeのモバイル系、WPF・WinUI・UWP・Avalonia・JavaFX・Unoのデスクトップ系まで揃っている点も実用的です。デザインの話に見えて、実装レイヤーのレビュー基準としても引けるのがこのスキルの隠れた本体だと言えます。

# 自分のスタックのガイドラインだけを引く
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react

# 収録スタック一覧と件数を数える
wc -l .claude/skills/ui-ux-pro-max/data/stacks/*.csv | sort -rn | head

「9件のdeprecated」が意味する構造変更

スタイルが88件ありながら「検索可能79件」と表記されるのは、9件が deprecated として検索対象から外れているためです。この9件の中身を見ると、単なる削除ではなく設計上の整理だと分かります。

・Hero-Centric Design → landing/hero-centric-design
・Social Proof-Focused → landing/hero-testimonials-cta
・Conversion-Optimized → landing/funnel-3-step-conversion
・Storytelling-Driven → landing/scroll-triggered-storytelling
・Bento Grids (Legacy) → style/bento-box-grid

9件中8件がランディングページのパターンで、landing ドメイン（34パターン）へ移されています。「スタイル（見た目の様式）」と「ランディングパターン（セクション構成）」が混在していたのを分離した、という変更です。旧世代の数字をそのまま比較すると「スタイルが減った」と誤読しかねない部分です。

「AI紫グラデ」は禁止されていない——192製品タイプ中14件だけの文脈ルール

このスキルの紹介でよく語られるのが「AIが作りがちな紫〜ピンクのグラデーションを潰す」という点です。本記事の旧版もそう書いていました。しかし推論データを実測すると、それは正確ではありません。

ui-reasoning.csv の Anti_Patterns 列を全192行走査したところ、「AI purple/pink gradients」を禁止しているのは14件だけでした。そしてその14件には、はっきりした共通項があります。

14件すべてが「信頼性が売り物」の業種です。銀行・保険・法務・医療・行政——いずれも紫ピンクのグラデーションが「AIで作った軽いサイト」に見えることが、そのままコンバージョンの毀損につながる領域です。禁止の理由が業種文脈にひも付いている、筋の通ったルールだと言えます。

逆に、紫が「推奨色」の製品タイプは20件以上ある

さらに colors.csv を見ると、紫はむしろ積極的に推奨されています。

・AI/Chatbot Platform → Primary #7C3AED（注記は “AI purple + cyan interactions”）
・NFT/Web3 Platform → Primary #8B5CF6（”Purple tech + gold value”）
・AI Photo & Avatar Generator → Primary #7C3AED / Accent #EC4899（”AI purple + generation pink”）
・Gaming → Primary #7C3AED（”Neon purple + rose action”）
・Marketplace (P2P)、Event Management、Membership/Community、Mood Tracker ほか

AI系プロダクトには「AI purple」を名指しで推奨しています。つまりこのスキルの立場は「紫は悪」ではなく、「紫が機能する業種と、信頼を損なう業種を切り分ける」というものです。

美容サロンの例で確かめる

READMEの看板例である美容サロンで実際に走らせると、この設計が体感できます。colors.csv の該当行はこうなっていました。

・Beauty/Spa/Wellness Service → Primary #EC4899（ピンク）／Secondary #F9A8D4／Accent #8B5CF6（ラベンダー）
・注記：“Soft pink + lavender luxury”
・この業種のアンチパターン：Bright neon colors + Harsh animations + Dark mode（紫の禁止は含まれない）

美容サロンでは、ピンク＋ラベンダーというまさに紫ピンク系の配色が正解として提示されます。「AI紫グラデを潰すツール」という理解のままだと、この出力を見て「壊れている」と誤読しかねません。実際にはルールどおりの正しい挙動です。

READMEの出力例は再現しない——だから自分で1回走らせる

READMEの目玉は、”Serenity Spa” というサロンのデザインシステム生成例です。ソフトピンク #E8B4B8、セージグリーン #A8D5BA、ゴールド #D4AF37、フォントは Cormorant Garamond / Montserrat——という美しい出力例が大きく掲載されています。

この出力は再現できませんでした。 同じクエリを現行v2.15.0で実行した結果はこうです。

$ python3 .claude/skills/ui-ux-pro-max/scripts/search.py "Serenity Spa" --design-system

PATTERN:    Hero + Testimonials + CTA
COLORS:     Primary #EC4899 / Secondary #F9A8D4 / Accent #8B5CF6
            Background #FDF2F8 / Foreground #831843
            Notes: Soft pink + lavender luxury
TYPOGRAPHY: Playfair Display / Inter

配色もフォントもパターン名も、READMEの記載と一致しません。そこで「READMEが古いだけではないか」を確かめるため、この例を導入した当のバージョン v2.0.0（2026年1月16日のコミット d5fbbfd で追加）まで遡って同じ検証を行いました。

v2.0.0でも配色・フォントは一致しません（パターン名だけが一致）。さらに決定的なのは、#E8B4B8 という色コードがv2.0.0のデータファイル内に1件も存在しないことです。現行v2.15.0でも、この色は「Vintage Analog / Retro Film」という無関係なスタイル行に1回出てくるだけで、美容サロンの配色としては登録されていません。

つまりREADMEの看板例は、プログラム出力のキャプチャではなく、手で書き起こしたイメージ図と考えるのが妥当です。v2.0.0の実出力の注記欄には “Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents” という散文があり、README例の「ピンク／セージ／ゴールド」という配色の言葉はここに由来していますが、構造化されたHEX値としては一度も出力されていません。

なお、READMEのパターン名 “Hero-Centric + Social Proof” は前述のdeprecated 9件に含まれる旧スタイル名です。README例が世代交代に追随していないことの傍証になっています。

UI UX Pro Maxと他のデザイン系スキルの比較と使い分け

Claude Code向けのデザイン系スキルは複数あり、狙いが異なります。当サイトで扱ってきたものと並べると、UI UX Pro Maxの立ち位置がはっきりします。

UI UX Pro Maxの特徴は、「思想」ではなく「引ける表」を提供する点にあります。taste-skillやHallmarkが「AIらしい安易な意匠を拒む判断基準」を与えるのに対し、UI UX Pro Maxは「美容サロンならこの配色・このフォント・この構成」という具体値を返します。両者は競合せず、併用が自然です。規範系スキルで下限を守りつつ、UI UX Pro Maxで初稿の具体値を得る、という組み合わせが噛み合います。

チーム内でデザイン意図を文書として共有したい場合は、awesome-design-md-jp とは｜日本語UI向けDESIGN.md集と本家との違い で扱ったDESIGN.md方式が補完関係になります。

導入を判断する材料

★120,606という数字は、2025年11月30日作成のリポジトリとしては極端に大きく、star数だけでは実利用の裏付けになりません。そこで独立した利用シグナルとしてnpmの実ダウンロード数を確認しました。

・ui-ux-pro-max-cli 月間ダウンロード：90,267（2026-07-25〜08-23）
・パッケージ公開は2026年6月26日、公開バージョン17本
・直近3か月の推移：6月 18,279 → 7月 103,027 → 8月（25日まで）69,633

CLI公開から2か月弱で月9万件超という数字は、star数に依存しない実利用の裏付けとして十分な水準です。star数だけを見ると、Watch 500・Fork 12,942・作成2025年11月30日という比率は一般的な大規模OSSの傾向とは異なるため、導入判断の材料としてはダウンロード実数のほうを重く見るのが妥当でしょう。

加えて開発の活発さも実測できます。最新リリースはv2.15.0（2026年8月13日）、直近のpushは2026年8月25日、オープンなIssueは42件（ほかにオープンなPull Requestが45件）と、更新は継続しています。v2.15.0のリリースノートによれば、この版ではBM25ルーティングと棄権処理の作り直しに加え、12ドメイン・22スタックにわたる90ケースの評価コーパスが追加されており、検索品質を回帰テストで担保する方向に進んでいます。ライセンスはMITで、商用利用の制約もありません。

向いているのは次のようなケースです。

・業種が決まっているプロダクトの初稿を短時間で立ち上げたい
・デザイナーが不在で、配色やフォントの根拠を持てないまま実装している
・複数画面で意匠がばらつくのを、共通のデザインシステムで抑えたい
・オフライン環境・APIキー不要という制約下で導入したい

逆に、確立したブランドガイドラインが既にある場合、このスキルの出力は競合します。その場合は配色を自社トークンで上書きし、UXガイドライン119件や納品前チェックリストの部分だけを使う、という切り出し方が現実的です。

まとめ

UI UX Pro Maxは、AIに「デザインの判断材料」をローカルCSVとして渡すスキルです。v2.15.0を実測した結論として、データの中身は信頼できる（自己申告カタログ13項目が実データと完全一致）一方、READMEの記述と、日本語圏で流通している数字は追随していないという非対称がありました。再現しない出力例に加えて、READMEだけが先に案内している --ai openclaw も、2026年8月25日時点では公開版CLIが受け付けません。

導入したら、まず自分の業種名で --design-system を1回走らせてみてください。そこで出た配色とアンチパターンが、このスキルがあなたのプロジェクトに何を持ち込むかの正確な答えになります。AIらしい安易な意匠そのものを断つ考え方はtaste-skillとは｜AIが量産する”そっくりUIスロップ”を止めるアンチスロップ・スキルの設計思想と使い方が、規範として下限を守らせる方法はHallmark デザインスキル解説｜AI slopを拒みClaude Code・Cursorで使うが、それぞれ補完してくれます。

参照ソース

・nextlevelbuilder/ui-ux-pro-max-skill (GitHub) — 公式リポジトリ。README・同梱データCSV・検索スクリプトの一次ソース。本記事の実測はmain（v2.15.0時点）のクローンに対して実施。
・ui-ux-pro-max SKILL.md（スキル定義） — スキルの起動条件・検索クエリ契約・優先度10カテゴリを定義した一次ソース。
・Release v2.15.0 — 79スタイル（active 50・supplemental 29）・192製品タイプ・119 UXガイドライン・1,260スタック別ガイドラインへの更新を記載した一次ソース。
・ui-ux-pro-max-cli (npm) — 正規のCLIパッケージ。バージョン・公開日・ダウンロード数の実測に使用。
・cli/src/types/index.ts（CLIのAI_TYPES定義） — --ai が受け付ける値の一次ソース。openclawが含まれないことの確認に使用。