| name | frontend-design |
| description | 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. |
| license | Complete terms in LICENSE.txt |
Frontend Design Skill
Creates distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implements real working code with exceptional attention to aesthetic details and creative choices.
When to use this skill
- Building web components, pages, or applications from scratch
- Creating visually striking and memorable user interfaces
- Designing with a specific aesthetic direction (brutalist, retro, minimalist, etc.)
- Developing production-ready frontend code with creative flair
- Avoiding generic, cookie-cutter design patterns
Design Thinking Process
Before coding, understand the context and commit to a BOLD aesthetic direction:
1. Understand Purpose
- What problem does this interface solve?
- Who uses it?
- What's the core user need?
2. Choose Aesthetic Tone
Pick an extreme direction and commit fully:
- Brutally minimal: Stark, functional, high contrast
- Maximalist chaos: Dense, layered, overwhelming
- Retro-futuristic: Nostalgic tech aesthetics
- Organic/natural: Soft, flowing, earth-toned
- Luxury/refined: Elegant, sophisticated, premium
- Playful/toy-like: Bright, bouncy, fun
- Editorial/magazine: Typography-forward, grid-based
- Brutalist/raw: Concrete, exposed, harsh
- Art deco/geometric: Angular, symmetrical, ornate
- Soft/pastel: Gentle, calm, dreamy
- Industrial/utilitarian: Functional, mechanical, efficient
3. Identify Constraints
- Technical requirements (framework, performance, accessibility)
- Browser compatibility
- Responsive behavior
4. Define Differentiation
What makes this UNFORGETTABLE?
- The one thing someone will remember
- The signature element or interaction
Implementation Guidelines
Typography
- Choose distinctive fonts - avoid Arial, Inter, Roboto, system fonts
- Pair a bold display font with a refined body font
- Use unexpected, characterful choices
- Consider variable fonts for dynamic effects
- Establish clear hierarchy with size, weight, spacing
Color & Theme
- Commit to a cohesive aesthetic direction
- Use CSS variables for consistency
- Dominant colors with sharp accents > evenly-distributed palettes
- Create atmosphere through color psychology
- Consider dark mode, light mode, or high-contrast themes based on context
Motion & Animation
- High-impact moments over scattered micro-interactions
- Orchestrated page loads with staggered reveals (animation-delay)
- CSS-only solutions for HTML
- Motion library for React when available
- Scroll-triggered animations
- Surprising hover states
- Purposeful transitions (not decoration)
Spatial Composition
- Embrace unexpected layouts
- Use asymmetry intentionally
- Overlap elements strategically
- Diagonal flow and dynamic angles
- Grid-breaking elements
- Generous negative space OR controlled density (based on aesthetic)
Backgrounds & Visual Details
Create atmosphere and depth:
- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparencies
- Dramatic shadows and lighting
- Decorative borders and frames
- Custom cursors
- Grain overlays
- Subtle parallax effects
Anti-Patterns to Avoid
❌ Generic AI Aesthetics:
- Overused fonts (Inter, Roboto, Arial, system fonts)
- Purple gradients on white backgrounds
- Predictable layouts and component patterns
- Cookie-cutter designs lacking context-specific character
- Convergence on common choices (Space Grotesk, etc.)
❌ Inconsistent Execution:
- Mismatched complexity (elaborate code for minimal design)
- Half-committed aesthetic choices
- Mixing contradictory design languages
- Generic fallbacks when creativity is needed
Complexity Matching
Maximalist Designs:
- Need elaborate code
- Extensive animations and effects
- Layered visual elements
- Complex state management
- Rich micro-interactions
Minimalist/Refined Designs:
- Need restraint and precision
- Careful attention to spacing
- Typography refinement
- Subtle, purposeful details
- Clean, efficient code
Elegance comes from executing the vision well.
Creative Principles
- Interpret creatively - make unexpected choices genuinely designed for context
- Vary everything - no two designs should be the same
- Commit fully - half-measures kill good ideas
- Think outside the box - Claude is capable of extraordinary creative work
- Context matters - generic solutions never win
Output Requirements
Every design implementation must be:
- ✅ Production-grade and functional
- ✅ Visually striking and memorable
- ✅ Cohesive with clear aesthetic point-of-view
- ✅ Meticulously refined in every detail
- ✅ Distinctly different from generic AI outputs
Remember: Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
See Also
tailwind-design-system — Para tokens de diseño y configuración de Tailwind v4stitch-skills — Para generación de componentes UI con Stitch AI design toolvercel-composition-patterns — Para patterns de composición escalables en React
