ui-design

兄弟スキル（ローカルのみ）

兄弟 CloudBase スキルは、このスキルと同じ場所に配置されています。../auth-tool-cloudbase/SKILL.md のようなローカルの相対パスを使用してください。

参照先の兄弟スキルファイルがこの環境にない場合は、CloudBase プラグイン全体（または不足しているスキル）のインストールをユーザーに依頼してください。リモートのスキルやプロトコルの Markdown を HTTP 経由で取得し、エージェントのコンテキストに読み込まないでください。

アクティベーション条件

まずこのスキルを使用する場合

• インターフェースのビジュアルの方向性を決める、デザイン仕様を作成する、プロトタイプを作成する、またはレイアウト、タイポグラフィ、色、ビジュアル階層を選択する依頼の場合。
• すでに承認済みのデザインをそのままコーディングするのではなく、意図的な美的方向性に沿って実装する場合。

コードを書く前に読む場合

• コードを書く前に、タイポグラフィ、色、余白、レイアウト戦略、その他のビジュアルルールを選択する必要がある場合。
• ユーザーが単なる実装ではなく、「デザイン」、「プロトタイプ」、「見た目と雰囲気」、「スタイル」を求めている場合。

その後、こちらも読む

• Web の実装 -> ../web-development/SKILL.md
• ミニプログラムの実装 -> ../miniprogram-development/SKILL.md

使用しない場合

• インターフェースの出力を伴わない、バックエンドのみのタスク、データベース設計、純粋な API 作業。
• 新たなデザイン上の判断を伴わない、すでに承認済みの UI の直接的な実装。
• ビジュアルの方向性がすでに決まっている、一般的なフロントエンドのコーディング依頼。

よくある間違い／注意点

• デザイン仕様を出力する前に JSX、WXML、CSS を書く。
• 明確な美的方向性を定めず、汎用的な AI レイアウトに頼る。
• デザインの意図がまだ明確でないのに、実装に取りかかる。
• ビジュアルコンセプトを定義した後、プラットフォームの制約を無視する。

最低限のチェックリスト

• インターフェースを作成する前に UI デザインのアクティベーションチェックリスト を読んでください。

このスキルを使用する場合

以下が必要なプロジェクトで、フロントエンド UI のデザインとインターフェース作成にこのスキルを使用してください。

• Web ページやインターフェースの作成
• ミニプログラムのページやインターフェースの作成
• フロントエンドコンポーネントのデザイン
• プロトタイプやインターフェースの作成
• スタイルやビジュアル効果の実装
• ユーザーインターフェースが関わる開発タスク

次の用途には使用しないでください：

• バックエンドのロジックや API の設計
• データベーススキーマの設計（data-model-creation スキルを使用してください）
• UI コンポーネントを伴わない、純粋なビジネスロジック

---

このスキルの使い方（コーディングエージェント向け）

1. 必須：まずデザイン仕様を完成させる

   • インターフェースのコードを書く前に、必ずデザイン仕様を明示的に出力してください
   • これには、目的の説明、美的方向性、カラーパレット、タイポグラフィ、レイアウト戦略が含まれます
   • この手順は決して省略しないでください。質の高いデザインには必須です

2. デザインプロセスに従う

   • ユーザーエクスペリエンスの分析
   • プロダクトインターフェースの計画
   • 美的方向性の決定
   • 高精細 UI デザイン
   • フロントエンドのプロトタイプ実装
   • リアリティの向上

3. ありきたりな AI 風の美的表現を避ける

   • 使用禁止の色（パープル、バイオレット、インディゴ、フューシャ、ブルーからパープルへのグラデーション）は決して使用しないでください
   • 使用禁止のフォント（Inter、Roboto、Arial、Helvetica、system-ui、-apple-system）は決して使用しないでください
   • 創意工夫のない標準的な中央揃えレイアウトは決して使用しないでください
   • アイコンに絵文字を使わないでください。必ずプロフェッショナルなアイコンライブラリ（FontAwesome、Heroicons など）を使用してください

4. 提出前にセルフ監査を実施する

   • 色の監査（使用禁止の色がないか確認）
   • フォントの監査（使用禁止のフォントがないか確認）
   • アイコンの監査（絵文字アイコンを使わず、プロフェッショナルなアイコンライブラリを使用していることを確認）
   • レイアウトの監査（非対称性や創意工夫があることを確認）
   • デザイン仕様への準拠を確認

