Back to Details

quick-mockups

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Quick Mockups

快速创建原型

Create multiple design mockups in parallel using the 
design-mockup
agent.
使用
design-mockup
Agent并行创建多个设计原型。

Usage

使用方法

When asked to create mockups for a feature:
  1. Create the output directory if it doesn't exist:
    docs/working/mockups/<feature-name>/
  2. Launch 3-5 parallel mockup agents using the Task tool with 
    subagent_type: design-mockup
  3. Each agent creates a unique variation with different:
    • Layout approaches (grid, list, masonry, cards)
    • Information hierarchy
    • Visual emphasis
    • Interaction patterns
当需要为某个功能创建原型时：
  1. 如果输出目录不存在则创建：
    docs/working/mockups/<feature-name>/
  2. 使用Task工具启动3-5个并行的原型Agent，设置
    subagent_type: design-mockup
  3. 每个Agent将创建一个独特的设计变体，差异体现在：
    • 布局方式（网格、列表、瀑布流、卡片式）
    • 信息层级
    • 视觉重点
    • 交互模式

Directory Structure

目录结构

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
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

Prompting Agents

向Agent发送提示词

When launching mockup agents, provide:
  1. Feature name - What page/component to design
  2. Key requirements - What must be included
  3. Variation focus - What makes this variation unique
  4. Reference context - Link to existing similar pages if helpful
Example prompt for agent:
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
启动原型Agent时，需提供以下信息：
  1. 功能名称 - 要设计的页面/组件
  2. 核心需求 - 必须包含的内容
  3. 变体侧重点 - 该变体的独特之处
  4. 参考上下文 - 如有需要，可提供现有相似页面的链接
Agent提示词示例：
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

After Creating Mockups

原型创建完成后

  1. List all created mockup files
  2. Summarize each variation's approach
  3. Ask user which direction to pursue or if they want more variations
  1. 列出所有已创建的原型文件
  2. 总结每个变体的设计思路
  3. 询问用户希望推进哪个方向，或者是否需要更多变体

Tips

小贴士

  • Create variations that are meaningfully different, not just minor tweaks
  • Consider mobile layouts in at least one variation
  • Show realistic content (names, numbers, times)
  • Include empty states where relevant
  • Use the Civitai design patterns from 
    .claude/agents/design-mockup.md
  • 创建具有实质性差异的变体，而非仅做细微调整
  • 至少在一个变体中考虑移动端布局
  • 使用真实感内容（名称、数字、时间等）
  • 在相关场景下包含空状态设计
  • 使用
    .claude/agents/design-mockup.md
    中的Civitai设计模式