SuperDesign

• AIエージェントを使って、テンプレートっぽくない洗練されたモダンなUIコード（HTML/CSS/Tailwind）を生成したい。
• ランディングページ、ダッシュボード、またはコンポーネントが多いインターフェースを構築していて、構造化されたデザインプロセスを自動的に適用したい。
• oklch() などのモダンなカラー技法を使って、ライト/ダークモード全体で一貫したテーマを実現したい。
• アクセシブルで、モバイルファースト、レスポンシブなレイアウトと適切なセマンティックHTMLをすぐに使える形で欲しい。

• ネイティブモバイル環境（iOS/Android）で作業している場合 — これらのガイドラインはウェブに特化しています。
• プロジェクトが厳格なデザインシステム（例：Material Designへの厳密な準拠）を使用しており、ここで提供されている独自のテーマパターンと競合する場合。

すべてのUIは、レイアウトデザイン、テーマデザイン、アニメーションデザイン、実装という順序で進められます。これにより、構造や美しさを考慮する前にいきなりコードに飛びつくことを防ぎ、より一貫性のある成果物を生み出します。

このスキルは、時代遅れの汎用パレット（Bootstrap ブルーなど）を意図的に避け、知覚的に均一でモダンなカラー定義のために oklch() を推奨しています。ダークモード（Vercel/Linear スタイル）、ネオブルータリズム、グラスモーフィズム向けのプリビルドテーマパターンが、すぐに使える CSS 変数とともに含まれています。

サンセリフ、モノスペース、セリフ、ディスプレイなど各カテゴリにわたる厳選されたGoogle Fontsのリストを提供し、LucideアイコンおよびFlowbiteコンポーネントのCDN対応インテグレーションも含まれています。これにより、タイポグラフィ選択における迷いを完全に解消します。

マイクロインタラクションを計画するための簡潔な記法システム（例：button: 150ms [S1→0.95→1] press）により、アニメーションを意図的に管理できます。エントリーアニメーション、ホバー状態、ボタン押下、ページ遷移に対して推奨されるタイミング範囲が定義されています。

ガイドラインにより、セマンティックHTML、適切な見出し階層、ARIAラベル、最低4.5:1のカラーコントラスト比、およびキーボードナビゲーションのサポートが強制され、追加のプロンプトなしに出力がアクセシビリティの基本基準を満たすことが保証されます。

カード、ボタン、フォーム、ナビゲーションに関する明確なベストプラクティスが組み込まれており、シャドウの深さ、タッチターゲットのサイズ、フォーカス状態、ローディング／無効状態、スティッキーヘッダーの動作をカバーしています。

エージェントにSaaSのランディングページを作成するよう依頼すると、SuperDesignが構造化されたレイアウト（ヘッダー → ヒーロー → 機能紹介 → フッター）に従い、モダンなフォントの組み合わせを選択し、統一感のあるカラーテーマを適用し、モバイルファーストのレスポンシブCSSを生成します — 手動でのデザイン指示は一切不要です。

アナリティクスや管理者向けダッシュボードのプロトタイピングを行う際、SuperDesignはエージェントに対してまずレイアウトのワイヤーフレームを作成し、一貫したスペーシングと控えめなカードシャドウを適用し、ホバー／アニメーション状態を含めるよう誘導します。これにより、本番環境にそのまま使えるような仕上がりのプロトタイプを生成します。

このスキルを使用して、同じデザイントークン（色、角丸、シャドウのCSS変数）を共有し、アクセシビリティチェックをパスする、ボタン、フォームフィールド、ナビゲーションコンポーネントの統一されたセットを生成しましょう。

ライトモードとダークモードの両方をサポートしなければならないインターフェースを構築する際、SuperDesign のCSS変数アプローチと oklch() カラーガイドラインを活用することで、後からダークモードを追加対応するのではなく、最初からテーマ対応システムを構築することができます。