Frontend Design
When to Use This Skill
Use this skill when the user asks to build or design:
- •Web components
- •Pages or full applications
- •Landing pages or websites
- •Dashboards
- •React components
- •HTML/CSS layouts
- •UI styling or beautification
Pre-Coding Phase
Before writing code, understand the context and commit to a BOLD aesthetic direction.
Identify Purpose
What problem does this interface solve? Who is the audience? What's the context?
Choose a Clear Aesthetic Direction
Pick one strong tone and execute it with precision. Options include:
- •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: Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Design Principles
Typography
- •Choose fonts that are beautiful, unique, and interesting
- •Avoid generic fonts like Arial, Inter, Roboto, system fonts
- •Select distinctive, characterful font choices that elevate the design
- •Pair a unique display font with a refined body font
Color Strategy
- •Build cohesive color palettes with dominant colors and sharp accents
- •Use CSS variables for consistency
- •Avoid cliched color schemes (especially purple gradients on white)
- •Commit to a color story that matches the aesthetic direction
Motion and Animation
- •Prioritize high-impact moments over scattered micro-interactions
- •Use CSS-only solutions for HTML
- •Implement staggered reveals with animation-delay on page load
- •Create scroll-triggered effects for memorable moments
- •Match animation intensity to the aesthetic (elaborate for maximalist, restrained for minimal)
Spatial Composition
- •Use asymmetry, overlap, and diagonal flow
- •Break grid patterns intentionally
- •Create unexpected spatial relationships
- •Avoid predictable, centered layouts
Visual Depth and Atmosphere
- •Add texture and layered details
- •Use gradient meshes and contextual effects
- •Create depth through overlapping elements
- •Build atmosphere rather than using flat, solid backgrounds
What to NEVER Do
NEVER use generic AI-generated aesthetics including:
- •Overused font families (Inter, Roboto, Arial, system fonts)
- •Cliched color schemes, especially purple gradients on white backgrounds
- •Predictable layouts and component patterns
- •Cookie-cutter design lacking context-specific character
- •Generic placeholder aesthetics
Implementation Philosophy
Match Complexity to Vision
- •Maximalist designs need elaborate code with extensive animations and effects
- •Minimalist or refined designs need restraint, precision, and careful spacing/typography
- •Elegance comes from executing the vision well, not from decoration level
Avoid Convergence
No design should be the same. Vary:
- •Between light and dark themes
- •Font selections
- •Visual aesthetics
- •Component patterns
Never converge on common choices across different projects.
Execution Checklist
Before submitting code:
- •Does it reflect a clear, bold aesthetic direction?
- •Are font choices distinctive and characterful?
- •Is the color palette cohesive and intentional?
- •Are animations/motion purposeful or absent?
- •Does the layout break conventions in intentional ways?
- •Does it avoid all generic AI patterns?
- •Does implementation complexity match the aesthetic vision?
- •Would this design look the same if generated by different designers? (If yes, it's too generic)