From frontend-design
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design:frontend-design-v2The summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill creates distinctive, production-grade frontend interfaces by combining externally randomized aesthetic direction with high-quality implementation.
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.
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.
Using the selected style card as your aesthetic foundation, implement the user's frontend requirements as working code (HTML/CSS/JS, React, Vue, etc.).
Produce code that is:
Typography: Pair the card's display and body fonts intentionally. Display font for headings, hero text, and emphasis. Body font for paragraphs, labels, and UI text. Choose weights that create clear hierarchy.
Color & Theme: Build the full theme from the card's 5-color palette using CSS variables. Map background, surface, text, accent, and muted to semantic roles. Derive additional states (hover, active, disabled, focus) by adjusting lightness of existing colors. The accent color should drive focal points and key interactions.
Motion: Implement the card's specific motion motifs. The hero interaction described in the card should be the centerpiece. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
Spatial Composition: Follow the card's layout motifs and density. Create unexpected layouts with asymmetry, overlap, diagonal flow, or grid-breaking elements as the card directs. Generous negative space OR controlled density, depending on the card.
Backgrounds & Visual Details: Build atmosphere through the card's signature detail. Apply textures, patterns, borders, shadows, gradients, or effects that match the card's creative direction. Create depth rather than flat surfaces.
IMPORTANT: Match implementation complexity to the style card's vision. A card with energetic motion and dense layout needs elaborate code with extensive animations and effects. A card with minimal motion and sparse density needs restraint, precision, and careful attention to spacing, typography, and subtle details.
The style card provides the aesthetic DNA. Your job is to faithfully express that DNA in working code that solves the user's actual requirements.
npx claudepluginhub ilyagulya/claude-marketplace --plugin frontend-designCreates distinctive, production-grade frontend interfaces with bold aesthetic direction. Guides design thinking, typography, color, motion, and spatial composition for memorable UIs.
Generates distinctive, production-grade frontend interfaces for web components, pages, or apps with bold aesthetics, unique typography, colors, and motion avoiding generic AI looks.
Generates distinctive, production-grade frontend code for web components, pages, and apps with bold aesthetics, unique typography, motion, and layouts avoiding generic AI designs.