quick-mockups

快速 Mockups

使用 design-mockup 代理程式並行建立多個設計 mockup。

使用方式

當被要求為某功能建立 mockup 時：

1. 建立輸出目錄（如果不存在）：

   docs/working/mockups/<功能名稱>/
   

2. 使用 Task 工具啟動 3-5 個並行 mockup 代理程式，設定 subagent_type: design-mockup

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
└── [功能名稱]/
    └── [變體].html

提示代理程式

啟動 mockup 代理程式時，提供：

1. 功能名稱 - 要設計的頁面/元件
2. 主要需求 - 必須包含的內容
3. 變體重點 - 此變體的獨特之處
4. 參考上下文 - 如有幫助，提供現有類似頁面的連結

代理程式提示範例：

為 Crucible Discovery 頁面建立 mockup。

需求：
- 以卡片形式列出進行中的 crucibles
- 顯示：名稱、獎金池、剩餘時間、參賽人數
- 篩選/排序控制（依獎金、即將結束、最新）
- 「建立 Crucible」按鈕

變體：網格版面，搭配大型英雄卡片顯示精選 crucible

輸出至：docs/working/mockups/crucible-discovery/v1-featured-hero.html

建立 Mockups 之後

1. 列出所有建立的 mockup 檔案
2. 總結每個變體的做法
3. 詢問使用者要朝哪個方向進行，或是否想要更多變體

提示

• 建立有意義不同的變體，而不只是微調
• 至少一個變體中考慮行動版面
• 顯示真實內容（名稱、數字、時間）
• 在相關處包含空狀態
• 使用 .claude/agents/design-mockup.md 中的 Civitai 設計模式