Frontend Design Skill
Overview
| name | description | license |
|---|---|---|
| frontend-design | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. | MIT |
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.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
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 (brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.)
- •Constraints: Technical requirements (framework, performance, accessibility)
- •Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—intentionality matters most.
Implement working code that is:
- •Production-grade and functional
- •Visually striking and memorable
- •Cohesive with clear aesthetic point-of-view
- •Meticulously refined in every detail
Frontend Aesthetics Guidelines
Focus on:
- •Typography: Choose beautiful, unique fonts. Avoid generic options (Arial, Inter); opt for distinctive choices. Pair display fonts with refined body fonts.
- •Color & Theme: Commit to cohesive aesthetics. Use CSS variables. Dominant colors with sharp accents outperform timid palettes.
- •Motion: Use animations for effects and micro-interactions. Prioritize CSS-only for HTML; use Motion library for React. Orchestrate page loads with staggered reveals.
- •Spatial Composition: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space or controlled density.
- •Backgrounds & Visual Details: Create atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
NEVER use: Generic AI aesthetics like overused fonts, clichéd color schemes (purple gradients), predictable layouts, or cookie-cutter design lacking context-specific character.
IMPORTANT: Match implementation complexity to aesthetic vision. Maximalist designs need elaborate code; minimalist designs need precision and restraint. Elegance comes from executing the vision well.