prototype-prompt-generator

プロトタイププロンプトジェネレーター

概要

UI/UX プロトタイプの作成に向けた、包括的で本番環境に対応できるプロンプトを生成します。ユーザーの要件を、デザインシステム、カラーパレット、コンポーネント仕様、レイアウト構造、実装ガイドラインを含む詳細な技術仕様に変換します。出力するプロンプトは、HTML/CSS/React のプロトタイプを作成する AI ツールや人間の開発者が最適に活用できるよう構成されています。

ワークフロー

ステップ 1：要件の収集

まず、ユーザーから必要な情報を収集します。以下について理解するため、的を絞った質問をします。

アプリケーションの種類と目的：

• どのような種類のアプリケーションですか？（例：エンタープライズツール、eコマース、ソーシャルメディア、ダッシュボード）
• 対象ユーザーは誰ですか？
• 主なユースケースとワークフローは何ですか？

プラットフォームと利用環境：

• 対象プラットフォーム：iOS、Android、Web、WeChat Mini Program、またはクロスプラットフォームですか？
• デバイス：携帯電話、タブレット、デスクトップ、またはレスポンシブ対応ですか？
• ビューポートのサイズが分かっている場合は、その寸法（例：iPhone は 375px、デスクトップは 1200px）

デザインの希望：

• デザインスタイル：WeChat Work、iOS Native、Material Design、Ant Design Mobile、またはカスタムですか？
• ブランドカラーやビジュアルの希望はありますか？
• デザインの参考例やインスピレーションはありますか？

機能要件：

• 必要な主要ページと機能
• ナビゲーション構造（タブ、ドロワー、スタックナビゲーション）
• 表示するデータ（指標、リスト、フォーム、メディア）
• ユーザーインタラクション（タップ、スワイプ、長押しなど）

コンテンツとデータ：

• 表示する実際のコンテンツ（現実的なテキスト、数値、名前）
• 空の状態、エラー状態、読み込み状態
• 特定のビジネスロジックやルール

技術的な制約：

• 希望するフレームワーク：プレーンな HTML、React、Vue、またはフレームワークに依存しないものですか？
• CSS の手法：Tailwind CSS、CSS Modules、styled-components のどれですか？
• 画像アセット：実際の画像、プレースホルダー、または特定のソースですか？
• CDN の依存関係やバージョン要件はありますか？

ユーザーに負担をかけないよう、質問は段階的に（一度に 2～3 個ずつ）行います。多くの詳細は、文脈から推測するか、妥当なデフォルト値で補えます。

ステップ 2：デザインシステムの選択

収集した要件に基づき、references/design-systems.md から適切なデザインシステムを選びます。

WeChat Work スタイル：

• 使用する場面：中国のエンタープライズアプリケーション、業務管理ツール、B2B プラットフォーム、社内業務システム
• 特徴：シンプルでプロフェッショナル、テクノロジーを感じさせる青を基調色とし、明確な情報階層を備えています
• 主な対象ユーザー：中国のビジネスユーザー、企業環境

iOS Native スタイル：

• 使用する場面：iOS 専用アプリ、Apple エコシステムとの連携、iPhone/iPad ユーザーを対象とするアプリ
• 特徴：ミニマルでゆとりのあるレイアウト、San Francisco フォント、システムカラー
• 主な対象ユーザー：Apple ユーザー、コンシューマーアプリ、コンテンツ重視のアプリケーション

Material Design スタイル：

• 使用する場面：Android 優先のアプリ、Google エコシステムとの連携、Material UI を使ったクロスプラットフォームアプリ
• 特徴：大胆なグラフィック、エレベーションシステム、リップルエフェクト、Roboto フォント
• 主な対象ユーザー：Android ユーザー、Google サービス、開発者向けツール

Ant Design Mobile スタイル：

• 使用する場面：複雑なデータ入力やフォームを扱うエンタープライズ向けモバイルアプリケーション
• 特徴：効率を重視し、一貫性のあるコンポーネントを備え、ビジネスアプリケーションに適しています
• 主な対象ユーザー：ビジネスユーザー、エンタープライズ向けモバイルアプリ、データ量の多いインターフェース

