ui-ux-pro-max

UI/UX Pro Max - Design Intelligence

UI スタイル、カラーパレット、フォントの組み合わせ、チャートの種類、製品の推奨事項、UX ガイドライン、スタック固有のベストプラクティスを検索できるデータベースです。

このスキルの使い方

scripts/search.py が解決できるように、スキルディレクトリ（$CODEX_HOME/skills/ui-ux-pro-max）からコマンドを実行するか、スクリプトへの絶対パスを指定してください。python が使用できない場合は、python3 を使ってください。

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

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

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

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

Step 2: 関連するドメインを検索する

search.py を複数回実行して、包括的な情報を収集します。十分なコンテキストが得られるまで検索してください。

python scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

推奨する検索順：

1. Product - 製品の種類に応じたスタイルの推奨事項を取得します
2. Style - 詳細なスタイルガイド（色、エフェクト、フレームワーク）を取得します
3. Typography - Google Fonts のインポート方法とフォントの組み合わせを取得します
4. Color - カラーパレット（Primary、Secondary、CTA、Background、Text、Border）を取得します
5. Landing - ページ構成を取得します（ランディングページの場合）
6. Chart - チャートの推奨事項を取得します（ダッシュボード／分析の場合）
7. UX - ベストプラクティスとアンチパターンを取得します
8. Stack - スタック固有のガイドラインを取得します（デフォルト：html-tailwind）

Step 3: スタックのガイドライン（デフォルト：infer-from-project）

ユーザーがスタックを指定していない場合は、プロジェクトから推測するか、デフォルトの html-tailwind を使用します。

python scripts/search.py "<keyword>" --stack html-tailwind

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

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	製品の種類に応じた推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI スタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	製品の種類別カラーパレット	SaaS、eコマース、ヘルスケア、美容、フィンテック、サービス
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、推薦文、価格設定、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨事項	トレンド、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック

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

---

ワークフローの例

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

AI が行うこと：

# 1. Search product type
python scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python scripts/search.py "animation" --domain ux
python scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python scripts/search.py "layout responsive" --stack html-tailwind

**その後：**検索結果を統合し、デザインを実装します。

---

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

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

---

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

UI をプロフェッショナルでない印象にしてしまう、見落とされがちな問題を以下に示します。

アイコンと視覚要素

ルール	適用
SVG アイコンセット	UI コントロールには単一のセット（Heroicons、Lucide、Simple Icons）の SVG アイコンを使用し、絵文字はコンテンツのみに使用します。
安定したホバー状態	ホバー時には色や不透明度のトランジションを使用し、レイアウトのずれを防ぐために寸法を固定します。
正しいブランドロゴ	Simple Icons またはブランドサイトから公式 SVG を取得し、使用前に最新のロゴであることを確認します。
一貫したアイコンサイズ	viewBox（24x24）を統一し、セット全体で w-6 h-6（または同等の指定）を適用します。

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

ルール	適用
ポインターの表示	クリック可能またはホバー可能なすべてのカードや要素に cursor-pointer を追加します。
ホバー時のフィードバック	ホバー時とフォーカス時に、色、影、枠線で明確な視覚的フィードバックを提供します。
滑らかなトランジション	変化を滑らかにするため、色、不透明度、影に150〜300msのトランジションを使用します。

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

ルール	適用
ガラスカードのライトモード	ガラス面には bg-white/80 以上の不透明度を使用します。
ライトモードのテキストコントラスト	本文テキストには #0F172A（slate-900）またはそれより濃い色を使用し、コントラスト比4.5:1を満たします。
ライトモードの控えめなテキスト	補助テキストには #475569（slate-600）またはそれより濃い色を使用します。
枠線の視認性	ライトモードでは border-gray-200 以上を使用し、境界が見えるようにします。

レイアウトと間隔

ルール	適用
フローティングナビゲーションバーの間隔	フローティングナビゲーションバーには top-4 left-4 right-4（または同等の指定）の余白を追加します。
コンテンツの表示領域	コンテンツが見えるよう、固定ナビゲーションバーの高さと同じ分の上部パディングを追加します。
一貫した最大幅	セクション全体で単一のコンテナー幅（例：max-w-6xl または max-w-7xl）を使用します。

---

納品前チェックリスト

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

視覚的な品質

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

インタラクション

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

ライトモード／ダークモード

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

レイアウト

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

アクセシビリティ

• すべての画像に alt テキストがある
• フォーム入力にラベルがある
• 色だけを唯一の識別手段にしていない
• prefers-reduced-motion に対応している