Dotfiles frontend-design

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.