ユーザーがデザインシステムを指定していない場合は、次の基準に基づいて提案します。

• 地域：中国のユーザー → WeChat Work、西洋のユーザー → iOS/Material
• プラットフォーム：iOS → iOS Native、Android → Material Design
• アプリケーションの種類：エンタープライズ B2B → WeChat Work または Ant Design、コンシューマーアプリ → iOS または Material

正確なカラーコード、コンポーネントの寸法、インタラクションパターンを確認するため、references/design-systems.md からデザインシステムの仕様をすべて読み込みます。

ステップ 3：プロンプトを構成する

references/prompt-structure.md のテンプレートを使って、以下のセクションを含む包括的なプロンプトを作成します。

1. 役割の定義 プロトタイプに関連する専門知識を定義します。

# Role
You are a world-class UI/UX engineer and frontend developer, specializing in [specific domain] using [technologies].

2. タスクの説明 構築するものとデザインスタイルを明確に記述します。

# Task
Create a [type] prototype for [application description].
Design style must strictly follow [design system], with core keywords: [3-5 key attributes].

3. 技術スタックの仕様 すべての技術、フレームワーク、リソースを列挙します。

• ファイル構成（単一の HTML、複数ページ、コンポーネントベース）
• フレームワークとバージョン（例：Tailwind CSS CDN）
• デバイスのシミュレーション（ビューポートサイズ、デバイスの外枠）
• アセットのソース（Unsplash、Pexels、実際の画像）
• アイコンライブラリ（FontAwesome、Material Icons）
• カスタム設定（Tailwind の設定、テーマ変数）

4. ビジュアルデザイン要件 詳細な仕様を提示します。

(a) カラーパレット： すべての色を 16 進数コードとともに記載します。

• 背景色（メイン、セクション、カード）
• プライマリカラーとアクセントカラー、および用途
• ステータスカラー（成功、警告、エラー）
• テキストカラー（タイトル、本文、セカンダリ、無効状態）
• UI 要素の色（枠線、区切り線）

(b) UI スタイルの特徴： コンポーネントの種類ごとに指定します。

• カード：背景、角丸、シャドウ、枠線、パディング
• ボタン：バリエーション（プライマリ、セカンダリ、ゴースト）、寸法、状態
• アイコン：スタイル、サイズ、色、コンテナ
• リスト項目：レイアウト、高さ、区切り線のスタイル、アクティブ状態
• シャドウ：種類と用途

(c) レイアウト構成： 主要な各セクションについて説明します。

• 上部ナビゲーションバー：高さ、タイトルのスタイル、アイコン、背景
• コンテンツ領域：グリッド、カード、リスト、間隔
• クイックアクセス領域：アイコンのグリッド、レイアウト
• データ表示カード：指標、レイアウト、スタイル
• 機能リスト：構成、アイコン、インタラクション
• 下部タブバー：高さ、タブ、アクティブ／非アクティブ状態、バッジ

(d) ページ固有のコンテンツ： プレースホルダーではなく、実際のコンテンツを提示します。

• 実際のページタイトルとセクション見出し
• 実際のデータ（数値、名前、日付）
• 機能名と説明
• ボタンラベルとリンクテキスト
• 現実的なコンテンツを含むリスト項目の例

5. 実装の詳細 技術的な仕様を記載します。

• ページ幅と中央揃えの方法
• レイアウトシステム（Flexbox、Grid、またはその両方）
• ナビゲーションの固定／スティッキー配置
• 間隔のスケール（マージン、パディング、ギャップ）
• タイポグラフィ（フォントファミリー、サイズ、ウェイト）
• インタラクティブな状態（ホバー、アクティブ、フォーカス、無効状態）
• アイコンのソースと使用方法
• 枠線と区切り線のスタイル

6. Tailwind の設定 Tailwind CSS を使用する場合は、カスタム設定を提示します。

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#3478F6',
        // ... all custom colors
      }
    }
  }
}

7. コンテンツの構成と階層 ページ構成をツリー形式で示します。

