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

Use creative-design

Use standard patterns

Landing pages App dashboards

Portfolio pieces CRUD interfaces

Marketing sites Admin panels

One-off demos Reusable components

"Make it memorable" "Make it consistent"

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