# Designing Frontends

> Use when building web components, pages, or applications that need distinctive, production-grade design with high aesthetic quality and creative direction

- Skill: `falconnt/designing-frontends` (Agent Skill)
- Install (CLI): `npx skillmds@latest add falconnt/designing-frontends`
- Raw SKILL.md: https://api.skillmd.com/api/skills/falconnt/designing-frontends/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: falconnt (https://skillmd.com/u/falconnt)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/falconnt/designing-frontends

---


# Designing Frontends

## Overview

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

**Core principle:** Bold aesthetic direction + meticulous execution = unforgettable interfaces.

## When to Use

Use when the user asks to:
- Build web components, pages, or applications
- Create user interfaces with strong visual identity
- Design frontend experiences that need to stand out
- Implement production-ready UI with creative direction

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

**Purpose**: What problem does this interface solve? Who uses it?

**Tone**: Pick an extreme aesthetic direction:
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian

Use these for inspiration but design one that is true to the aesthetic direction.

**Constraints**: Technical requirements (framework, performance, accessibility).

**Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

## Implementation Requirements

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

### Typography
Choose fonts that are beautiful, unique, and interesting:
- Avoid generic fonts like Arial and Inter
- Opt for distinctive choices that elevate the frontend's aesthetics
- Use 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
- Create atmosphere and depth rather than defaulting to solid colors

### 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
Create unexpected layouts:
- Asymmetry
- Overlap
- Diagonal flow
- Grid-breaking elements
- Generous negative space OR controlled density

### Backgrounds & Visual Details
Create atmosphere and depth:
- Add contextual effects and textures that match the overall aesthetic
- Apply creative forms:
  - Gradient meshes
  - Noise textures
  - Geometric patterns
  - Layered transparencies
  - Dramatic shadows
  - Decorative borders
  - Custom cursors
  - Grain overlays

## Anti-Patterns

**NEVER use generic AI-generated aesthetics:**

❌ **Avoid:**
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliched color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

✅ **Instead:**
- 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, for example) across generations

## Execution Principle

**IMPORTANT**: Match implementation complexity to the aesthetic vision.

**Maximalist designs** need:
- Elaborate code with extensive animations and effects
- Rich visual details and layered elements
- Complex interactions and micro-animations

**Minimalist or refined designs** need:
- Restraint and precision
- Careful attention to spacing, typography, and subtle details
- Elegance through executing the vision well

## The Bottom Line

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.

Every interface should be memorable, intentional, and executed with precision.