ui-ux-pro-max

UI/UX Pro Max -デザインインテリジェンス

Web アプリケーションとモバイルアプリケーションのための包括的なデザインガイドです。9 つの技術スタックに対応した 50 以上のスタイル、97 のカラーパレット、57 のフォントペアリング、99 の UX ガイドライン、25 種類のチャートを収録しています。検索可能なデータベースと、優先度に基づく推奨機能を備えています。

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

• 新しい UI コンポーネントやページをデザインするとき
• カラーパレットやタイポグラフィを選ぶとき
• UX の問題がないかコードをレビューするとき
• ランディングページやダッシュボードを構築するとき
• アクセシビリティ要件を実装するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	ドメイン
1	アクセシビリティ	重大	ux
2	タッチ操作とインタラクション	重大	ux
3	パフォーマンス	高	ux
4	レイアウトとレスポンシブ対応	高	ux
5	タイポグラフィと色	中	typography, color
6	アニメーション	中	ux
7	スタイルの選択	中	style, product
8	チャートとデータ	低	chart

クイックリファレンス

1. アクセシビリティ（重大）

• color-contrast - 通常のテキストでは最低 4.5:1 の比率を確保する
• focus-states - インタラクティブ要素に視認できるフォーカスリングを表示する
• alt-text - 意味のある画像には内容を説明する代替テキストを付ける
• aria-labels - アイコンのみのボタンには aria-label を設定する
• keyboard-nav - タブ移動の順序を視覚上の順序と一致させる
• form-labels - for 属性を指定した label を使用する

2. タッチ操作とインタラクション（重大）

• touch-target-size - タッチターゲットは最低 44x44px にする
• hover-vs-tap - 主な操作にはクリック／タップを使用する
• loading-buttons - 非同期処理中はボタンを無効にする
• error-feedback - 問題の近くに明確なエラーメッセージを表示する
• cursor-pointer - クリック可能な要素に cursor-pointer を追加する

3. パフォーマンス（高）

• image-optimization - WebP、srcset、遅延読み込みを使用する
• reduced-motion - prefers-reduced-motion を確認する
• content-jumping - 非同期コンテンツ用のスペースを確保する

4. レイアウトとレスポンシブ対応（高）

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - モバイルでは本文を最低 16px にする
• horizontal-scroll - コンテンツがビューポート幅に収まるようにする
• z-index-management - z-index のスケールを定義する（10、20、30、50）

5. タイポグラフィと色（中）

• line-height - 本文には 1.5〜1.75 を使用する
• line-length - 1 行あたり 65〜75 文字に制限する
• font-pairing - 見出しと本文のフォントの特性を調和させる

6. アニメーション（中）

• duration-timing - マイクロインタラクションには 150〜300ms を使用する
• transform-performance - width/height ではなく transform/opacity を使用する
• loading-states - スケルトン画面またはスピナーを使用する

7. スタイルの選択（中）

• style-match - スタイルをプロダクトの種類に合わせる
• consistency - すべてのページで同じスタイルを使用する
• no-emoji-icons - 絵文字ではなく SVG アイコンを使用する

8. チャートとデータ（低）

• chart-type - データの種類に合ったチャートを選ぶ
• color-guidance - アクセシブルなカラーパレットを使用する
• data-table - アクセシビリティのため、代替となる表を用意する

使用方法

以下の CLI ツールを使用して、特定のドメインを検索します。

---

前提条件

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 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 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

ステップ 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. 特定のページ（例：「Checkout」）を作成する際は、まず design-system/pages/checkout.md を確認します
2. ページファイルが存在する場合、そのルールがマスターファイルを上書きします
3. 存在しない場合は、design-system/MASTER.md のみを使用します

コンテキストを考慮した取得プロンプト：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

ステップ 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"

ステップ 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-commerce、portfolio、healthcare、beauty、service
style	UI スタイル、色、エフェクト	glassmorphism、minimalism、dark mode、brutalism
typography	フォントの組み合わせ、Google Fonts	elegant、playful、professional、modern
color	プロダクトタイプ別のカラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
landing	ページ構成、CTA 戦略	hero、hero-centric、testimonial、pricing、social-proof
chart	チャートの種類、ライブラリの推奨事項	trend、comparison、timeline、funnel、pie
ux	ベストプラクティス、アンチパターン	animation、accessibility、z-index、loading
react	React/Next.js のパフォーマンス	waterfall、bundle、suspense、memo、rerender、cache
web	Web インターフェースのガイドライン	aria、focus、keyboard、semantic、virtualize
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック

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

---

ワークフローの例

ユーザーのリクエスト：「プロ向けスキンケアサービスのランディングページを作成してください」

Step 1: 要件を分析する

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

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

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

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

Step 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

Step 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を必ず確認する — よくある問題を把握するため、「animation」「z-index」「accessibility」で検索します
5. スタックフラグを使う — 実装に特化したベストプラクティスを得られます
6. 繰り返し改善する — 最初の検索結果が合わない場合は、キーワードを変えてみます

---

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

UIをプロフェッショナルに見せるうえで、見落とされがちな問題を紹介します。

アイコンと視覚要素

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

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

ルール	すべきこと	避けること
カーソルポインター	クリック可能／ホバー可能なカードすべてに 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でレスポンシブに表示される
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に代替テキストが設定されています
• フォームの入力欄にラベルが設定されています
• 色だけを唯一の識別手段にしていません
• prefers-reduced-motion に準拠しています