Frontend Design

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