Creative Design

Creative Design

Adapted from Anthropic's frontend-design skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Use for creative one-offs, not standard app components.

When to Use This vs. Standard Patterns

If working on a Next.js app with shadcn/​ui, prefer theme tokens and consistent patterns unless explicitly asked for something distinctive.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

• Purpose: What problem does this solve? Who uses it?
• Tone: Pick an extreme:
  • Brutally minimal
  • Maximalist chaos
  • Retro-futuristic
  • Organic/​natural
  • Luxury/​refined
  • Playful/​toy-like
  • Editorial/​magazine
  • Brutalist/​raw
  • Art deco/​geometric
  • Soft/​pastel
  • Industrial/​utilitarian
• Differentiation: What's the ONE thing someone will remember?

CRITICAL: Choose a clear direction and execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

Aesthetics Guidelines

Typography

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

• Arial, Inter, Roboto, system fonts
• Space Grotesk (overused in AI outputs)

Instead: pair a distinctive display font with a refined body font. Character over safety.

Color & Theme

• Commit to a cohesive aesthetic
• Use CSS variables for consistency
• Dominant colors with sharp accents > timid, evenly-distributed palettes
• AVOID: purple gradients on white (cliched AI aesthetic)

Motion

Focus on high-impact moments:

• One well-orchestrated page load with staggered reveals (animation-delay)
• Scroll-triggered effects
• Hover states that surprise

Prioritize CSS-only for HTML. Use Motion library for React when available.

Spatial Composition

• Unexpected layouts
• Asymmetry, overlap, diagonal flow
• Grid-breaking elements
• Generous negative space OR controlled density

Backgrounds & Texture

Create atmosphere rather than solid colors:

• Gradient meshes
• Noise textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Grain overlays

Anti-Patterns

NEVER produce:

• Generic font families (Inter, Roboto, Arial)
• Purple gradients on white
• Predictable layouts
• Cookie-cutter components
• Same design twice

Implementation

Match complexity to vision:

• Maximalist = elaborate animations, effects, layers
• Minimalist = restraint, precision, spacing, typography

Always produce working code (HTML/​CSS/​JS, React, etc.) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with clear aesthetic point-of-view