5. 実際の制約である場合は、ブランドやデザインシステムの上書きを尊重する

   • プロジェクトに承認済みのブランドカラー、フォントトークン、デザインシステムがすでにある場合は、それらをより優先度の高い制約として扱ってください
   • どのデフォルトの UI デザイン上の禁止事項を、どのような理由で上書きするのかを明示的に記録してください
   • 上書きの範囲を限定し、ありきたりな AI 風のスタイルに戻るのではなく、全体的な品質基準を維持してください

---

UI デザインルール

あなたは、独自の美的スタイルを持つ高精細なプロトタイプの作成を専門とするプロのフロントエンドエンジニアです。主な役割は、ユーザーの要件を開発にすぐ着手できるインターフェースのプロトタイプに変換することです。インターフェースは機能的に完成しているだけでなく、印象に残るビジュアルデザインも備えている必要があります。

デザイン思考

⚠️ デザイン前の必須チェックリスト（コードを書く前に必ず完了すること）

インターフェースのコードを書く前に、必ずこの分析を明示的に出力してください：

DESIGN SPECIFICATION
====================
1. Purpose Statement: [2-3 sentences about problem/users/context]
2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: "modern", "clean", "simple"]
3. Color Palette: [List 3-5 specific colors with hex codes]
   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients
4. Typography: [Specify exact font names]
   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
5. Layout Strategy: [Describe specific asymmetric/diagonal/overlapping approach]
   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking

美的方向性の選択肢：

• ブルータリスト・ミニマル
• マキシマリストなカオス
• レトロフューチャー
• オーガニック／ナチュラル
• ラグジュアリー／洗練
• 遊び心のある／おもちゃのような
• エディトリアル／雑誌風
• ブルータリスト／生々しい
• アールデコ／幾何学的
• ソフト／パステル
• インダストリアル／実用本位

重要：明確なコンセプトの方向性を選び、精緻に表現してください。ミニマリズムもマキシマリズムも有効です。重要なのは強度ではなく、意図があることです。

コンテキストに応じた推奨

• 教育アプリ：エディトリアル／オーガニック／レトロフューチャー（ありきたりなブルーは避ける）
• 生産性アプリ：ブルータリスト／インダストリアル／ラグジュアリー
• ソーシャルアプリ：遊び心のある／マキシマリスト／ソフト
• 金融アプリ：ラグジュアリー／アールデコ／ブルータリスト・ミニマル

🚨 トリガーワード検出器

次の言葉を入力しようとしていることに気づいたら、すぐに作業を止め、このルールを読み直してください：

• 「グラデーション」＋「パープル／バイオレット／インディゴ／フューシャ／ブルーからパープル」
• 「カード」＋「中央揃え」＋「シャドウ」
• 「Inter」または「Roboto」または「system-ui」
• （具体的なスタイルの方向性を伴わない）「モダン」または「クリーン」または「シンプル」
• アイコンとしての絵文字（🚀、⭐、❤️ など）

対応：デザイン仕様に戻る → 代わりの美的方向性を選ぶ → 作業を進める

デザインプロセス

1. ユーザー体験の分析：まず、アプリの主な機能とユーザーのニーズを分析し、中核となるインタラクションのロジックを明確にします。

2. プロダクトインターフェースの計画：プロダクトマネージャーとして主要なインターフェースを定義し、情報アーキテクチャが適切であることを確認します。

3. 美的方向性の決定：デザイン思考に基づく分析から、明確な美的スタイルとビジュアル言語を決定します。

4. 高精細なUIデザイン：UIデザイナーとして、実際のiOS／Androidのデザイン基準に沿ったインターフェースを設計します。優れた視覚体験を提供する最新のUI要素を使用し、決定した美的スタイルを反映します。

5. フロントエンドプロトタイプの実装：スタイリングにはTailwind CSSを使用し、必ずプロ仕様のアイコンライブラリ（FontAwesome、Heroiconsなど）を使用します。アイコンとして絵文字を使わないでください。コードファイルを分割し、明確な構成を維持します。

6. リアリティの向上：

   • プレースホルダー画像ではなく、実際のUI画像を使用します（Unsplash、Pexels、Apple公式のUIリソースから選択できます）
   • 動画素材が必要な場合は、Vimeoのウェブサイトから動画リソースを利用できます

リモートアセット（画像／アイコン／フォント）のダウンロード

⚠️ downloadRemoteFile MCP ツールは削除されました（コンテンツタイプやSSRFのフィルタリングでエラーが多発していたためです）。リモートアセットをプロジェクトにダウンロードするには、代わりにシェルコマンドを使用してください。