Page Name
├─ Section 1
│  ├─ Element 1
│  └─ Element 2
├─ Section 2
│  ├─ Subsection A
│  │  ├─ Item 1
│  │  └─ Item 2
│  └─ Subsection B
└─ Section 3

8. 特別な要件 固有の考慮事項を明示します。

• デザインシステム固有のガイドライン
• プライマリカラーの適用シーン
• インタラクションの詳細（タップ時のフィードバック、アニメーション、ジェスチャー）
• アクセシビリティ要件（コントラスト、タッチターゲット、ARIA）
• パフォーマンスに関する考慮事項（画像の最適化、遅延読み込み）

9. 出力形式 成果物を正確に指定します。

# Output Format

Please output complete [file type] code, ensuring:
1. [Requirement 1]
2. [Requirement 2]
...

The output should be production-ready and viewable at [viewport] on [device].

ステップ 4：具体的な値を設定する

すべてのテンプレートのプレースホルダーを、具体的な値に置き換えます。

曖昧な表現を正確な仕様に置き換えます：

• ❌ 「青色を使う」→ ✅ 「プライマリ：#3478F6（テックブルー）、リンク：#576B95（リンクブルー）」
• ❌ 「ボタンの角を丸くする」→ ✅ 「角丸：4px（Tailwind：rounded）」
• ❌ 「間隔を少し空ける」→ ✅ 「カード間隔：12px、ページ余白：16px」
• ❌ 「ユーザー情報を表示する」→ ✅ 「ユーザー名（15px太字）、メールアドレス（13pxグレー）、アバター（48pxの円形）を表示する」

プレースホルダーではなく、実際のコンテンツを使います：

• ❌ 「Lorem ipsum dolor sit amet」→ ✅ 「顧客総数：14、今日の新規顧客数：1、今日の売上：¥0.00」
• ❌ 「[Company Name]」→ ✅ 「Acme Insurance Co.」
• ❌ 「機能 1、機能 2、機能 3」→ ✅ 「顧客連絡先、顧客のモーメント、顧客グループ」

すべての寸法を指定します：

• コンポーネントの高さ（44px、50px、64px）
• フォントサイズ（13px、15px、16px、18px）
• 間隔の値（8px、12px、16px、24px）
• アイコンのサイズ（24px、32px、48px）
• 角丸（4px、8px、10px）

すべての状態を定義します：

• 通常：基本の色とスタイル
• ホバー：該当する場合（デスクトップ）
• アクティブ／押下時：不透明度または背景の変化
• 無効：色をグレーにし、不透明度を下げる
• 選択済み：ハイライト色（多くの場合、ブランドのプライマリカラー）

すべての色を含めます： 記載する色にはすべて16進数コードを付けてください。正確な値については、references/design-systems.md にある選択したデザインシステムを参照してください。

ステップ 5：品質保証

最終プロンプトを提示する前に、references/prompt-structure.md のチェックリストに照らして確認してください。

完全性の確認：

• 関連する専門知識を備えた役割が明確に定義されている
• 構築するものとデザインスタイルが、タスクに明記されている
• すべての技術スタックのコンポーネントが、バージョン／CDNとともに記載されている
• すべての色に16進数コードを付けた、完全なカラーパレットがある
• すべての UI コンポーネントについて、正確な寸法とスタイルが指定されている
• ページレイアウトが正確な寸法とともに詳しく説明されている
• 実際の現実的なコンテンツが用意されている（「Lorem Ipsum」や「[Name]」のようなプレースホルダーは使わない）
• 実装の詳細にすべての技術要件が含まれている
• Tailwind CSS を使用する場合、Tailwind の設定が含まれている
• コンテンツ階層がツリー構造で可視化されている
• 特別な要件やインタラクションが記載されている
• すべての成果物とともに、出力形式が明確に定義されている

明確さの確認：

• 曖昧な用語や漠然とした説明（例：「パディングを少し」「きれいな色」）がない
• すべての寸法が単位（px、rem、%、vh など）とともに指定されている
• すべての色に16進数コードが定義されている（例：「青色」だけではなく #3478F6）
• コンポーネントの状態（通常、ホバー、アクティブ、無効、選択済み）が説明されている
• レイアウトの関係（親子関係、間隔、配置、z-index）が明確である

