| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build or restyle web components, pages, artifacts, posters, dashboards, landing pages, React components, HTML/CSS layouts, or full applications, including when beautifying or polishing an existing UI. Generates creative, polished code that avoids generic AI aesthetics. |
Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Implement real working code with exceptional attention to aesthetic detail, strong hierarchy, and clear visual intent.
Design Thinking
Before coding, understand the context and commit to a bold aesthetic direction:
- Purpose: Identify what the interface does, who uses it, and what outcome it needs to drive.
- Tone: Pick a strong direction — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, or another intentional visual language that fits the brief.
- Constraints: Respect framework, performance, accessibility, responsiveness, and implementation limits.
- Differentiation: Decide what makes the interface memorable. Choose the one thing a viewer should remember.
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work; the key is intentionality, not intensity.
Frontend Aesthetics Guidelines
Typography
Choose fonts that are beautiful, distinctive, and context-appropriate. Avoid generic defaults like Arial, Inter, Roboto, and bland system stacks unless the brief explicitly demands them. Pair a strong display face with a refined body face when the design supports it.
Color & Theme
Commit to a cohesive palette. Use CSS variables or design tokens for consistency. Dominant colors with sharp accents usually outperform timid, evenly distributed palettes.
Motion
Use motion for impact and clarity, not decoration alone. Prioritize CSS-first solutions when possible. Use Motion for React when it materially improves the result. Focus on high-value transitions: page reveal, staged entrance, meaningful hover states, and clear response to user action.
Spatial Composition
Use deliberate layout choices: asymmetry, overlap, diagonal flow, broken-grid moments, generous negative space, or controlled density. Avoid default template spacing that feels generic.
Backgrounds & Visual Details
Create atmosphere and depth rather than defaulting to flat surfaces. Use textures, gradient meshes, noise, layered transparencies, dramatic shadows, decorative borders, or other visual devices that fit the chosen direction.
Anti-Patterns
NEVER use:
- overused font families and default-feeling typography
- cliched color schemes, especially generic purple-on-white startup gradients
- predictable template layouts and repetitive AI-looking component patterns
- cookie-cutter UI with no context-specific character
- the same aesthetic choices across unrelated outputs
NEVER converge on common AI defaults just because they are safe. The goal is thoughtful, specific design, not familiar design.
Implementation Standards
Match implementation complexity to the aesthetic vision:
- maximalist designs need layered detail, richer motion, and more elaborate composition
- minimalist or refined designs need restraint, spacing discipline, and subtle high-quality decisions
Implement working code that is:
- production-grade and functional
- visually striking and memorable
- cohesive with a clear aesthetic point of view
- meticulously refined in spacing, type, color, and interaction details
Prefer code that is ready to use or straightforward to integrate into the target stack.
Output Requirements
When executing this skill:
- build real code, not mock visuals
- keep the aesthetic direction explicit and consistent
- vary between light and dark modes, fonts, and design languages when appropriate
- avoid repeating the same design signature across generations
- make unexpected choices only when they improve the result rather than adding noise
Remember: excellent frontend work is not just functional. It should feel designed, intentional, and hard to confuse with generic AI output.