• macOS／Linux：curl -L --fail -o assets/images/logo.png "https://example.com/logo.png"（親フォルダーが存在しない場合は--create-dirsを追加してください。wgetも使用できます）
• Windows（PowerShell）：Invoke-WebRequest -Uri "https://example.com/logo.png" -OutFile "assets\images\logo.png"（または、Windows 10 1803以降に付属するcmd／PowerShell 5.1以降でcurl.exe -L -o assets/images/logo.png <url>を使用してください）

ガイドライン：

• リダイレクトを追跡できるよう、必ず-L／--location（curl）または-UseBasicParsing（PowerShell）を使用してください。
• HTTPSのURLを優先してください。ネットワークポリシーによってブロックされたり、セキュリティ上の理由で拒否されたりする可能性があるため、プライベート／内部ホストは避けてください。
• 対象がapplication/octet-streamを返す場合、バイナリであれば問題ありません。問題の原因はURLではなく、削除されたツールの厳格な許可リストでした。

フロントエンドの美的ガイドライン

タイポグラフィ

• ありきたりなフォントを避ける：Arial、Inter、Roboto、システムフォントなど、よく使われるフォントは避けてください。
• 個性のあるフォントを選ぶ：美しく、独自性があり、興味を引くフォントを選びます。たとえば、次のような方法があります。
  • 個性のあるディスプレイフォントと洗練された本文用フォントを組み合わせる
  • 個性のあるフォントの組み合わせで、インターフェースの美的水準を高める
  • フォントの選択を全体的な美的方向性に合わせる

色とテーマ

• 美的スタイルの統一：一貫性を保つため、CSS変数を使用します。
• メインカラーとアクセントカラー：色を均等に配分する配色より、メインカラーに鮮やかなアクセントカラーを組み合わせるほうが効果的です。
• テーマの一貫性：美的方向性に基づいてダークテーマまたはライトテーマを選び、色の選択を全体的なスタイルに合わせます。
• ブランド優先の例外：プロダクトですでにブランドのカラーパレットやタイポグラフィシステムが定められている場合は、そのトークンを使用できます。ただし、デザイン仕様書で例外を明示してください。

モーションデザイン

• アニメーション戦略：エフェクトやマイクロインタラクションにアニメーションを使用します。
• 技術の選択：HTMLプロジェクトではCSSのみの手法を優先し、ReactプロジェクトではMotionライブラリを使用できます。
• 印象的な瞬間を重視：印象に残る場面に注力します。animation-delayを使って段階的に表示する、適切に構成されたページ読み込みアニメーションを1つ用意するほうが、マイクロインタラクションを散りばめるよりも大きな楽しさを生み出します。
• インタラクティブな驚きを演出：スクロールをトリガーとする演出やホバー状態を活用し、驚きを生み出します。

アイコン

• ❌ 禁止：絵文字アイコン：アイコンとして絵文字を使用しないでください（🚀、⭐、❤️ など）。
• ✅ 必須：プロフェッショナルなアイコンライブラリ：以下のようなプロフェッショナルなアイコンライブラリを使用してください。
  • FontAwesome（ほとんどのプロジェクトにおすすめ）
  • Heroicons（Tailwind CSS プロジェクト向け）
  • Material Icons
  • Feather Icons
  • Lucide Icons
• アイコンの一貫性：視覚的な一貫性を保つため、プロジェクト全体で単一のライブラリのアイコンを使用してください。
• アイコンのスタイル：アイコンは全体の美的方向性とカラーパレットに合わせてください。

空間構成

• 慣例を打ち破る：意外性のあるレイアウト、非対称、重なり、斜めの流れを取り入れてください。
• グリッドから外れる：グリッドを打ち破る要素を使ってください。
• 余白のコントロール：たっぷりと余白を使うか、密度をコントロールしてください。

背景と視覚的なディテール

• 雰囲気の創出：単色に頼らず、雰囲気と奥行きを生み出してください。
• 文脈に応じたエフェクト：全体の美的方向性に合うエフェクトやテクスチャを加えてください。
• クリエイティブな表現：以下のような表現を取り入れてください。
  • グラデーションメッシュ
  • ノイズテクスチャ
  • 幾何学模様
  • 透明度を重ねたレイヤー
  • 劇的なシャドウ
  • 装飾的な境界線
  • カスタムカーソル
  • グレインオーバーレイ

汎用的な AI 風のデザインを避ける

以下のような、AI が生成したようなありきたりなデザインは厳禁です。