具体性の確認：

• デザインシステムが明示されている（WeChat Work、iOS Native、Material Design など）
• ビューポートの寸法が示されている（例：iPhone の 375px × 812px）
• タイポグラフィのスケール（サイズ、ウェイト、行の高さ）が定義されている
• アニメーションがある場合、インタラクティブな動作が時間も含めて記載されている
• 長いテキストのオーバーフロー、空の状態、読み込み、エラーなどのエッジケースが考慮されている

現実性の確認：

• ラテン語のプレースホルダーテキストではなく、実際のコンテンツ例がある
• 信頼できるデータ値（現実的な数値、名前、日付、金額）がある
• 実用的な機能セットになっている（過剰に複雑でも、仕様不足でもない）
• 指定されたユースケースに適した複雑さである

技術的な正確性の確認：

• 有効な Tailwind のクラス名が使われている（Tailwind を使用する場合）
• バージョンを含む正しい CDN リンクがある（例：https://cdn.tailwindcss.com）
• 適切な HTML 構造が想定されている（セマンティック要素、階層）
• 実現可能なレイアウト手法が使われている（動作する Flexbox／Grid のパターン）
• アクセシブルなマークアップが考慮されている（タッチ領域 ≥44px、色のコントラスト）

チェックに不備がある場合は、先に進む前にプロンプトを改善してください。

ステップ 6：提示して反復する

生成したプロンプトを簡単な説明とともにユーザーに提示します。

• どのデザインシステムを選択したか、その理由
• 主なデザイン上の判断
• 適用した仮定やデフォルト設定
• プロンプトの使い方（コピーして別の AI ツールや開発者に渡す）

調整の選択肢を提示します。

• 「色や余白を調整しますか？」
• 「ページや機能を追加しますか？」
• 「デザインシステムを変更しますか？」
• 「特に強調したいインタラクションやアニメーションはありますか？」

フィードバックに基づいて反復します。 ユーザーから変更のリクエストがあった場合：

1. プロンプトの該当するセクションを更新します
2. すべてのセクションで一貫性を保ちます
3. 品質チェックリストに照らして再確認します
4. 更新したプロンプトを提示します

保存またはエクスポートします。 プロンプトをファイルに保存するか、ユーザーに確認します。

• ドキュメント用の Markdown ファイル
• コピーしやすいテキストファイル
• すぐに使えるコードブロックとして記載

ベストプラクティス

1. 高品質を標準とします： ユーザーの要件が最小限でも、包括的なプロンプトを作成します。後から詳細を追加するより、削除するほうが簡単です。以下を含めます：

• 完全なカラーパレット（最低8～12色）
• 一般的なUIコンポーネントすべて（ボタン、カード、リスト、入力欄）
• 複数のコンポーネント状態（通常、アクティブ、無効）
• レスポンシブ対応への配慮
• アクセシビリティの基本事項（コントラスト、タッチターゲット）

2. デザインシステムのデフォルトを適切に活用します： ユーザーの要件が曖昧な場合：

• デザインシステム全体を一貫して適用します
• デザインシステムの標準コンポーネント寸法を使用します
• 確立されたパターンに従います（例：WeChat Workの高さ64pxのリスト項目）
• プラットフォームで一般的なインタラクションパターンを含めます

3. 簡潔さより明確さを優先します： 長く詳細なプロンプトは、短く曖昧なものより優れたプロトタイプを生み出します。以下を含めます：

• 色名ではなく正確な16進コード
• 相対的な表現ではなく正確な寸法
• 一般的な説明ではなく具体的なコンポーネントのレイアウト
• プレースホルダーテキストではなく実際のコンテンツ

4. モバイルファーストで考えます： モバイルアプリケーションでは、常に以下を考慮します：

• セーフエリア（iOSのノッチ、Androidのジェスチャーバー）
• タッチターゲットのサイズ（最小44px × 44px）
• 親指が届く範囲（上部ではなく下部にナビゲーションを配置）
• 主に縦向き（横向きは副次的に考慮）
• 可能な場合は片手操作

