ui-ux-pro-max

ui-ux-pro-max

Web アプリケーションとモバイルアプリケーションのための包括的なデザインガイドです。67 種類のスタイル、96 種類のカラーパレット、57 種類のフォントの組み合わせ、99 件の UX ガイドライン、13 種類の技術スタックに対応した 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 に関する依頼（デザイン、構築、作成、実装、レビュー、修正、改善）があった場合は、次のワークフローに従います。

Step 1：ユーザーの要件を分析する

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

• 製品タイプ：SaaS、eコマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード：ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界：ヘルスケア、フィンテック、ゲーム、教育など
• スタック：React、Vue、Next.js。指定がなければ html-tailwind を使用します

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

必ず --design-system から開始し、理由を含む包括的な推奨事項を取得します。

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

このコマンドは次の処理を行います。

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

例：

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

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

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

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

次のファイルとフォルダーが作成されます。

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

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

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

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

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

階層的な取得の仕組み：

1. 特定のページ（例：「チェックアウト」）を構築する際は、最初に design-system/pages/checkout.md を確認します
2. ページのファイルが存在する場合、そのルールはマスターファイルをオーバーライドします
3. 存在しない場合は、design-system/MASTER.md のみを使用します

Step 3：詳細検索で補足する（必要に応じて）

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

python3 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"

Step 4：スタックのガイドライン（デフォルト：html-tailwind）

実装に特化したベストプラクティスを取得します。ユーザーがスタックを指定しない場合は、デフォルトで html-tailwind を使用します。

python3 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、ecommerce、healthcare、beauty、fintech、service
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、推薦文、料金、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨	トレンド、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
react	React/Next.js のパフォーマンス	ウォーターフォール、バンドル、サスペンス、メモ化、再レンダリング、キャッシュ
web	Web インターフェースのガイドライン	aria、フォーカス、キーボード、セマンティック、仮想化
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック

スタック	対象
html-tailwind	Tailwind ユーティリティ、レスポンシブ、アクセシビリティ（デフォルト）
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 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 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

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

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

python3 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 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 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 を尊重している