Codex と Claude Code で UI UX Pro Max を使う方法。
UI UX Pro Max は、GitHub で最もスターの多いデザインスキルのひとつです。決まったスタイルではなく、スタイル、配色、フォントの組み合わせのデータベースを検索して、プロダクトに合うデザインシステムを提案します。このチュートリアルでは、Codex と Claude Code へのインストール、デザインシステムの生成と保存、無個性にならない結果の得かたを紹介します。
2026年11月6日 更新 · 約 7 分で読めます
UI UX Pro Max とは
UI UX Pro Max は、nextlevelbuilder が公開しているオープンソース（MIT ライセンス）のスキルです。バージョン 2.15 には、80 のスタイル、192 のプロダクトタイプ、192 の配色、74 のフォントの組み合わせ、そして React、Next.js、Tailwind、SwiftUI、Jetpack Compose、React Native、Flutter を含む 22 のスタックのガイドラインを収めた、検索できるデータベースが入っています。
エージェントに UI の作業を頼むと、スキルはあなたのプロダクトを検索スクリプトに伝え、スクリプトは推奨のデザインシステムを返します。ページのパターン、スタイル、色、フォント、エフェクト、その業界で避けるべきアンチパターン、公開前に実行するチェックリストです。エージェントはそれをもとに作ります。このスクリプトは Python の標準ライブラリだけを使い、ネットワーク通信は行いません。
インストールする
Python 3 が必要です。python3 --version で確認してください。
Codex（ほかの多くのエージェントも同様）： CLI を一度インストールしてから、プロジェクトにスキルを追加します。
npm install -g ui-ux-pro-max-cli
cd my-project
uipro init --ai codex
Claude Code： プラグインマーケットプレイスを使います。
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
または、uipro init --ai claude で CLI を使います。--global を付けると、すべてのプロジェクトにインストールされます。あとから uipro update でスキルのファイルを更新し、uipro uninstall で削除できます。
頼んで使う
UI の作業を頼むとスキルが自動で動くので、Codex でも Claude Code でも特別なコマンドは要りません。プロダクト、利用者、プラットフォームを具体的に伝えましょう。
[予約注文を受け付ける町のパン屋] のモバイルアプリのホーム画面を作ってください。お客さんは [週末の分を注文する忙しい親] です。ui-ux-pro-max スキルを使って、まずデザインシステムを選んで私に見せ、それから画面を作ってください。
画面の前にデザインシステムを見せてもらうのは、このスキルを使ううえでいちばん役に立つ習慣です。スタイルがすべてのページに作り込まれる前に、却下できるからです。
デザインシステムを直接生成する
検索スクリプトを自分で実行することもできます。スキルのフォルダはエージェントによって異なります。Claude Code では .claude/skills/ui-ux-pro-max/、Codex では .agents/skills/ui-ux-pro-max/ にインストールされます。
# Recommend a design system for a product, named "Crumb"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -p "Crumb"
# The same, as Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -f markdown
# Search one area only: styles, typography, charts, UX rules, icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# Guidelines for a specific stack
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
README の例では、結果の密度、動き、意外性を調整する 3 つのダイヤル、--density、--motion、--variance も使っています。
デザインシステムをすべてのセッションで使えるよう保存する
--persist を付けると結果を design-system/<name>/MASTER.md に書き出し、--page を付けると 1 ページ用の上書きを加えられます。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
それ以降は、どの画面をデザインする前にも MASTER.md を読むようエージェントに頼みます。ほかのツールも使っているなら、色、フォント、余白をプロジェクトのルートの DESIGN.md にコピーして AGENTS.md から参照するよう頼むと、どのエージェントも同じシステムに従います。
既存のアプリのテーマを変える
このスキルは、既存のアプリを書き直さずに新しい見た目にしたいときにも便利です。目指すスタイルを伝え、既存のトークンを通して作業するようエージェントに頼みます。
ui-ux-pro-max スキルを使って、このアプリを [スイス風、ミニマル] な見た目にしてください。まず、使われているフレームワーク、スタイリングのライブラリ、テーマのトークンを一覧にしてください。各コンポーネントの構造と動作はそのままにします。2 つ目のテーマを足すのではなく、既存の色、タイポグラフィ、余白、角の半径、影のトークンを更新し、ハードコードされたスタイルはコンポーネントごとに置き換え、1 バッチごとにコントラスト、フォーカスの状態、ダークモードを確認してください。
無個性にならない結果を得る
- 避けたいものを伝える。 データベースは、ほかのスキルが AI っぽいと指摘するグラスモーフィズムや Aurora UI などの見た目も、普通のスタイルとして扱います。「グラスモーフィズムなし、グラデーションなし、絵文字アイコンなし」のような一文を加えましょう。
- 結果を見る。 このスキルには、ビジュアルでの確認がありません。画面を増やす前に、スマートフォンとデスクトップの幅でページを開くか、いくつかの方向性を横に並べて比べてください。
- スタイルではなく、プロダクトを説明する。 結果は検索に使う言葉で変わります。「モダンでクリーンなアプリ」より「親向けのパン屋の予約注文アプリ」のほうが、よく合うものが見つかります。
- お好みなら、完成したシステムから始める。 私たちのデザインシステムライブラリには、Web 向けとアプリ向けの完成したシステムがあり、DESIGN.md としてエージェントに渡せます。
Taste Skill、Impeccable、Anthropic の frontend-design との比較は、Taste Skill・Impeccable・UI UX Pro Max の比較を参照してください。
よくある質問
UI UX Pro Max は無料ですか？
はい。GitHub リポジトリのスキルは MIT ライセンスのオープンソースで、無料です。README には、ブランド、ロゴ、スライドのツールが加わる Premium 版も書かれていますが、価格は載っていません。
UI UX Pro Max は Codex で使えますか？
はい。npm install -g ui-ux-pro-max-cli で CLI をインストールし、プロジェクトで uipro init --ai codex を実行します。
なぜ Python が必要なのですか？
デザインシステムの検索は、スキルのデータファイルに対して動く小さな Python スクリプトとして実行されます。標準ライブラリだけを使うので、パッケージをインストールする必要はありません。