UI UX Pro Max（nextlevelbuilder/ui-ux-pro-max-skill）：業種に合う配色・書体・レイアウトをClaude Codeに提案させるデザインスキル

UI UX Pro Max（nextlevelbuilder/ui-ux-pro-max-skill）は、Claude Codeなどのコーディングエージェントに「画面デザインの知識」を持たせるスキルです。業種に合う配色・書体・レイアウトの型をデータベースから検索し、設計ルールとして提示します。自社サイトの作成、予約フォームや管理画面の試作など、Webやアプリの見た目をAIに作らせる場面を想定した内容です。GitHubのclaude-codeトピックでは、13万を超えるスターを集めて上位に並んでいます（執筆時点）。ライセンスはMITです。

READMEによると、収録データは次のとおりです。UIスタイル79種（うち通常の推薦対象は50種）、配色192種、フォントの組み合わせ74種、チャート25種、UXガイドライン119件、対応する技術スタック22種です。業種別の推論ルールも192件あり、SaaS、金融、医療、飲食、美容、法律などの区分が挙がっています。

中心となる機能は「デザインシステム生成」です。「美容スパのランディングページを作りたい」といった依頼を受けると、商品の種類、スタイル、配色、ページ構成、書体の5項目を並行して検索します。検索にはBM25というキーワード順位付けの方式が使われます。結果は、ページ構成、スタイル、配色コード、書体、避けるべき表現、納品前チェックリストを一式にした形で出力されます。チェックリストには、文字のコントラスト比4.5:1以上、キーボード操作時のフォーカス表示、画面幅375px〜1440pxでの確認などが含まれます。

生成した設計は、design-system/プロジェクト名/MASTER.mdとして保存できます。ページごとの例外はpages/配下の別ファイルに書き、ページ側のファイルがあればそちらを優先し、なければMASTERだけを使う、という階層構造です。別の日のセッションでも同じ配色・書体を参照させたい場合に使う機能と読み取れます。

導入方法
注意点

導入方法

Claude Codeのプラグインとして入れる方法と、npmのCLIで入れる方法の2通りがREADMEに書かれています。READMEはCLIを推奨しています。

プラグインとして入れる場合は、Claude Code上で次の2行を実行します。

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

CLIで入れる場合は、npmでグローバルに導入し、対象プロジェクトのフォルダで初期化します。

npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude

--aiにはclaudeのほか、cursor、windsurf、codex、gemini、copilotなど約20種類を指定できます。--globalを付けると、プロジェクト単位ではなく~/.claude/skills/に入り、すべてのプロジェクトで使えます。READMEには、パッケージ名はui-ux-pro-max-cliで、旧名のuipro-cliは更新が止まっているため使わないよう書かれています。

そのほかの主なコマンドは次のとおりです。

uipro init --dry-run   # 書き込まずに導入内容だけ確認
uipro update           # スキルのファイルを更新
uipro uninstall        # 削除

導入後は、Claude Codeに「SaaS製品のランディングページを作って」のように頼むだけで、UI/UX関連の依頼と判断したときにスキルが自動で働くと説明されています。設計生成の機能だけをコマンドで直接呼ぶこともできます。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

注意点

前提環境：CLIの導入にはNode.js（npm）が、検索スクリプトの実行にはPython 3が必要です。Pythonは標準ライブラリだけで動くと書かれています。
外部通信：READMEは、検索スクリプトは何もインストールせず、ネットワーク通信も行わないと明記しています。通信が発生するのは、npmからCLIを取得する時と、プラグインをGitHubから取得する時です。
認証情報：READMEの導入手順に、APIキーやアカウント登録は出てきません。
書き込み先：uipro initはプロジェクト内（.claude/配下）、--globalはホームの~/.claude/skills/にファイルを置きます。--dry-runで事前に内容を確認できます。
無料版と有料版：本リポジトリはオープンソースの基本版です。ブランドやロゴの設計、画像生成との連携などは有料版の機能とされています。
日本語サイトへの対応：収録されている書体の組み合わせはGoogle Fontsが中心です。日本語向けの書体や組版の扱いがどこまで含まれるかは、READMEからは確認できませんでした。
導入時の確認：スキルは外部の第三者が公開しているものです。導入前にリポジトリの中身（特にscripts/配下のPython）を読み、テスト用のフォルダで試してから本番のプロジェクトに入れる運用が無難です。