| name | frontend-design |
| description | Guides creation of distinctive, production-grade frontend UI. Invoke when building or redesigning UI components, pages, or visual experiences. |
Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic aesthetics and deliver a deliberate visual direction.
When to Use
- Building a new component, page, or interface
- Redesigning UI for stronger visual character
- Implementing UI with high aesthetic polish
- Reviewing and improving visual consistency
Design Thinking
Before coding, establish:
- Purpose: What problem the interface solves and who uses it
- Tone: Choose a clear aesthetic direction (e.g., brutalist, editorial, retro-futuristic, luxury)
- Constraints: Framework, performance, accessibility requirements
- Differentiation: The one memorable element that stands out
Implementation Priorities
- Use production-ready code (HTML/CSS/JS, React, Vue, etc.)
- Keep the visual system cohesive and intentional
- Match implementation complexity to the chosen aesthetic
Aesthetics Guidelines
Typography
- Use characterful fonts
- Pair a distinctive display font with a refined body font
Color & Theme
- Commit to a cohesive palette
- Use CSS variables for consistency
- Prefer bold accents over timid palettes
Motion
- Use motion for high-impact moments
- Prefer CSS animations when possible
- Add staggered reveals for delight
Spatial Composition
- Consider asymmetry, overlap, diagonal flow, or grid-breaking elements
- Use deliberate negative space or controlled density
Backgrounds & Visual Details
- Add depth with gradients, textures, or layered transparencies
- Use decorative borders, dramatic shadows, or grain overlays when appropriate
Avoid
- Generic fonts (Arial, Inter, Roboto)
- Cliché color schemes or predictable layouts
- Cookie-cutter component patterns without context
Output
Deliver working code with a clear, memorable aesthetic point-of-view.
