Claude-skill-registry creative-design

Create distinctive, memorable UI for landing pages, portfolios, marketing sites, and one-off creative work. Use when the user explicitly wants something "distinctive", "creative", "memorable", or "unique" - NOT for standard app components where consistency matters.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/creative-design" ~/.claude/skills/majiayu000-claude-skill-registry-creative-design && rm -rf "$T"

manifest: skills/data/creative-design/SKILL.md

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