Quick Mockups

design-mockup

Usage

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

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

Prompting Agents

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

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

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