ui-ux-pro-max

UI/UX Pro Max - Design Intelligence

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

前提条件

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

python3 --version || python --version

Python がインストールされていない場合は、OS に応じたインストール方法をユーザーに案内してください。

---

このスキルの使い方

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

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

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

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

ステップ 2：関連するドメインを検索する

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

コマンド形式：

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

推奨される検索順序：

1. 製品 - 製品タイプに応じたスタイルの推奨事項を取得
2. スタイル - 詳細なスタイルガイド（色、エフェクト、フレームワーク）を取得
3. タイポグラフィ - Google Fonts のインポートを含むフォントの組み合わせを取得
4. 色 - カラーパレット（プライマリ、セカンダリ、CTA、背景、テキスト、境界線）を取得
5. ランディング - ページ構成を取得（ランディングページの場合）
6. チャート - チャートの推奨事項を取得（ダッシュボード／分析の場合）
7. UX - ベストプラクティスとアンチパターンを取得
8. スタック - スタック固有のガイドラインを取得（デフォルト：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、shadcn

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	製品タイプの推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI スタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	製品タイプ別のカラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
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	ウィジェット、状態、レイアウト、テーマ設定
shadcn	shadcn/ui コンポーネント、テーマ設定、フォーム、パターン

---

ワークフローの例

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

AI は以下を実行します：

1. 製品タイプを検索します：

   python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
   

2. スタイルを検索します（業界に基づく：美容、エレガント）：

   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. キーワードを具体的にする —「ヘルスケア SaaS ダッシュボード」＞「アプリ」
2. 複数回検索する — キーワードを変えると、異なる知見が得られます
3. 複数のドメインを組み合わせる — スタイル＋タイポグラフィ＋カラー＝完全なデザインシステム
4. 必ず UX を確認する — よくある問題について、「animation」、「z-index」、「accessibility」を検索します
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）
• ブランドロゴが正しい（Simple Icons で確認済み）
• ホバー状態によってレイアウトがずれない
• var() でラップせず、テーマカラーを直接使用する（bg-primary）

インタラクション

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

ライト／ダークモード

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

レイアウト

• フローティング要素と画面端の間に適切な余白を設ける
• 固定ナビゲーションバーの背後にコンテンツが隠れない
• 320px、768px、1024px、1440px の各幅に対応する
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に alt テキストを設定する
• フォーム入力にラベルを設定する
• 色だけを唯一の手がかりにしない
• prefers-reduced-motion を尊重する