ui_ux_pro_max

UI/UX Pro Max

Web アプリケーションとモバイルアプリケーション向けの包括的なデザインインテリジェンススキルです。13 の技術スタックにわたる 67 種類のスタイル、96 種類のカラーパレット、57 種類のフォントの組み合わせ、99 件の UX ガイドライン、25 種類のチャートを収録しています。優先度に基づくレコメンデーション機能を備えた、検索可能なデータベースです。

前提条件

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

python --version

Python がインストールされていない場合は、インストールします。

winget install Python.Python.3.12

---

このスキルの使い方

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

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

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

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

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

必ず --design-system から始めて、理由を含む包括的なレコメンデーションを取得します。

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<product_type> <industry> <keywords>" --design-system

プロジェクト名がわかっている場合は、任意で -p "Project Name" を追加できます。

このコマンドは次の処理を行います。

1. 5 つのドメイン（製品、スタイル、カラー、ランディング、タイポグラフィ）を並行して検索します
2. 推論ルールを適用して最適な候補を選びます
3. パターン、スタイル、カラー、タイポグラフィ、エフェクトを含む完全なデザインシステムを返します
4. 避けるべきアンチパターンも含みます

例：

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: デザインシステムを永続化する（マスター＋オーバーライドのパターン）

セッションをまたいで階層的に取得できるようにデザインシステムを保存するには、--persist を追加します。 注：現在の作業ディレクトリへの書き込み権限が必要です。

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<query>" --design-system --persist -p "Project Name"

Step 3: 詳細検索で補足する（必要に応じて）

デザインシステムを取得した後、ドメイン検索を使用して詳細情報を追加で取得します。

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<keyword>" --domain <domain>

詳細検索を使用する場面：

必要な情報	ドメイン	例
スタイルの選択肢を増やす	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"

Step 4: スタックのガイドライン（デフォルト：html-tailwind）

実装に固有のベストプラクティスを取得します。ユーザーがスタックを指定しない場合は、デフォルトで html-tailwind を使用します。

python "C:\Users\ADMIN\.gemini\antigravity\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コマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI のスタイル、カラー、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	製品タイプ別のカラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、推薦文、価格設定、ソーシャルプルーフ
chart	チャートの種類、ライブラリのレコメンデーション	トレンド、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
react	React/Next.js のパフォーマンス	ウォーターフォール、バンドル、サスペンス、メモ、再レンダリング、キャッシュ
web	Web インターフェースのガイドライン	aria、フォーカス、キーボード、セマンティック、仮想化
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック（一部）

html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

---

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

1. キーワードを具体的にする - 「healthcare SaaS dashboard」＞「app」
2. 何度も検索する - キーワードを変えると、異なる知見が見つかります
3. ドメインを組み合わせる - スタイル＋タイポグラフィ＋カラー＝完全なデザインシステム
4. UX を必ず確認する - よくある問題を見つけるために、「animation」、「z-index」、「accessibility」で検索します
5. stack フラグを使う - 実装に即したベストプラクティスを取得できます

引き継ぎと統合（上級）

完全なデザインシステムを生成した後：

1. CSS 変数：カラーパレットとタイポグラフィを、プロジェクトのグローバルスタイルシートで標準の CSS Custom Properties（例：:root { --primary: #3B82F6; }）にすぐに変換します。
2. コンポーネントの抽象化：繰り返し使われるパターン（例：「Glassmorphism Card」）を特定し、ファイル全体でユーティリティクラスを繰り返し適用するのではなく、再利用可能なコンポーネントを構築します。
3. テーマのオーバーライド：ユーザープロジェクトがダークモードに対応している場合は、@media (prefers-color-scheme: dark) または .dark クラスブロック内で、反転したパレットを明示的に生成します。