stevengonsalvez/frontend-design

Frontend Design Skill

This skill helps create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.

Core Principles

When building any frontend interface, follow these principles to create visually striking, memorable designs:

1. Establish Bold Aesthetic Direction

Before writing any code, define a clear aesthetic vision:

• Understand the purpose: What is this interface trying to achieve?
• Choose an extreme tone: Select a distinctive aesthetic direction
  • Brutalist: Raw, bold, functional
  • Maximalist: Rich, layered, decorative
  • Retro-futuristic: Nostalgic tech aesthetics
  • Minimalist with impact: Powerful simplicity
  • Neo-brutalist: Modern take on brutalism
• Identify the unforgettable element: What will make this design memorable?

2. Implementation Standards

Every interface you create should be:

• ✅ Production-grade and functional: Code that works flawlessly
• ✅ Visually striking and memorable: Designs that stand out
• ✅ Cohesive with clear aesthetic point-of-view: Unified vision throughout

Critical Design Guidelines

Typography

Choose fonts that are beautiful, unique, and interesting.

• ❌ AVOID: Generic system fonts (Arial, Helvetica, default sans-serif)
• ✅ USE: Distinctive choices that elevate aesthetics
  • Display fonts with character
  • Unexpected font pairings
  • Variable fonts for dynamic expression
  • Fonts that reinforce your aesthetic direction

Color & Theme

Commit to cohesive aesthetics with CSS variables.

• ❌ AVOID: Generic color palettes, predictable combinations
• ✅ USE: Dominant colors with sharp accents
  • Define comprehensive CSS custom properties
  • Create mood through color temperature
  • Use unexpected color combinations
  • Build depth with tints, shades, and tones

Motion & Animation

Use high-impact animations that enhance the experience.

• For HTML/CSS: CSS-only animations (transforms, transitions, keyframes)
• For React: Motion library (Framer Motion, React Spring)
• ❌ AVOID: Generic fade-ins, boring transitions
• ✅ USE: High-impact moments
  • Purposeful movement that guides attention
  • Smooth, performant animations
  • Delightful micro-interactions
  • Entrance/exit animations with personality

Composition & Layout

Embrace unexpected layouts.

• ❌ AVOID: Predictable grids, centered everything, safe layouts
• ✅ USE: Bold composition choices
  • Asymmetry
  • Overlap
  • Diagonal flow
  • Unexpected whitespace
  • Breaking the grid intentionally

Details & Atmosphere

Create atmosphere through thoughtful details.

• ✅ Textures and grain
• ✅ Sophisticated gradients
• ✅ Patterns and backgrounds
• ✅ Custom effects (blur, glow, shadows)
• ✅ Attention to spacing and rhythm

What to AVOID

Generic AI Design Patterns:

• ❌ Overused fonts (Inter, Roboto, Open Sans as defaults)
• ❌ Clichéd color schemes (purple gradients, generic blues)
• ❌ Predictable layouts (everything centered, safe grids)
• ❌ Cookie-cutter design that lacks context-specific character
• ❌ Lack of personality or point-of-view
• ❌ Generic animations (basic fade-ins everywhere)

Execution Philosophy

Show restraint or elaboration as the vision demands—execution quality matters most.

• Every design decision should serve the aesthetic direction
• Don't add complexity for its own sake
• Don't oversimplify when richness is needed
• Commit fully to your chosen direction
• Polish details relentlessly

Implementation Process

When creating a frontend interface:

1. Define the aesthetic direction (brutalist, maximalist, minimalist, etc.)
2. Choose distinctive typography that reinforces the aesthetic
3. Establish color system with CSS variables
4. Design layout with unexpected but purposeful composition
5. Add motion that enhances key moments
6. Polish details (textures, shadows, spacing)
7. Review against principles - is this distinctive and production-grade?

Examples of Strong Aesthetic Directions

• Brutalist Dashboard: Monospace fonts, high contrast, grid-based, utilitarian
• Retro-Futuristic Landing: Neon colors, chrome effects, 80s sci-fi inspired
• Minimalist with Impact: Generous whitespace, bold typography, single accent color
• Neo-Brutalist App: Raw aesthetics, asymmetric layouts, bold shadows
• Maximalist Content: Rich layers, decorative elements, abundant color

Resources

For deeper guidance on prompting for high-quality frontend design, see the Frontend Aesthetics Cookbook.

---

Remember: The goal is to create interfaces that are both functionally excellent and visually unforgettable. Avoid generic AI aesthetics by committing to a clear, bold direction and executing it with meticulous attention to detail.