ORLOV ゲーム

スキル ·

UI UX Pro Max — AI コーディングエージェントのデザインルール

AI エージェントにランディングページを頼むと、毎回同じような見た目になりがちです。UI UX Pro Max は、検索できるデザインライブラリと製品の種類ごとのデザインルールをエージェントに与えます。そのため、まず製品の見た目を決め、それからコードを書きます。

GitHub で UI UX Pro Max を見る

UI UX Pro Max は、AI コーディングエージェントにデザインの知識を加えるスキルです。README には、Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI、GitHub Copilot など、20以上の対応エージェントが載っています。

リポジトリにある基本版は、MIT ライセンスの無料オープンソースです。2026年10月26日時点で GitHub のスター数は約140,000でした。ブランド、ロゴ、スライドのデザインを含む有料のプレミアム版もあります。

配色パレット、2つのフォント見本、積み重なったページセクションが描かれたデザインシステムのカード。
スタイル、配色、フォント、レイアウトはコードの前に決める。

仕組み

画面まわりの作業を頼むと、スキルが自動で動きます。製品の種類、ビジュアルスタイル、配色パレット、ランディングページのパターン、フォントの組み合わせの5つを同時に検索します。続いて推論のステップが製品の種類に応じたルールを当てはめ、完全なデザインシステムを組み立てます。

このデザインシステムは、ページ構成、スタイル、正確な色、フォント、エフェクト、避けるべきこと、納品前のチェックリストを示します。たとえば銀行なら、AI にありがちな紫とピンクのグラデーションを避けるよう警告します。そのあとで初めてエージェントがコードを書きます。

中身

先に知っておきたいこと

検索スクリプトには Python 3 が必要です。標準ライブラリだけを使い、ネットワーク通信はしません。スキルはデザインの指針を示すもので、既存のアプリを勝手に書き換えはしませんが、新しいスタイルをコンポーネントごとに適用するようエージェントに頼むことはできます。

インストール方法

Claude Code の場合:

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

ほかのエージェントでは、コマンドラインツールを使います:

npm install -g ui-ux-pro-max-cli
uipro init --ai cursor

cursor の部分は使っているエージェントに置き換えます。たとえば claude、codex、gemini。あとは普通の言葉で頼みます:「自分の SaaS 製品のランディングページを作って」。

GitHub で UI UX Pro Max を見る