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 Design Activation Checklist を読みます。

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

次のような、あらゆるプロジェクトのフロントエンド UI デザインとインターフェース作成に使用します。

• Web ページやインターフェースの作成
• ミニプログラムのページやインターフェースの作成
• フロントエンドコンポーネントのデザイン
• プロトタイプやインターフェースの作成
• スタイリングや視覚効果への対応
• ユーザーインターフェースを含むあらゆる開発タスク

使用しない場合：

• バックエンドのロジックや API の設計
• データベーススキーマの設計（postgresql-development-cloudbase スキルを使用してください）
• UI コンポーネントを含まない純粋なビジネスロジック

---

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

1. 必須：最初にデザイン仕様を完成させる

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

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

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

3. ありきたりな AI 風のデザインを避ける

   • 禁止色（紫、バイオレット、インディゴ、フューシャ、青紫のグラデーション）は使用しないでください
   • 禁止フォント（Inter、Roboto、Arial、Helvetica、system-ui、-apple-system）は使用しないでください
   • 説得を目的とする画面では、創意工夫を加えずに標準的な中央寄せレイアウトを使わないでください（操作画面と閲覧画面では中央寄せが適切です。以下の画面の判断基準を参照してください）
   • アイコンに絵文字を使わず、必ずプロ仕様のアイコンライブラリ（FontAwesome、Heroicons など）を使用してください

4. 提出前に自己監査を実施する

   • 色の監査（禁止色が使われていないか確認）
   • フォントの監査（禁止フォントが使われていないか確認）
   • アイコンの監査（絵文字アイコンがなく、プロ仕様のアイコンライブラリを使っていることを確認）
   • レイアウトの監査（画面の種類ごとに判断し、画一的な基準を適用しない）
   • 測定可能な項目の確認（コントラスト、間隔、状態、はみ出し）
   • デザイン仕様への準拠確認

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

   • プロジェクトに承認済みのブランドカラー、フォントトークン、またはデザインシステムがすでにある場合は、これらを優先度の高い制約として扱ってください
   • どのデフォルトの UI デザイン上の禁止事項を上書きするのか、その理由とともに明記してください
   • 上書きの範囲を限定し、ありきたりな AI 風のスタイルに戻すのではなく、全体の品質基準を維持してください
   • 該当するもの：プロジェクトに DESIGN.md、デザイントークンファイル、または公開済みのブランド仕様があり、採用する具体的なトークンを特定できる
   • 該当しないもの：「こちらのほうが好みだから」、または禁止事項をすり抜けるためだけに調整した値

---

UI デザインルール

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

デザインの考え方

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

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

DESIGN SPECIFICATION
====================
0. Scene: [Persuade / Operate / Read — pick one; it decides every criterion below]
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: [the scale: breakpoint count, container width, column count, spacing base; on persuade surfaces only, which line breaks and why]
   ❌ FORBIDDEN: a persuade surface in a standard centered layout with no breaking at all; starting any page without breakpoint and spacing scales

デザインの方向性の選択肢：

• 極限までミニマル
• 混沌としたマキシマリズム
• レトロフューチャー
• オーガニック／自然
• ラグジュアリー／洗練
• 遊び心のある／おもちゃのような
• エディトリアル／雑誌風
• ブルータリズム／粗削り
• アールデコ／幾何学的
• ソフト／パステル
• インダストリアル／実用本位

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

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

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

🚨 トリガーワード検出器

以下の言葉を入力しようとしたら、すぐに手を止めてこのルールを読み直してください：

• 「gradient」と「purple／violet／indigo／fuchsia／blue-purple」の組み合わせ
• 「card」と「centered」と「shadow」の組み合わせ
• 「Inter」または「Roboto」または「system-ui」
• 「modern」「clean」「simple」（具体的なスタイルの方向性を示さずに使用する場合）
• アイコンとしての絵文字（🚀、⭐、❤️ など）

対応：デザイン仕様に戻り、別の美的スタイルを選んでから進めてください

デザインプロセス

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 ではなく、削除されたツールの厳格な許可リストにありました。

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

基準を選ぶ前に、シーンを見極める

同じルールでも、次の 3 種類の画面では互いに相反します。まずシーンを特定してください。

シーン	一般的な画面	ここで優れたレイアウトとは
訴求	ランディングページ、マーケティング用ヒーロー、キャンペーンページ	明確なビジュアル上の主張があり、非対称性、グリッドからの逸脱、意図的なインパクトが許容されます
操作	管理パネル、フォーム、コンソール、ダッシュボード	予測しやすい構造、安定した情報密度、標準的なコントロールを備え、ユーザーに配置を覚え直させません
閲覧	ドキュメント、ブログ、ヘルプセンター	読者がたどれる直線的な流れ、65～75ch の行幅、期待される位置にあるナビゲーション

• 訴求を目的とする画面では記憶に残ることが求められます。操作と閲覧を目的とする画面では予測しやすさが求められます。
• 後者の 2 つでは、目新しいレイアウトは利点ではなく欠点です。 ドキュメントページで非対称なグリッドを採用すると、訪れるたびに読者が位置関係を把握し直すことになります。
• 1 つのサイトに 3 種類すべての画面を含めることはできますが、1 つのページが属するのはそのうち 1 種類だけです。

タイポグラフィ

• 一般的なフォントを避ける：Arial、Inter、Roboto、システムフォントなど、広く使われているフォントは使用しないでください。
• 個性のあるフォントを選ぶ：たとえば、美しく、ユニークで、興味を引くフォントを選びます。
  • 個性のあるディスプレイフォントと、洗練された本文用フォントを組み合わせます。
  • 特徴的なフォントの組み合わせを検討し、インターフェースの美的レベルを高めます。
  • フォントの選択は、全体的な美的方向性に沿ったものにします。

