Create multiple UI design mockups in parallel. Use when asked to create mockups, wireframes, or design variations for a feature. Creates HTML files using Mantine v7 + Tailwind following Civitai's design system.
Create multiple design mockups in parallel using the design-mockup agent.
When asked to create mockups for a feature:
Create the output directory if it doesn't exist:
docs/working/mockups/<feature-name>/
Launch 3-5 parallel mockup agents using the Task tool with subagent_type: design-mockup
Each agent creates a unique variation with different:
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
When launching mockup agents, provide:
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
.claude/agents/design-mockup.md