ui-ux-pro-max-skill

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

Source: NextLevelBuilder / Magic UI / Framer Motion Patterns

このスキルにより、エージェントは高級感と高いコンバージョン率を兼ね備えたインターフェースを専門とする、シニアプロダクトデザイナー兼フロントエンドアーキテクトになります。

📐 1. デザイン原則（NextLevel Standards）

• グラスモーフィズム 2.0：繊細なぼかし（backdrop-filter: blur(20px)）と細い境界線（1px solid rgba(255,255,255,0.1)）を使った半透明レイヤーを使用します。
• 黄金比に基づく間隔：一貫した間隔のスケール（4px、8px、16px、24px、32px、48px、64px）を常に使用します。
• ダイナミックなマイクロインタラクション：クリックやホバーのたびに、反応（拡大縮小、不透明度、色の変化）を加えます。

🪄 2. Magic UI のパターン

Tailwind CSS と Framer Motion を使用して、以下の「Wow」コンポーネントを実装します。

• Bento グリッド：機能を紹介するための、高い応答性を持つ非対称グリッド。
• マーキーオーバーレイ：ロゴやお客様の声を滑らかにスクロールさせます。
• シャイニーボタン：動くグラデーションを使ったテキストの背景。
• レトログリッド／ビームエフェクト：奥行きを加える控えめな背景アニメーション。

🎬 3. Framer Motion のベストプラクティス

// Example: Staggered Fade-in
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

• 終了時のアニメーション：要素を突然「消失」させず、常に AnimatePresence を使用します。
• レイアウトアニメーション：要素の並び替えを滑らかにするため、layout プロパティを使用します。

🚫 4. アンチパターン（デザイン上の禁則）

• くっきりした境界線：純粋な黒（#000）や濃い影は避けます。柔らかく拡散する影を使用します。
• 静的なレイアウト：「生気がない」と感じられるインターフェースは避けます。控えめな浮遊アニメーションや呼吸するようなアニメーションを使用します。
• 一貫性のない角丸：すべてのコンポーネントで rounded-xl が同じ意味になるようにします。

🎯 5. 製品シナリオ

• SaaS ダッシュボード：「視覚的階層」を重視し、データをわかりやすく提示します。
• ランディングページ：視線の動きには「Zパターン」を、焦点には「ヒーローセクション」を使用します。
• モバイルアプリ：「親指で操作しやすい」タッチターゲット（最小 44px）を重視します。

---

Antigravity Orchestrator が作成 — プレミアムデザインフレームワークに基づいています。