5. 柔軟性と具体性のバランスを取ります：

• 中核となるデザイン要素（色、タイポグラフィ、主要コンポーネント）を具体的に指定します
• 実装の詳細（正確なアニメーションのタイミング、細かな間隔の調整）には柔軟性を持たせます
• 「必須事項」を明確に指定し、「あると望ましい事項」は任意として示します

6. ユーザーの利用過程全体を考慮します： 以下の仕様を含めます：

• 入口（該当する場合はスプラッシュ画面、オンボーディング）
• 主要なワークフロー（主要機能の理想的な利用経路）
• エッジケース（空の状態、エラー状態、読み込み状態）
• 終了地点（ログアウト、戻る操作、完了状態）

7. 仕様だけでなく背景も伝えます： デザイン上の判断の「理由」を説明します：

• 「企業向けの場面で信頼性とプロフェッショナルさを伝えるテックブルー（#3478F6）」
• 「モバイルで親指によるタップを快適にする、高さ64pxのリスト項目」
• 「主要機能にすばやくアクセスできる、画面下部に固定したタブバー」

8. 技術的な実現可能性を検証します： プロンプトを確定する前に：

• 説明したデザインをCSS/Tailwindクラスで実現できることを確認します
• レイアウトパターンが指定したグリッド／フレックスボックスの手法で機能することを検証します
• 指定したビューポートにすべてのコンテンツを収められることを確認します
• CDNリンクとバージョンが正しく、利用可能であることを確認します

9. すぐに実行できる形にします： プロンプトを、すぐに実装を始められる内容にします：

• 必要なCDNリンクとインポートをすべて含めます
• 完全なTailwind設定を記述します（「必要に応じて追加」などは不可）
• ファイル構造と構成を指定します
• 成果物（HTMLファイル、Reactコンポーネントなど）を明確に定義します

10. 疑問を先回りして解消します： プロンプトでよくある不確定要素に対応します：

• フォントの代替指定（例：「sans-serif」のシステムフォントスタック）
• 画像の寸法とアスペクト比
• アイコンの使い分け（FontAwesome、SVG、絵文字のどれを使うか）
• z-indexの重なり順（何を最前面に表示するか）
• オーバーフロー時の動作（スクロール、省略表示、折り返し）

一般的なパターン

パターン1：企業向け業務ダッシュボード（WeChat Workスタイル）

一般的な構成：

• 上部のナビゲーションバー（44px、タイトル＋検索／メニューアイコン）
• クイックアクセスグリッド（4列のアイコングリッド）
• データサマリーカード（主要指標を横方向に配置）
• 機能リスト（アイコン＋テキストの行、高さは各64px）
• 下部のタブバー（5個のタブ、高さ50px）

主要な要素：

• 主要なアクションとアクティブ状態にテックブルー（#3478F6）を使用
• 薄いグレーの背景に、控えめな影を付けた白いカード
• 角丸（rounded-lg）コンテナに48pxのアイコン
• ナビゲーション用の右矢印インジケーター

パターン 2：iOS コンシューマーアプリ（iOS ネイティブスタイル）

一般的な構成：

• 大きなタイトルのナビゲーションバー（展開時は 96px）
• カードベースのコンテンツセクション
• システム標準のリスト（行の高さは最低 44px）
• SF Symbols アイコンを使用したタブバー

主な要素：

• インタラクティブ要素にはシステムブルー（#007AFF）を使用
• ゆとりのある余白（マージン 20px、パディング 16px）
• 左側にインセットを設けた控えめな区切り線
• ナビゲーションに半透明のぼかし効果

パターン 3：Android アプリ（マテリアルデザインスタイル）

一般的な構成：

• トップアプリバー（モバイルでは 56px、タブレットでは 64px）
• 主な操作用の FAB（フローティングアクションボタン）
• エレベーションを付けたカードベースのコンテンツ
• ボトムナビゲーションまたはナビゲーションドロワー

主な要素：

• エレベーションシャドウを付けた鮮やかなプライマリカラー（#6200EE）
• タップ時のリップル効果
• 16dp のグリッドシステム
• マテリアルアイコン（24px）