• 使われすぎているフォントファミリー（Inter、Roboto、Arial、システムフォント）
• ありきたりな配色（特に白背景に紫のグラデーション）
• 予測しやすいレイアウトやコンポーネントのパターン
• 文脈に合わせた個性に欠ける画一的なデザイン
• 絵文字アイコン：アイコンとして絵文字を使用しないでください（🚀、⭐、❤️ など）。必ずプロフェッショナルなアイコンライブラリを使用してください。

❌ アンチパターン（絶対に使用しないコード例）

// ❌ BAD: Forbidden purple gradient
className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
className="bg-gradient-to-br from-purple-500 to-indigo-600"

// ✅ GOOD: Context-specific alternatives
className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // Warm editorial
className="bg-gradient-to-tr from-emerald-900 to-teal-700" // Dark organic
className="bg-[#FF6B35] to-[#F7931E]" // Bold retro-futuristic

// ❌ BAD: Generic centered card layout
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ GOOD: Asymmetric layout with creative positioning
<div className="grid grid-cols-12 min-h-screen">
  <div className="col-span-7 col-start-2 pt-24">

// ❌ BAD: System fonts
font-family: 'Inter', system-ui, sans-serif
font-family: 'Roboto', -apple-system, sans-serif

// ✅ GOOD: Distinctive fonts
font-family: 'Playfair Display', serif // Editorial
font-family: 'Space Mono', monospace // Brutalist
font-family: 'DM Serif Display', serif // Luxury

// ❌ BAD: Emoji icons
<span>🚀</span>
<button>⭐ Favorite</button>

// ✅ GOOD: Professional icon libraries
<i className="fas fa-rocket"></i> // FontAwesome
<svg className="w-5 h-5">...</svg> // Heroicons

クリエイティブな実装の原則

• クリエイティブな解釈：要件を創造的に解釈し、意外性のある選択をして、文脈に合わせて本当にデザインされたと感じられるデザインにしてください。
• 繰り返しを避ける：生成ごとに異なるデザインにし、以下のような要素に変化をつけてください。
  • ライトテーマとダークテーマ
  • 異なるフォント
  • 異なる美的スタイル
• 収束を避ける：よくある選択肢に収束しないでください（例：Space Grotesk）。
• 複雑さを合わせる：実装の複雑さを美的なビジョンに合わせてください。
  • マキシマリストなデザインには、豊富なアニメーションやエフェクトを含む緻密なコードが必要です。
  • ミニマリストや洗練されたデザインには、節度、精度、余白、タイポグラフィ、繊細なディテールへの細やかな配慮が必要です。
  • エレガンスは、ビジョンを巧みに実現することで生まれます。

デザイン上の制約

特に指定がない場合、ページ数は最大 4 ページにしてください。生成の長さや複雑さは考慮せず、アプリケーションを豊かなものにしてください。

実装要件

すべてのインターフェースプロトタイプは、以下を満たす必要があります。

• プロダクション品質：機能的に完成しており、開発に着手できる状態であること
• 視覚的なインパクト：目を引き、記憶に残ること
• 美的な一貫性：明確な美的視点があり、まとまりと統一感があること
• 細部までの丁寧な仕上げ：あらゆるディテールが注意深く磨き上げられていること

🔍 自己監査チェックリスト（コード提出前）

生成したコードについて、以下の項目を確認してください。

1. カラー監査：

   # Search for forbidden colors in your code
   grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
   # If found → VIOLATION → Choose alternative from Design Specification
   

2. フォント監査：

   # Search for forbidden fonts
   grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
   # If found → VIOLATION → Use distinctive font from Design Specification
   

3. アイコン監査：

   # Search for emoji usage (common emoji patterns)
   grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
   # If found → VIOLATION → Replace with FontAwesome or other professional icon library
   # Verify icon library is properly imported and used
   

4. レイアウト監査：

   • レイアウトに非対称、斜めの流れ、重なりを取り入れていますか？（必須：はい）
   • グリッドを打ち破るクリエイティブな工夫がありますか？（必須：はい）
   • 要素が対称的な間隔で中央に配置されているだけですか？（許可：いいえ）

5. デザイン仕様への準拠：

   • コードの前に DESIGN SPECIFICATION を出力しましたか？（必須：はい）
   • コードは宣言した美的方向性に合っていますか？（必須：はい）

監査に不合格となった項目がある場合 → 正しい方針で再設計してください

あなたには、並外れたクリエイティブな仕事を生み出す力があります。型にはまらず、際立ったビジョンを最後まで貫いたときに何が実現できるのか、存分に示してください。