ui-ux-pro-max

ui-ux-pro-max

Web アプリケーションおよびモバイルアプリケーション向けの包括的なデザインガイドです。13 の技術スタックにわたる 67 種類のスタイル、96 種類のカラーパレット、57 種類のフォントの組み合わせ、99 件の UX ガイドライン、25 種類のチャートを収録しています。優先度に基づく推奨機能を備えた検索可能なデータベースです。

前提条件

Python がインストールされているか確認します。

python3 --version || python --version

Python がインストールされていない場合は、ユーザーの OS に応じてインストールします。

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

---

このスキルの使い方

ユーザーが UI/UX に関する作業（デザイン、構築、作成、実装、レビュー、修正、改善）を依頼した場合は、次のワークフローに従います。

ステップ 1：ユーザーの要件を分析する

ユーザーの依頼から重要な情報を抽出します。

• 製品の種類：SaaS、e コマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード：ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界：医療、フィンテック、ゲーム、教育など
• スタック：React、Vue、Next.js、または既定の html-tailwind

ステップ 2：デザインシステムを生成する（必須）

包括的な推奨事項とその根拠を得るため、必ず --design-system から始めます。

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

このコマンドでは、次の処理が行われます。

1. 5 つのドメイン（product、style、color、landing、typography）を並行して検索します
2. ui-reasoning.csv の推論ルールを適用し、最適な候補を選択します
3. パターン、スタイル、色、タイポグラフィ、エフェクトを含む完全なデザインシステムを返します
4. 避けるべきアンチパターンも含まれます

例：

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

ステップ 2b：デザインシステムを保存する（マスター + オーバーライドのパターン）

セッションをまたいで階層的に取得できるようデザインシステムを保存するには、--persist を追加します。

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

次の内容が作成されます。

• design-system/<project-slug>/MASTER.md — すべてのデザインルールを含む、グローバルな信頼できる情報源
• design-system/<project-slug>/pages/ — ページ固有のオーバーライドを保存するフォルダー

ページ固有のオーバーライドを指定する場合：

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

さらに、次のファイルも作成されます。

• design-system/<project-slug>/pages/dashboard.md — マスターからのページ固有の差分

階層的な取得の仕組み：

1. 特定のページ（例：「Checkout」）を構築する際は、まず design-system/<project-slug>/pages/checkout.md を確認します
2. ページのファイルが存在する場合、そのルールがマスターファイルのルールを上書きします
3. 存在しない場合は、design-system/<project-slug>/MASTER.md のみを使用します

ステップ 3：詳細検索で補足する（必要に応じて）

デザインシステムを取得した後、ドメイン検索を使って詳細情報を補足します。

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

詳細検索を使う場面：

必要な情報	ドメイン	例
スタイルの選択肢を増やす	style	--domain style "glassmorphism dark"
チャートの推奨事項	chart	--domain chart "real-time dashboard"
UX のベストプラクティス	ux	--domain ux "animation accessibility"
別のフォント候補	typography	--domain typography "elegant luxury"
ランディングページの構成	landing	--domain landing "hero social-proof"

ステップ 4：スタックのガイドライン（既定：html-tailwind）

実装に特化したベストプラクティスを確認します。ユーザーがスタックを指定していない場合は、既定で html-tailwind を使用します。

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

利用可能なスタック：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	製品タイプの推奨	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI のスタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	製品タイプ別のカラーパレット	SaaS、eコマース、ヘルスケア、美容、フィンテック、サービス
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、推薦文、料金、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨	トレンド、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
icons	アイコンセットと SVG の使用ガイダンス	heroicons、lucide、カテゴリ、アイコンスタイル
react	React/Next.js のパフォーマンス	ウォーターフォール、バンドル、Suspense、メモ化、再レンダリング、キャッシュ
web	Web インターフェースのガイドライン	aria、フォーカス、キーボード、セマンティック、仮想化

利用可能なスタック

スタック	対象
html-tailwind	Tailwind ユーティリティ、レスポンシブ、a11y（デフォルト）
react	状態、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、状態、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、状態、レイアウト、テーマ
shadcn	shadcn/ui コンポーネント、テーマ、フォーム、パターン
jetpack-compose	Composable、Modifier、状態のホイスティング、再コンポジション

---

ワークフローの例

ユーザーリクエスト：「プロフェッショナルなスキンケアサービスのランディングページを作成してください」

ステップ 1：要件を分析する

• 製品タイプ：美容／スパサービス
• スタイルのキーワード：エレガント、プロフェッショナル、ソフト
• 業界：美容／ウェルネス
• スタック：html-tailwind（デフォルト）

ステップ 2：デザインシステムを生成する（必須）

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

