Frontend Design Skill

Objective

Guide 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 that create memorable user experiences.

When to Use This Skill

Invoke when:

Building new web components, pages, or applications
User requests distinctive or creative design
Creating landing pages or marketing sites
Developing design-forward applications
Need to avoid generic/template aesthetics
Building portfolio or showcase projects

Design Philosophy

Core Principle: Bold Intentionality

Create interfaces that are unforgettable through intentional design choices. Both bold maximalism and refined minimalism work - the key is having a clear aesthetic direction and executing it with precision.

Anti-patterns to avoid:

Generic AI aesthetics (overused fonts like Inter, Roboto, Arial)
Cliched color schemes (especially purple gradients on white)
Predictable layouts and cookie-cutter component patterns
Design that lacks context-specific character
Converging on common design choices (e.g., Space Grotesk repeatedly)

Design Thinking Process

Before writing any code, establish:

1. Context Understanding

Purpose: What problem does this interface solve?
Audience: Who uses it? What are their expectations?
Constraints: Technical requirements (framework, performance, accessibility)

2. Aesthetic Direction Selection

Pick a BOLD direction and commit to it:

Aesthetic Options (use for inspiration, create unique variations):

Brutally Minimal: Extreme whitespace, monochrome, typography-focused
Maximalist Chaos: Dense information, vibrant colors, layered complexity
Retro-Futuristic: Y2K aesthetics, chrome effects, bold gradients
Organic/Natural: Earthy tones, fluid shapes, soft shadows
Luxury/Refined: Premium materials, subtle elegance, restrained palette
Playful/Toy-like: Rounded shapes, bright colors, whimsical interactions
Editorial/Magazine: Bold typography, grid layouts, dynamic composition
Brutalist/Raw: Concrete textures, exposed structure, functional clarity
Art Deco/Geometric: Sharp angles, symmetry, metallic accents
Soft/Pastel: Gentle colors, smooth gradients, dreamy atmosphere
Industrial/Utilitarian: Mechanical, functional, no-nonsense
Glassmorphism: Frosted glass, transparency, layered depth
Neomorphism: Soft shadows, embossed elements, tactile feel

3. Differentiation Focus

Ask: What makes this UNFORGETTABLE?

What's the one thing someone will remember?
What unexpected choice creates delight?
How does this stand apart from competitors?

Frontend Aesthetics Guidelines

Typography: The Foundation

Critical: Choose fonts that are beautiful, unique, and interesting.

Avoid: Generic fonts (Arial, Inter, Roboto, system fonts)

Seek: Distinctive choices that elevate aesthetics

Display fonts: Unique, characterful, attention-grabbing
Body fonts: Refined, readable, complementary

Strategy:

Pair a distinctive display font with a refined body font
Use font weight and size variation for hierarchy
Consider variable fonts for fluid scaling
Add font features (ligatures, stylistic alternates)

Examples:

/* Bold Display + Refined Body */
font-family: 'Syne', sans-serif; /* Display */
font-family: 'IBM Plex Sans', sans-serif; /* Body */

/* Editorial Style */
font-family: 'Playfair Display', serif; /* Display */
font-family: 'Work Sans', sans-serif; /* Body */

/* Modern Geometric */
font-family: 'Clash Display', sans-serif; /* Display */
font-family: 'Satoshi', sans-serif; /* Body */

Color & Theme: Cohesive Aesthetics

Strategy: Commit to a cohesive aesthetic direction

Best practices:

Use CSS variables for consistency
Dominant colors with sharp accents outperform evenly-distributed palettes
Create atmospheric backgrounds instead of solid colors
Consider dark mode as primary design, not afterthought

Implementation:

:root {
  /* Primary palette - be bold */
  --color-primary: #FF6B35;
  --color-accent: #004E89;
  --color-neutral: #F7F7F2;

  /* Atmospheric background */
  --bg-gradient: linear-gradient(135deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%);

  /* Depth and layering */
  --surface-glass: rgba(255, 255, 255, 0.1);
  --surface-overlay: rgba(0, 0, 0, 0.05);
}

Motion: Choreographed Delight

Philosophy: Prioritize high-impact moments over scattered micro-interactions

Strategies:

One well-orchestrated page load with staggered reveals
Use animation-delay for choreography
Scroll-triggered animations that surprise
Hover states that delight

CSS-first approach (for HTML):

/* Staggered page load */
.hero-title {
  animation: slideUp 0.6s ease-out;
}

.hero-subtitle {
  animation: slideUp 0.6s ease-out 0.1s backwards;
}

.hero-cta {
  animation: slideUp 0.6s ease-out 0.2s backwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

React with Motion library:

import { motion } from 'framer-motion';

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

<motion.div variants={container} initial="hidden" animate="show">
  <motion.h1 variants={item}>Title</motion.h1>
  <motion.p variants={item}>Subtitle</motion.p>
  <motion.button variants={item}>CTA</motion.button>
</motion.div>

Spatial Composition: Break the Grid

Principles:

Embrace asymmetry and unexpected layouts
Use overlap and layering for depth
Diagonal flow creates energy
Balance generous negative space OR controlled density

Techniques:

Grid-breaking elements (overlap grid boundaries)
Diagonal sections and angled divisions
Floating elements with custom positioning
Z-index layering for depth

Backgrounds & Visual Details: Atmosphere

Goal: Create atmosphere and depth, not just solid colors

Creative approaches:

Gradient Meshes: Complex, multi-point gradients
Noise Textures: Subtle grain for tactility
Geometric Patterns: SVG patterns, subtle or bold
Layered Transparencies: Glassmorphic effects
Dramatic Shadows: Elevation and depth
Decorative Borders: Custom shapes and styles
Custom Cursors: Interactive feedback
Grain Overlays: Film-like texture

Example - Atmospheric background:

.hero {
  position: relative;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 78, 137, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
}

/* Noise overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

Implementation Complexity Matching

IMPORTANT: Match code complexity to aesthetic vision

Maximalist Designs

Need elaborate code with:

Extensive animations and effects
Complex layering and composition
Rich interactive elements
Multiple visual details and textures

Minimalist/Refined Designs

Need restraint with:

Careful attention to spacing
Precise typography
Subtle details (shadows, borders, transitions)
Clean, purposeful code

Remember: Elegance comes from executing the vision well, not from complexity lev

frontend-design

Como adicionar

Cole no README do seu repo

Skills relacionadas