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

UI スタイル、カラーパレット、フォントペアリング、チャートタイプ、製品推奨、UX ガイドライン、スタック固有のベストプラクティスを検索可能なデータベース。

前提条件

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-commerce、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルキーワード: minimal、playful、professional、elegant、dark mode など
• 業界: healthcare、fintech、gaming、education など
• スタック: React、Vue、Next.js、またはデフォルトの html-tailwind

ステップ 2: 関連ドメインの検索

search.py を複数回使用して包括的な情報を収集します。十分なコンテキストが得られるまで検索を続けます。

python3 .shared/ui-ux-pro-max/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)

ステップ 3: スタックガイドライン (デフォルト: html-tailwind)

ユーザーがスタックを指定しない場合は、html-tailwind をデフォルトにします。

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

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

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	例キーワード
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
prompt	AI プロンプト、CSS キーワード	(スタイル名)

利用可能なスタック

スタック	フォーカス
html-tailwind	Tailwind ユーティリティ、レスポンシブ、a11y (デフォルト)
react	ステート、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、ステート、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、ステート、レイアウト、テーマ

---

ワークフロー例

ユーザーリクエスト: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

AI は以下を実行します:

# 1. 製品タイプを検索
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. スタイルを検索 (業界: beauty、elegant)
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. タイポグラフィを検索
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. カラーパレットを検索
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. ランディングページ構造を検索
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. UX ガイドラインを検索
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. スタックガイドラインを検索 (デフォルト: html-tailwind)
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

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

---

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

1. キーワードを具体的に - 「healthcare SaaS dashboard」> 「app」
2. 複数回検索 - 異なるキーワードは異なる洞察を明らかにします
3. ドメインを結合 - Style + Typography + Color = 完全なデザインシステム
4. 常に UX をチェック - 「animation」「z-index」「accessibility」を検索して一般的な問題を確認
5. スタックフラグを使用 - 実装固有のベストプラクティスを取得
6. イテレーション - 最初の検索に一致しない場合は、異なるキーワードを試してください
7. 複数ファイルに分割 - より良い保守性のために:
   • コンポーネントを個別ファイルに分離 (例: Header.tsx、Footer.tsx)
   • 再利用可能なスタイルを専用ファイルに抽出
   • 各ファイルを 200~300 行以下に保つ

---

プロフェッショナル 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) から