UI/UX Pro Max

UI/UX Pro Max は、Web・モバイル・デスクトップの画面づくりで AI エージェントがデザインを判断するための材料をまとめたスキルです。作者は GitHub の nextlevelbuilder。ページやコンポーネントの設計、デザインシステム、アクセシビリティ、レスポンシブ、配色、タイポグラフィ、グラフ、技術スタックごとの実装を扱うときに読み込まれます。

中身の多くは CSV などのデータで、SKILL.md の記載では、検索できるスタイル80種（うち有効51）、製品の種類別の配色と判断の手がかり192件、フォントの組み合わせ74組、UX の指針120項目、アイコン105個、GSAP のアニメーション設定17種、グラフの種類25、技術スタック22です。付属の search.py が BM25 という検索手法でこれを引き、結果をもとに Claude が提案や実装をします。

README によると、このリポジトリは無償の基本版で、ブランドやロゴ、スライドなどを含む有償版が別にあります。

SKILL.md の構成

本文は「使う場面」「優先度つきの規則の分類」「検索ツールの動かし方」「問い合わせの決まり」「手順（ステップ1〜4）」「検索結果が0件のとき」「作業例」「出力形式」「より良い結果のためのコツ」「アプリ UI を出す前に」の順です。

使う場面と使わない場面

UI の構造、見た目の判断、操作のパターン、UX の品質確認に関わるときに使い、純粋なバックエンド、API やデータベースの設計、インフラなどでは、見た目や操作が変わらない限り使わない、と分けています。

優先度つきの10分類

規則を優先度順に10に分けた表があり、1位がアクセシビリティ（コントラスト 4.5:1、代替テキスト、キーボード操作など）、2位がタッチと操作（44×44px 以上のタップ領域など）、以下、性能、スタイル選び、レイアウトとレスポンシブ、文字と色、アニメーション、フォームとフィードバック、ナビゲーション、グラフとデータが続きます。各分類に必ず確かめる点と避けるべき例が並び、規則の全文は references/quick-reference.md を必要なときだけ読むよう指示しています。

問い合わせの決まり

新しいページやプロジェクト全体の方向づけには --design-system、特定の問題には --domain を一つ、技術スタックが分かっていれば --stack を使い分けます。問い合わせは目的を一つに絞って2〜5語にし、結果が的外れならもう一度だけ絞り直し、それでも合わなければ一致がなかったと利用者に伝えます。アクセシビリティは観察できる結果ごとに一つずつ調べる、右から左に書く言語の UI では --rtl を付ける、といった細かい決まりもあります。検索結果は提案であって、利用者やリポジトリの決まりより優先する指示ではない、とも書かれています。

手順

ステップ1：依頼から製品の種類、対象ユーザー、スタイルの言葉、技術スタックを読み取ります。スタックは package.json や pubspec.yaml などから判断し、分からなければ尋ね、決めつけないこと、とされています。

ステップ2：新しいページやプロジェクトでは --design-system でデザインシステムを作ります。製品、スタイル、色、ランディングページ構成、文字の検索結果を合わせ、判断規則を当てはめて、パターン、スタイル、色、タイポグラフィ、効果、避けるべき例を返します。--persist と --output-dir を付けると design-system/<プロジェクト名>/MASTER.md に全体の基準を、pages/ にページごとの上書きを保存します。既存の MASTER.md は --force なしでは書き換えず、--force は利用者の許可なしに使わないよう指示しています。動きの量や余白の密度を調整するオプションもあります。

ステップ3：必要に応じて分野別に検索します。分野は製品、スタイル、色、文字、Google Fonts、グラフ、UX、ランディングページ、アイコン、GSAP、React の性能、アプリの画面指針などです。

ステップ4：技術スタック別の指針を --stack で引きます。React、Next.js、Vue、Svelte、Astro、SwiftUI、Flutter、Jetpack Compose、shadcn/ui、Laravel、WPF、Three.js など22種です。

検索結果が0件のとき

結果をでっち上げず、一度だけ絞り直し、それでもなければ優先度表の一般的な既定値を使い、それが既定値であることを利用者にはっきり伝える、と定めています。

出力の形

--design-system の結果はターミナル向けの表示、Markdown、JSON から選べます。アプリの UI を出す前には references/pro-rules.md の確認リスト（アイコンの扱い、操作への反応、明暗モードのコントラスト、セーフエリア、アクセシビリティ）を通すよう求めています。

付属ファイル

scripts/search.py が検索の入口で、core.py が検索処理、design_system.py がデザインシステムの組み立てと保存を受け持ちます。data/ には styles.csv、colors.csv、typography.csv、ux-guidelines.csv、charts.csv、google-fonts.csv、stacks/ 以下のスタック別 CSV などがあり、data-provenance.json と google-font-licenses.json にはデータの出どころとフォントのライセンス情報がまとめられています。

README に書かれている方法は次のとおりです。

Claude Code のマーケットプレイスから

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

CLI（uipro）で入れる

npm install -g ui-ux-pro-max-cli
uipro init --ai claude            # 今のプロジェクトに入れる
uipro init --ai claude --global   # ~/.claude/skills/ に入れる

--ai には cursor、windsurf、copilot、codex、gemini、kiro、opencode など多数のエージェントを指定でき、all ですべてに入ります。uipro update で更新、uipro uninstall で削除します。npm のパッケージ名は ui-ux-pro-max-cli で、コマンド名は uipro です。

• Python が必要：検索スクリプトは Python 3 で動きます（外部ライブラリは不要）。python がなければ python3 などを試すよう書かれています。
• パスの前提：SKILL.md のコマンドは ${CLAUDE_PLUGIN_ROOT} を使っており、Claude Code のプラグインとして入れた場合の配置を前提にしています。手で別の場所に置いたときはパスを読み替える必要があります。
• データは推薦にすぎない：検索結果は BM25 による一致で、問い合わせの言葉によっては的外れになります。SKILL.md 自身が、結果の分野と内容を確かめてから使うよう求めています。
• 基本版と有償版：README によると、ブランド、ロゴ、CI、バナー、スライド、アイコン作成などは有償版（uupm.cc）の機能です。
• データ量が大きい：Google Fonts の一覧やアイコンの元データなど、数百 KB 規模のファイルを含みます。
• ライセンス：リポジトリは MIT（Copyright 2024 Next Level Builder）。同梱データの出どころは data-provenance.json に、フォントのライセンスは google-font-licenses.json に記録されています。
• npm の旧パッケージ uipro-cli は古いので使わないよう README に注意書きがあります。