Frontend Design

---
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
---

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.

## Vibe Discovery (Do This First)

**BEFORE writing any code, run the Vibe Discovery process.** Don't pick from a menu. Derive a unique aesthetic from the real world.

### Step 1: Conversational Dig (Ask the User)

**Do NOT skip this.** Have an actual back-and-forth with the user. Ask these questions one or two at a time, not as a wall of text. Use their answers to generate follow-ups. The goal is to extract something *specific and personal* — not a generic category.

**Opening questions (ask first):**

**Q1: What's the vibe of this project in non-design terms?**
Push them away from design language. "Fast and chaotic like a kitchen during dinner rush" is better than "modern and clean." If they say something generic ("professional", "sleek"), push back: *"Professional like a law firm lobby, or professional like a SpaceX launch room? Those are very different vibes."*

**Q2: Who is the actual human using this, and what are they doing right before they open it?**
Context matters more than demographics. "A tired nurse checking schedules at 6am" gives you more than "healthcare professionals aged 25-45."

**Follow-up questions (based on their answers, pick 2-3):**

- "What's a physical space that has the same energy as what you're describing?" *(derive from THEIR words, don't suggest options)*
- "What would make someone screenshot this and send it to a friend?"
- "Is there a movie, album, restaurant, or store that has the feel you want?"
- "What's something you've seen recently that made you think 'yes, THAT energy'?"
- "What's the worst version of this? What would make you cringe?"

**If the user says "just pick something" or gives minimal input:**
Don't fall back on a static list. Instead, derive a reference from the *project itself*:
- What does the product DO? Find an unexpected real-world analog for that action.
- Who uses it? Imagine their world. What textures, colors, sounds exist there?
- What era or subculture would claim this product as their own?

### Step 2: Invent a Vibe (Don't Retrieve One)

**You must CREATE a new aesthetic direction every time.** Do not pattern-match to categories you've seen before. Do not mentally scan a list of "aesthetic styles" and pick the closest one.

**The Collision Method:**
Take TWO things from the user's answers that don't obviously go together and smash them:
1. Pick a **physical texture or material** from their world (concrete, linen, chrome, cardboard, velvet, terracotta, acrylic, denim)
2. Pick an **energy or movement quality** from their description (frenetic, glacial, bouncy, surgical, tidal, flickering, heavy, weightless)
3. Combine them into something that doesn't exist yet: "Velvet Frenetic", "Cardboard Surgical", "Chrome Tidal"

This is your vibe seed. Everything else derives from it.

**Q3 (internal — don't ask the user): What should this NEVER be mistaken for?**
Based on the conversation, identify 2-3 anti-patterns. Use these as guardrails, not the user's problem to solve.

### Step 3: Derive the Aesthetic From the Vibe Seed

Take your invented vibe and derive EACH element from it. Do NOT consult the Aesthetic Reference Library yet — that's for implementation details later, not for direction-setting.

- **Colors**: Close your eyes (metaphorically). What colors exist in the collision you invented? "Velvet Frenetic" → deep burgundy meeting electric yellow. "Cardboard Surgical" → kraft brown meeting clinical white with a sharp teal accent. Extract 3-4 colors. Invent fresh hex codes. Name the palette after the vibe, not a generic mood ("Scrubbed Kraft", "Bruised Neon", "Soft Concrete").
- **Typography**: What does text FEEL like in this vibe? Heavy and planted? Thin and nervous? Hand-drawn and loose? Search Google Fonts with the vibe's energy, not with a category. If your first instinct is a font you've used before, discard it and keep looking.
- **Layout**: How does the vibe's material organize space? Velvet drapes — layered, overlapping. Cardboard — flat, stacked, visible edges. Chrome — reflective, minimal, precise. Let the material metaphor drive layout choices.
- **Motion**: How does the vibe's energy quality move? Frenetic = jittery micro-movements. Glacial = slow parallax. Surgical = precise snap-to. Tidal = rhythmic ease-in-out. Pick ONE signature motion that embodies the energy word.

### Step 4: Write a Vibe Spec

Before coding, write this out:

```
VIBE NAME: [your invented collision name, e.g. "Velvet Frenetic"]
MATERIAL: [the physical texture/material driving the visual language]
ENERGY: [the movement quality driving interaction and motion]
USER CONTEXT: [who they are, what they were doing 5 minutes ago]
ANTI-PATTERNS: [what this must never be confused with]

COLORS: [hex codes + why each color, named palette derived from the material/energy]
TYPOGRAPHY: [specific font names + why they fit THIS vibe, not a category]
LAYOUT: [how the material organizes space — one signature structural choice]
MOTION: [how the energy moves — one signature animation]
WILDCARD: [one unexpected detail that doesn't "match" but makes it memorable]
```

### Step 5: Freshness Check

Before proceeding, verify:
- [ ] My vibe name is something I've NEVER used before
- [ ] I did NOT reuse hex codes from previous projects
- [ ] I did NOT default to my comfortable fonts (Inter? Space Grotesk? JetBrains Mono? Monospace-on-dark? Start over.)
- [ ] The material + energy collision is actually visible in my design choices
- [ ] Someone could NOT mistake this for previous work
- [ ] I included a wildcard that surprises even me
- [ ] The user's actual words and context are driving the aesthetic, not a category I pattern-matched to
- [ ] I did NOT mentally scan a list of "aesthetic styles" and pick the closest one

### When Context Is Minimal

If the user just says "build me a page" with no specifics, you STILL do the conversational dig. Ask:
1. "What's this for? Even one sentence helps."
2. "What's the energy — fast and loud, or slow and quiet, or something else entirely?"
3. "What would make you hate it?"

If they truly refuse to engage, derive from the PROJECT CONTENT itself — what the thing does, who it serves, what world it lives in. Never fall back on a preset list of vibes.

### Generating Fresh References (When You Need Physical-World Anchors)

**Do NOT use a static list.** Instead, use this generative process:
1. Take the user's domain/product and think: "What's a surprising real-world analog for this ACTION?"
   - A task manager → an air traffic control tower? a short-order cook's ticket rail? a librarian's card catalog?
2. Think about the USER's physical context: "Where are they when they use this? What does that space smell/sound/feel like?"
3. Think about TIME: "When in the day/week/year does this get used? What's the light like? The mood?"
4. Combine the most interesting answers into your material + energy collision.

---

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. ALSO avoid the "anti-slop" cliche: dark backgrounds with monospace fonts and neon green/cyan/magenta accents (terminal/hacker aesthetic) is just as overplayed and lazy as purple-on-white. It is not edgy or distinctive - it is the default fallback when trying too hard to avoid looking generic.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, JetBrains Mono, Fira Code, for example) across generations.

## Aesthetic Reference Library (Implementation Raw Materials ONLY)

**STOP. If you haven't completed Vibe Discovery above, go back.** This library is NOT a menu of vibes to pick from. It is a parts bin — font names, hex codes, and CSS techniques you can cannibalize AFTER you've invented your own direction.

**Rules for using this library:**
- You MUST have a completed Vibe Spec before looking here
- Cherry-pick individual techniques or font pairings that serve YOUR vibe
- NEVER adopt a whole section as your aesthetic — that's the exact problem this skill exists to prevent
- If your final design maps cleanly to one of these categories, you failed the Vibe Discovery process. Start over.

### Warm / Organic
Think: bakery website, ceramics studio, wellness brand, farm-to-table restaurant
- **Fonts**: Fraunces (display) + Libre Baskerville (body), or Playfair Display + Source Serif Pro
- **Palette**: `#D4A373` warm sand, `#FAEDCD` cream, `#CCD5AE` sage, `#E9EDC9` soft olive, `#3D405B` deep slate
- **Layout**: Flowing, asymmetric sections with generous whitespace. Overlapping rounded images. Text wrapping around organic shapes.
- **CSS techniques**: `border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%` for blob shapes, subtle `backdrop-filter: blur()`, warm `box-shadow` with brown tones, `mix-blend-mode: multiply` on overlapping photos

### Luxury / Refined
Think: high-end hotel, jewelry brand, architecture firm, premium spirits
- **Fonts**: Cormorant Garamond (display) + Montserrat 300-weight (body), or Bodoni Moda + DM Sans
- **Palette**: `#1A1A1A` near-black, `#F5F0EB` warm white, `#C9A96E` muted gold, `#4A4A4A` charcoal, `#8B7355` bronze
- **Layout**: Extreme whitespace. Full-bleed hero images. Text set very large and very light-weight. Horizontal scroll sections. Elements placed with mathematical precision.
- **CSS techniques**: `letter-spacing: 0.3em` on uppercase labels, `font-weight: 200`, hairline borders (`0.5px`), smooth `scroll-snap-type`, images with `aspect-ratio: 3/4`, `mix-blend-mode: luminosity`

### Playful / Toy-like
Think: children's app, party supply store, casual mobile game, snack brand
- **Fonts**: Baloo 2 (display) + Nunito (body), or Fredoka One + Quicksand
- **Palette**: `#FF6B6B` coral, `#4ECDC4` teal, `#FFE66D` sunny yellow, `#F7FFF7` mint white, `#2C3E50` grounding navy
- **Layout**: Tilted cards (`transform: rotate(-2deg)`), stacked/overlapping elements, big chunky buttons with visible borders, intentional "messiness."
- **CSS techniques**: `border: 3px solid`, thick `box-shadow: 6px 6px 0 #000` for pop-out effect, `border-radius: 1rem`, bouncy `cubic-bezier(0.34, 1.56, 0.64, 1)` transitions, wiggle `@keyframes` on hover, hand-drawn SVG borders

### Art Deco / Geometric
Think: cocktail bar, jazz venue, museum exhibition, luxury stationery
- **Fonts**: Poiret One (display) + Raleway (body), or Josefin Sans + Lato
- **Palette**: `#0D1B2A` midnight blue, `#D4AF37` true gold, `#1B2838` dark teal, `#F0E6D3` parchment, `#C41E3A` ruby accent
- **Layout**: Strong symmetry. Geometric dividers (chevrons, fan shapes). Layered borders and frames around content. Centered, formal composition.
- **CSS techniques**: Repeating SVG patterns as backgrounds, `clip-path: polygon()` for angular sections, `linear-gradient` used for geometric stripes, gold `border-image`, CSS `columns` for text, ornamental `::before`/`::after` pseudo-elements

### Soft / Pastel / Dreamy
Think: skincare brand, meditation app, baby products, stationery shop
- **Fonts**: Outfit (display) + Karla (body), or Sora + IBM Plex Sans
- **Palette**: `#E8D5F5` lavender, `#F5E6CC` peach, `#D4E8E0` mint, `#FFF5F5` blush white, `#5C5470` muted purple
- **Layout**: Rounded everything. Floating cards with soft shadows. Generous padding. Content feels like it's resting on clouds.
- **CSS techniques**: `box-shadow: 0 20px 60px rgba(0,0,0,0.05)`, large `border-radius: 2rem`, subtle `background: linear-gradient(135deg, ...)` behind sections, `backdrop-filter: blur(20px)` glassmorphism but with pastel tints not dark glass, `filter: saturate(0.9)` for softness

### Retro-Futuristic / Sci-Fi
Think: space tourism, vintage tech revival, synth music, concept car reveal
- **Fonts**: Orbitron (display) + Exo 2 (body), or Audiowide + Rajdhani
- **Palette**: `#0A0E27` void blue, `#FF6F61` retro coral, `#E8D44D` signal yellow, `#2DE2E6` electric cyan, `#F5E6CA` analog cream
- **Layout**: Asymmetric grid with angled dividers. Data-viz inspired decorative elements (arcs, circles, grid overlays). Split-screen compositions.
- **CSS techniques**: `conic-gradient()` for radar/dial effects, animated `stroke-dashoffset` on SVG circles, `clip-path` angled sections, scanline overlay with repeating-linear-gradient, `text-shadow` glow with theme accent, CSS `counter()` for numbering sections

### Editorial / Magazine
Think: longform journalism, fashion lookbook, photo essay, cultural review
- **Fonts**: Playfair Display (headlines) + Charter or Lora (body), or DM Serif Display + Atkinson Hyperlegible
- **Palette**: `#1A1A1A` rich black, `#FAFAF7` warm off-white, `#C41E3A` editorial red, `#6B705C` olive grey, `#E8E0D5` newsprint
- **Layout**: Multi-column text. Pull quotes in oversized italic. Full-bleed images breaking the grid. Drop caps. Sidebar annotations.
- **CSS techniques**: CSS `columns: 2` with `column-rule`, `float` for pull quotes with `shape-outside`, `initial-letter: 3` for drop caps, large `font-size: clamp(3rem, 8vw, 7rem)` headlines, `mix-blend-mode: difference` for text over images, `hyphens: auto`

### Maximalist / Eclectic
Think: street festival, record store, zine, independent fashion label
- **Fonts**: Unbounded (display) + Space Mono (body), or Rubik Glitch + Work Sans
- **Palette**: `#FF3366` hot pink, `#33FF57` electric green, `#FFD700` gold, `#1A1A2E` deep purple-black, `#FF6B35` tangerine — use ALL of them boldly
- **Layout**: Overlapping layers. Rotated elements. Mixed grid sizes. Collage-like composition. Things intentionally "breaking" out of containers.
- **CSS techniques**: `mix-blend-mode: screen` and `difference` on overlapping elements, `transform: rotate()` scattered, CSS `mask-image` for cutout effects, layered `position: absolute` compositions, `animation` running perpetually on decorative elements, clashing `font-size` contrasts (12px next to 120px)

### Industrial / Utilitarian
Think: construction company, warehouse sale, municipal service, maker space
- **Fonts**: IBM Plex Mono (labels) + IBM Plex Sans (body), or Overpass Mono + Overpass
- **Palette**: `#F5F5F0` concrete, `#333333` asphalt, `#FFB800` caution yellow, `#E63946` safety red, `#457B9D` steel blue
- **Layout**: Visible grid structure. Labels and metadata exposed. Numbered sections. Dense but organized information hierarchy.
- **CSS techniques**: Visible `outline: 1px dashed` on grid cells, `text-transform: uppercase` with wide `letter-spacing` on labels, `font-variant-numeric: tabular-nums`, `border-left: 4px solid` accent bars, monochrome photos with `filter: grayscale(1)`, data-attribute-driven `::before` content labels

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

## Choosing an Aesthetic

When selecting a direction, consider **what the content actually is**. A restaurant doesn't need to look like a SaaS dashboard. A personal blog doesn't need to look like a developer portfolio. Let the subject matter drive the aesthetic, not your default comfort zone.

**Roll the dice.** If your instinct says "dark background," go light. If you reach for monospace, pick a serif. If you're about to use a card grid, try a magazine layout. Fight your own patterns.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.