**出力：**パターン、スタイル、色、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。

ステップ 3：詳細検索で補完する（必要に応じて）

# Get UX guidelines for animation and accessibility
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

ステップ 4：スタックのガイドライン

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

**次に：**デザインシステムと詳細検索の結果を統合し、デザインを実装します。

---

出力形式

--design-system フラグは 2 つの出力形式に対応しています。

# ASCII box (default) - best for terminal display
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

より良い結果を得るためのヒント

1. キーワードを具体的にする - 「ヘルスケア SaaS ダッシュボード」＞「アプリ」
2. 複数回検索する - キーワードを変えると異なる知見が得られます
3. ドメインを組み合わせる - スタイル＋タイポグラフィ＋色＝完全なデザインシステム
4. 必ず UX を確認する - よくある問題を見つけるため、「アニメーション」、「z-index」、「アクセシビリティ」を検索します
5. スタックフラグを使う - 実装に特化したベストプラクティスを取得します
6. 繰り返し改善する - 最初の検索結果が合わない場合は、キーワードを変えて試します

---

プロフェッショナルな UI の共通ルール

見落とされがちで、UI をプロらしく見せなくする問題を以下に示します。

アイコンと視覚要素

ルール	すること	しないこと
絵文字アイコンを使わない	SVG アイコン（Heroicons、Lucide、Simple Icons）を使用する	🎨 🚀 ⚙️ のような絵文字を UI アイコンとして使用する
安定したホバー状態	ホバー時に色や不透明度のトランジションを使用する	レイアウトがずれるスケール変形を使用する
正しいブランドロゴ	Simple Icons で公式 SVG を調べる	推測したり、誤ったロゴパスを使用したりする
アイコンサイズの統一	固定の viewBox（24x24）と w-6 h-6 を使用する	異なるアイコンサイズを無作為に混在させる

インタラクションとカーソル

ルール	すること	しないこと
ポインターカーソル	クリック可能／ホバー可能なすべてのカードに cursor-pointer を追加する	インタラクティブな要素にデフォルトのカーソルを残す
ホバー時のフィードバック	視覚的なフィードバック（色、影、ボーダー）を提供する	要素がインタラクティブであることを示さない
スムーズなトランジション	transition-colors duration-200 を使用する	状態を即座に変化させたり、遅すぎるトランジション（>500ms）を使ったりする

ライト／ダークモードのコントラスト

ルール	すること	しないこと
ライトモードのガラスカード	bg-white/80 以上の不透明度を使用する	bg-white/10 を使用する（透明すぎる）
ライトモードのテキストコントラスト	テキストに #0F172A（slate-900）を使用する	本文テキストに #94A3B8（slate-400）を使用する
ライトモードの控えめなテキスト	最低でも #475569（slate-600）を使用する	gray-400 またはそれより薄い色を使用する
ボーダーの視認性	ライトモードで border-gray-200 を使用する	border-white/10 を使用する（見えない）

レイアウトと余白

ルール	すること	しないこと
フローティングナビバー	top-4 left-4 right-4 の余白を追加する	ナビバーを top-0 left-0 right-0 に固定する
コンテンツのパディング	固定ナビバーの高さを考慮する	コンテンツを固定要素の背後に隠す
最大幅の統一	同じ max-w-6xl または max-w-7xl を使用する	異なるコンテナー幅を混在させる

---

納品前チェックリスト

UI コードを納品する前に、以下の項目を確認してください。

視覚的な品質

• アイコンとして絵文字を使用していない（代わりに SVG を使用する）
• すべてのアイコンが一貫したアイコンセット（Heroicons/Lucide）から選ばれている
• ブランドロゴが正しい（Simple Icons で確認済み）
• ホバー状態によってレイアウトがずれない
• var() でラップせず、テーマカラーを直接使用している（bg-primary）

インタラクション

• クリック可能なすべての要素に cursor-pointer が設定されている
• ホバー状態で明確な視覚的フィードバックが得られる
• トランジションがスムーズ（150～300ms）
• キーボード操作時にフォーカス状態が見える

ライト／ダークモード

• ライトモードのテキストに十分なコントラストがある（最低 4.5:1）
• ライトモードでガラス／透明な要素が見える
• どちらのモードでもボーダーが見える
• 納品前に両方のモードをテストする

レイアウト

• フローティング要素に画面端から適切な余白がある
• 固定ナビバーの背後に隠れているコンテンツがない
• 375px、768px、1024px、1440px でレスポンシブに表示される
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に alt テキストがある
• フォーム入力にラベルがある
• 色だけを唯一の指標としていない
• prefers-reduced-motion に配慮している