Frontend Design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
When to Use This Skill
Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Examples include:
- Websites and landing pages
- Dashboards and data visualizations
- React components or HTML/CSS layouts
- Styling or beautifying any web UI
Design Philosophy
Before coding, understand the context and commit to a BOLD aesthetic direction:
Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme aesthetic 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
Critical Rules
NEVER use generic AI-generated aesthetics:
- ❌ Overused font families (Inter, Roboto, Arial, system fonts)
- ❌ Cliched color schemes (particularly purple gradients on white backgrounds)
- ❌ Predictable layouts and component patterns
- ❌ Cookie-cutter design that lacks context-specific character
- ❌ Space Grotesk or other convergent font choices
DO:
- ✅ Interpret creatively and make unexpected choices
- ✅ Feel genuinely designed for the context
- ✅ Vary between light and dark themes
- ✅ Use different fonts for different projects
- ✅ Apply different aesthetics - no design should be the same
Implementation Guidelines
Match implementation complexity to aesthetic vision:
- Maximalist designs need elaborate code with extensive animations and effects
- Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details
- Elegance comes from executing the vision well
Technical standards:
- Write production-grade code
- Implement real working functionality
- Pay exceptional attention to aesthetic details
- Make creative, bold choices
- Ensure responsive design
- Optimize performance
Examples
Minimalist Financial Dashboard:
- Monospace font (JetBrains Mono)
- Grayscale palette with single accent color
- Precise spacing and alignment
- Subtle micro-interactions
Maximalist Creative Portfolio:
- Bold display fonts (Variable fonts)
- Vibrant, clashing color schemes
- Layered animations and parallax
- Unconventional grid layouts
Brutalist SaaS Landing:
- Raw system fonts in unexpected sizes
- High contrast black/white/red
- Asymmetric layouts
- Sharp edges and heavy borders