ui-ux-pro-max

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コマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード：ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界：ヘルスケア、フィンテック、ゲーム、教育など
• スタック：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. 製品 - 製品の種類に応じたスタイルの推奨事項を取得します
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

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
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 ユーティリティ、レスポンシブ対応、a11y（既定）
react	状態、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、状態、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、状態、レイアウト、テーマ設定

---

ワークフローの例

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

AI が行うこと：

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

# 2. Search style (based on industry: beauty, elegant)
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
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. Search stack guidelines (default: html-tailwind)
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

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

---

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

1. キーワードを具体的にする - 「healthcare SaaS dashboard」>「app」
2. 複数回検索する - キーワードを変えると、異なる情報が見つかります
3. ドメインを組み合わせる - スタイル + タイポグラフィ + 色 = 完全なデザインシステム
4. UXを必ず確認する - よくある問題を確認するには、「animation」、「z-index」、「accessibility」を検索します
5. stackフラグを使う - 実装に特化したベストプラクティスを取得できます
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）から選ばれている