Quick Mockups

What it does

The Quick Mockups skill enables an AI agent to generate multiple design mockups for a given feature in parallel. It utilizes the design-mockup subagent type and leverages the Task tool to create several variations simultaneously, each exploring different layout approaches (grid, list, masonry, cards), information hierarchy, visual emphasis, and interaction patterns. The skill is designed for rapid iteration and exploration of various visual concepts during the design process.

When to use it

• When creating mockups for a new feature or component.
• To quickly explore different layout options for a page (e.g., grid vs. list).
• For rapidly prototyping interaction patterns within a user interface.

Key capabilities

• Generates multiple design mockup variations concurrently.
• Explores diverse layouts: grid, list, masonry, and cards.
• Varies information hierarchy and visual emphasis across mockups.
• Creates different interaction patterns for each variation.
• Outputs mockups to a structured directory (e.g., docs/working/mockups/[feature-name]/).

Example prompts

• "Create a mockup for the Crucible Discovery page, showing a list of active crucibles as cards with filtering options and a 'Create Crucible' button. Variation: Grid layout with large hero card."
• "Generate mockups for the Crucible Rating feature, exploring side-by-side and stacked layouts."

Tips & gotchas

• Ensure variations are meaningfully different to maximize exploration of design possibilities.
• Consider including a mobile layout variation in at least one mockup.
• Use realistic content (names, numbers, times) within the mockups for better context.