quick-mockups

快速设计稿

使用 design-mockup 代理并行创建多个设计稿。

用法

当被要求为某个功能创建设计稿时：

1. 创建输出目录（如果不存在）：

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

2. 使用 Task 工具启动 3-5 个并行设计稿代理，设置 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

提示代理

启动设计稿代理时，提供：

1. 功能名称 - 要设计的页面/组件
2. 关键要求 - 必须包含的内容
3. 变体重点 - 该变体的独特之处
4. 参考上下文 - 如有帮助，链接到现有类似页面

代理提示示例：

为 Crucible Discovery 页面创建设计稿。

要求：
- 活动中的 crucibles 列表，以卡片形式展示
- 显示：名称、奖池、剩余时间、参赛人数
- 筛选/排序控件（按奖金、即将结束、最新）
- “创建 Crucible”按钮

变体：网格布局，带有特色 crucible 的大号英雄卡片

输出到：docs/working/mockups/crucible-discovery/v1-featured-hero.html

创建设计稿后

1. 列出所有创建的设计稿文件
2. 总结每个变体的方法
3. 询问用户要采用哪个方向，或是否需要更多变体

提示

• 创建有意义的差异变体，而不仅仅是微调
• 至少在一个变体中考虑移动端布局
• 显示真实内容（名称、数字、时间）
• 在相关处包含空状态
• 使用 .claude/agents/design-mockup.md 中的 Civitai 设计模式