| name | frontend-design-v2 |
| description | Build frontend interfaces with externally randomized style direction. Use when the user asks to build web components, pages, or applications with high design diversity. Produces distinctive, production-grade UI that avoids repetitive AI aesthetics. |
This skill creates distinctive, production-grade frontend interfaces by combining externally randomized aesthetic direction with high-quality implementation.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Phase 1: Style Direction
FIRST: Launch the style-director-v2 subagent to generate 4 style direction cards with externally randomized constraints (palette, typography, density, motion energy).
Use this exact prompt for the subagent:
Brief: $ARGUMENTS
Present all 4 style cards to the user. Ask which card they want to use for the implementation. If the user says "pick for me" or "any" or similar, choose the card that best fits their stated requirements.
Do NOT proceed to Phase 2 until the user has selected a card.
Phase 2: Implementation
Using the selected style card as your aesthetic foundation, implement the user's frontend requirements as working code (HTML/CSS/JS, React, Vue, etc.).
Constraints from the style card are MANDATORY:
- Typography: Use the card's assigned display and body fonts exactly. Load via Google Fonts, CDN, or @font-face. Apply the card's recommended weights and sizes. No substitutions.
- Palette: Use the card's assigned hex colors as CSS variables. You may derive hover/border/shadow shades by adjusting lightness, but the 5 core colors (background, surface, text, accent, muted) are fixed.
- Density: Follow the card's density level for all spacing and layout decisions:
- sparse: generous whitespace, few elements per viewport, content floats in space
