quick-mockups

クイックモックアップ

design-mockup エージェントを使用して、複数のデザインモックアップを並行して作成します。

使用方法

機能のモックアップ作成を依頼された場合：

1. 出力ディレクトリを作成します。存在しない場合：

   docs/working/mockups/<feature-name>/
   

2. Task ツールで subagent_type: design-mockup を指定し、モックアップエージェントを3～5個並行して起動します。

3. 各エージェントは独自のバリエーションを作成します。バリエーションでは、次の点を変えます。

   • レイアウトのアプローチ（グリッド、リスト、メイソンリー、カード）
   • 情報の階層
   • 視覚的な強調
   • インタラクションパターン

ディレクトリ構成

docs/working/mockups/
├── crucible-discovery/
│   ├── v1-grid-cards.html
│   ├── v2-featured-hero.html
│   ├── v3-compact-list.html
│   └── v4-masonry.html
├── crucible-rating/
│   ├── v1-side-by-side.html
│   ├── v2-stacked.html
│   └── v3-swipe.html
└── [feature-name]/
    └── [variation].html

エージェントへのプロンプト

モックアップエージェントを起動する際は、次の情報を伝えます。

1. 機能名 - デザインするページ／コンポーネント
2. 主な要件 - 含める必要がある要素
3. バリエーションの焦点 - このバリエーション独自の特徴
4. 参考情報 - 参考になる既存の類似ページへのリンク

エージェントへのプロンプト例：

Create a mockup for the Crucible Discovery page.

Requirements:
- List of active crucibles as cards
- Show: name, prize pool, time remaining, entry count
- Filter/sort controls (by prize, ending soon, newest)
- "Create Crucible" button

Variation: Grid layout with large hero card for featured crucible

Output to: docs/working/mockups/crucible-discovery/v1-featured-hero.html

モックアップ作成後

1. 作成したモックアップファイルをすべて一覧表示します。
2. 各バリエーションのアプローチを要約します。
3. どの方向性で進めるか、またはさらにバリエーションを作成するかをユーザーに尋ねます。

ヒント

• 小さな調整にとどめず、意味のある違いがあるバリエーションを作成します。
• 少なくとも1つのバリエーションでは、モバイルレイアウトを検討します。
• 現実的なコンテンツ（名前、数値、時刻）を表示します。
• 関連する場合は空の状態も含めます。
• .claude/agents/design-mockup.md にある Civitai のデザインパターンを使用します。