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

1. Interpret creatively - make unexpected choices genuinely designed for context
2. Vary everything - no two designs should be the same
3. Commit fully - half-measures kill good ideas
4. Think outside the box - Claude is capable of extraordinary creative work
5. 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 v4
• stitch-skills — Para generación de componentes UI con Stitch AI design tool
• vercel-composition-patterns — Para patterns de composición escalables en React