色とテーマ

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

モーションデザイン

• アニメーション戦略：エフェクトやマイクロインタラクションにアニメーションを使用します
• 技術の選択：HTML では CSS のみのソリューションを優先し、React プロジェクトでは Motion ライブラリを使用できます
• インパクトの大きい演出：インパクトの大きい演出に集中します。適切に構成されたページ読み込みアニメーション（animation-delay を使った段階的な表示）は、散在するマイクロインタラクションよりも大きな楽しさを生み出します
• インタラクティブな驚き：スクロールトリガーやホバー状態を使って、意外性を演出します

アイコン

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

グリッドとブレークポイント

コンポーネントを描く前にスケールを設定します。スケールはインフラであり、コンポーネントごとに決めるものではありません。

• ブレークポイントは最大4つとし、サイト全体で再利用します。「ここが窮屈になったから」という理由でブレークポイントを追加してはいけません。その数値は、入力した人の頭の中以外では何の意味も持ちません。
• コンテナ幅は1つにします。独自の1200とフレームワークのデフォルトの1140が共存すると、スタイルを変更するたびに、どちらが優先されるのかを推測することになります。
• 場面に応じて構造を選びます：
  • 説得する：カラムシステムを使用します。セクションごとのカード数（8/4/3/2）は同じカラムに収まり、共通の約数を持つ必要があります。セクションごとに独自の repeat(N, 1fr) を使うなら、それはグリッドとは言えません。
  • 操作する／読む：カラムシステムは使いません。必要なのはコンテナ、65～75ch の本文幅、固定のカラム比率です。本文幅は厳守すべき制約であり、ここでカラムグリッドを使うのは過剰設計です。
• 間隔はスケールに基づけます：4を基準にした値（4/8/12/16/24/32/64）を使い、単発の値は使いません。
• 均等なカードのグリッドを使う前に問い直します：これらの項目は本当に同等でしょうか？ 上の説明文ですでに名前が挙がっている項目があるなら、そのグリッドは設計上の判断ではなく、フレームワークのデフォルトにすぎません。

空間構成

グリッドを崩す前に、まずグリッドを作ります。スケールなしに崩すのは、単に手作業で配置しているだけです。

• 説得する：非対称、重なり、斜めの流れ、グリッドを崩す要素を取り入れられます。崩すには理由が必要です。どの線を崩すのか、そしてなぜその線を崩すべきなのかを明確にします。
• 操作する／読む：崩してはいけません。繰り返しは弱点ではなく、読者が身体で覚えられるようにするものです。
• ネガティブスペース：リズムを生み出せるほど十分に広くするか、情報を伝えられるほど密にします。すべてのブロックに同じ間隔を適用するのが最悪です。スケールに沿った24pxであっても、すべてが同じ重さになると、読者が落ち着ける場所がなくなります。

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

• 雰囲気の創出：単色に頼るのではなく、雰囲気と奥行きを作ります
• 文脈に沿ったエフェクト：全体の美しさに合ったエフェクトやテクスチャを加えます
• クリエイティブな表現：次のような表現を取り入れます：
  • グラデーションメッシュ
  • ノイズテクスチャ
  • 幾何学模様
  • レイヤー状の透明表現
  • 印象的なシャドウ
  • 装飾的なボーダー
  • カスタムカーソル
  • 粒子のオーバーレイ

汎用的な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 on persuade surfaces: Generic centered card layout
// (on Operate and Read surfaces the centered version is correct — the defect there
//  is an undesigned page, not the centering)
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ GOOD on persuade surfaces: 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. レイアウトの監査（画一的な基準ではなく、画面の種類に応じて判断）：

   • 説得画面：非対称性や崩しを取り入れましたか。どのラインを崩し、その理由を説明できますか。
   • 操作画面／閲覧画面：予測可能な構成で、密度が安定し、本文の行長が65～75chの範囲内ですか。
   • すべての画面：ブレークポイントは4個以下に抑え、サイト全体で再利用していますか。コンテナ幅は統一されていますか。間隔はスケールに基づいていますか。

5. 測定可能なチェック（印象ではなく、測定できる基準）：

   • コントラスト：本文とプレースホルダーテキストは4.5:1以上、大きな文字は3:1以上ですか。色のついた面では、セカンダリテキストをグレーにするのではなく、その面の色相から色味を調整してください。色の上にグレーを置くと濁って見え、基準を満たせません。
   • 間隔：まとまりのある要素間は狭く、離れたグループ間は広くしていますか。見出しの上には、下よりも大きな余白がありますか。印象ではなく、計算された値を確認してください。
   • 字間：-0.04em未満にしないでください。通常は-0.02～-0.03emの方が読みやすくなります。
   • ブラウザーの表示領域：テキスト選択、キャレット、スクロールバー、フォーカスリング、下線のオフセット、表形式の数字などは、デフォルトのままではデザインシステムに適合しません。配色に合わせて調整してください。ページが組み立てられたものではなく、意図をもって作られたことを示す、最も手軽なサインです。
   • 状態：ホバー、無効、読み込み中、エラー、空の各状態をデザインしていますか。
   • オーバーフロー：実際の文言を使い、すべてのブレークポイントで、折り返しが不自然な箇所や切れている箇所がないか確認してください。

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

   • コードの前にデザイン仕様を出力しましたか。（必須：はい）
   • コードは宣言した美的方向性に合っていますか。（必須：はい）

監査に1つでも不合格があれば → 適切な方針で再設計してください

並外れた創造的な仕事を実現できることを忘れないでください。遠慮せず、型にはまらない発想と独自のビジョンへの徹底的な取り組みで、何が生み出せるかを示してください。