Master Frontend Design

A Claude Code skill for creating distinctive, production-grade frontend interfaces that avoid generic aesthetics. Focuses on exceptional attention to visual detail, creative design choices, and polished implementations that stand out from template-based designs.

When to Use This Skill

Choose Master Frontend Design when:

• You want to build visually distinctive UI that doesn't look like a template
• You need creative direction for frontend implementation
• You're building a landing page or marketing site that needs to stand out
• You want to improve the visual polish of an existing interface
• You need guidance on typography, color, animation, and micro-interactions

Consider alternatives when:

• You need to implement a specific Figma design (use a Figma implement design skill)
• You want a design system/component library setup (use a UI design system skill)
• You need mobile-specific design (use a mobile design skill)

Quick Start

Copy
# Install the skill
claude install master-frontend-design

# Get design direction for a page
claude "Design a visually distinctive hero section for a developer tools landing page. No generic templates — make it memorable"

# Improve existing UI
claude "This dashboard looks generic. Here's the code: [paste]. How do I make it visually distinctive?"

# Create micro-interactions
claude "Add polished micro-interactions to this card component: hover effects, click feedback, and loading states"

Core Concepts

Design Differentiation Principles

Principle	Generic Approach	Distinctive Approach
Color	Safe blues and grays	Bold palette with intentional accent colors
Typography	System fonts, uniform sizing	Curated font pairing, dramatic size contrast
Layout	12-column grid, centered sections	Asymmetric layouts, intentional white space
Animation	Fade in on scroll	Physics-based motion, contextual transitions
Details	Stock illustrations	Custom graphics, subtle textures, grain

Visual Polish Checklist

Typography:
  ✓ Font pairing (display + body, max 2 families)
  ✓ Size scale with clear hierarchy (48/32/24/18/16/14)
  ✓ Line height optimized per size (1.1 for headlines, 1.6 for body)
  ✓ Letter spacing adjusted (-0.02em for large text)
  ✓ Max line width (65ch for readability)

Color:
  ✓ Intentional palette (not random Bootstrap colors)
  ✓ Sufficient contrast ratios (4.5:1 minimum)
  ✓ Consistent neutral scale (not pure black/white)
  ✓ Accent color used sparingly for emphasis

Spacing:
  ✓ Consistent spacing scale (4, 8, 16, 24, 32, 48, 64, 96)
  ✓ Generous white space (don't fill every pixel)
  ✓ Vertical rhythm maintained across sections

Motion:
  ✓ Purposeful animations (not decorative)
  ✓ 200-300ms duration for interactions
  ✓ Ease-out for entering, ease-in for exiting
  ✓ Respects prefers-reduced-motion

Design Patterns That Stand Out

Pattern	Implementation	Impact
Bento Grid	Asymmetric grid with varied card sizes	Modern, editorial feel
Glassmorphism	Backdrop blur with transparency	Depth and layering
Gradient Mesh	Multi-point gradients on backgrounds	Unique visual identity
Scroll-Linked Animation	Motion tied to scroll position	Interactive storytelling
Custom Cursor	Context-aware cursor changes	Memorable micro-interaction
Dynamic Grain	SVG noise texture overlay	Organic, tactile feel

Configuration

Parameter	Type	Default	Description
aesthetic	string	"modern"	Style: modern, minimal, brutalist, editorial, playful
framework	string	"react"	Frontend framework
styling	string	"tailwind"	CSS approach: tailwind, css, styled_components
animation_library	string	"framer"	Animation: framer-motion, gsap, css, none
performance_budget	string	"balanced"	Performance: minimal, balanced, rich

Best Practices

1. Start with constraints, not freedom — A distinctive design comes from intentional choices, not unlimited options. Pick 2 fonts, 4 colors, and 6 spacing values. Constraints force creativity and create cohesion.

2. Invest in typography first — Typography carries 90% of your design's personality. Choose a distinctive heading font, pair it with a readable body font, and set up a clear size scale with proper line heights. This alone separates custom from template.

3. Motion should have meaning — Every animation should communicate something: state change, spatial relationship, or user feedback. If you remove the animation and nothing is lost, remove it. Purposeful motion at 200-300ms feels professional.

4. Use white space aggressively — Amateur designs fill every available pixel. Professional designs let content breathe. Increase section padding, add generous margins around key elements, and resist the urge to pack more content in.

5. Sweat the details last — Get the layout, typography, and color right first. Then add micro-interactions, hover effects, and transitions. Polish on a weak foundation is wasted effort, but polish on a strong foundation creates delight.

Common Issues

Design looks good on my screen but generic on others — You may be relying on a non-standard font that falls back to system fonts. Use font-display: swap, provide proper fallbacks, and test on systems without your fonts installed.

Animations feel janky — Use transform and opacity for animations (GPU-accelerated), avoid animating width/height/margin (trigger layout reflow). Always use requestAnimationFrame or CSS transitions, never setTimeout.

Over-designed and cluttered — Pull back. Remove the most decorative element and see if the design improves. Often it does. Great design is about removal, not addition.