パターン 4：エンタープライズフォームアプリ（Ant Design Mobile）

一般的な構成：

• シンプルなナビゲーションバー（45px）
• 入力欄をグループ化したフォームセクション
• 詳細情報を含むリストビュー
• プライマリボタンを備えた固定式の下部アクションバー

主な要素：

• 操作にはプロフェッショナルブルー（#108EE9）を使用
• 情報を密に配置したレイアウト
• 明確なフォームフィールドラベルと入力検証
• 複数ステップのフロー向けのパンくずリストまたはステップインジケーター

トラブルシューティング

問題：ユーザーの要件が曖昧すぎます 解決策： 焦点を絞った質問をし、類似アプリの例を示し、選択できるデザインシステムを提案するか、デフォルトのプロンプトを作成して調整を提案します。

問題：ユーザーが複数のデザインスタイルを混在させようとしています 解決策： 全体の構成と一貫性を保つための主要なデザインシステムを選び、他のシステムの特定の要素をアクセントとして取り入れます。トレードオフについて説明します。

問題：ユーザーが実現不可能な要件や相反する要件を指定しています 解決策： 矛盾点を特定し、問題となる理由（例：「64px のアイコンは 44px のナビゲーションバーに収まりません」）を説明して、代替案を提案し、詳細を確認します。

問題：1 つのプロンプトに機能が多すぎます 解決策： まず主要なページ／ワークフローに焦点を当て、そのプロンプトを生成してから、追加機能用に別のプロンプトを作成します。プロンプト間の一貫性を保ちます。

問題：ユーザーに技術的な知識がありません 解決策： 専門用語を避け、デザイン上の判断を平易な言葉で説明し、技術用語ではなく視覚的な説明を使い、プロンプトに役立つコメントを含めます。

問題：プロトタイプ用のプロンプトで良い結果が得られません 解決策： 品質チェックリストに照らして見直し、すべての色に 16 進数コードが指定されていること、すべての寸法が明記されていることを確認します。より具体的なコンテンツ例を追加し、曖昧な表現がないか確認します。

リソース

このスキルには、プロンプト生成を支援する参考ドキュメントが含まれています。

references/design-systems.md

主要なデザインシステムの包括的な仕様：

• WeChat Work スタイル：中国のエンタープライズアプリケーション
• iOS ネイティブスタイル：Apple エコシステムのアプリ
• マテリアルデザイン：Google／Android アプリ
• Ant Design Mobile：エンタープライズ向けモバイルアプリ

各デザインシステムには以下が含まれています：

• 16 進数コード付きの完全なカラーパレット
• コンポーネントの仕様（寸法、間隔、状態）
• タイポグラフィのスケール（サイズ、ウェイト、行の高さ）
• インタラクションパターン（アニメーション、ジェスチャー、フィードバック）
• レイアウトガイドライン（グリッド、間隔、安全領域）
• コード例（Tailwind クラス、CSS スニペット）

参照するタイミング： 正確なデザインシステムの仕様を確保するため、プロンプトを生成する際は常にこのファイルを読み込みます。色の値、コンポーネントの寸法、インタラクションパターンを設定するために使用してください。

references/prompt-structure.md

プロンプトの構成に関する詳細なテンプレートとガイドライン：

• 標準的なプロンプトの構成（9 セクション）
• プレースホルダーを使用したテンプレート構文
• 各セクションの例
• 品質チェックリスト（網羅性、明確さ、具体性）
• ワークフローのガイダンス（要件 → プロンプト → 反復）
• 効果的なプロンプトを作成するためのヒント
• 避けるべきよくある落とし穴

参照するタイミング： 生成するすべてのプロンプトの骨組みとして使用してください。これにより、作成するすべてのプロンプトの一貫性と網羅性が保たれます。

---

注： このスキルはプロトタイプ作成用のプロンプトを生成するものであり、プロトタイプ自体は作成しません。出力されるのは、実際の HTML/CSS/React コードを生成するために、別の AI ツール、開発者、またはデザインツールに渡せる、包括的なテキストプロンプトです。