Elite Web Design with Claude Code

These three Claude Code skills handle different layers of design quality. Together, they cover aesthetics, motion, and polish.

Fixes the thing that makes AI-built sites feel dead: motion. One install and Claude starts using real easing curves, proper durations, spring physics, and GPU-accelerated animations instead of the default lifeless transitions.

Based on Emil Kowalski's "Animations on the Web" course and his work at Linear. He created Sonner and Vaul.

Alternative community installs

How to use it

1. Install the skill into your project
2. Ask Claude Code to build or review any UI component. The skill triggers automatically when the task involves animations, transitions, hover effects, modals, or motion
3. For an audit of existing animations: tell Claude to use the animation skill to audit and improve my frontend
4. For building new components: describe what you want and Claude applies the motion principles automatically

Gives Claude a full design vocabulary: typography, color, spacing, layout, interaction states, and 44 deterministic anti-pattern rules. Run /impeccable polish before you ship and it tightens up your entire interface. It is what Anthropic's built-in frontend-design skill should have been.

Install options

First time setup

This runs a short interview and writes PRODUCT.md at your project root. It asks whether your surface is brand (marketing, landing, portfolio) or product (app UI, dashboard, tool), then saves your audience, brand lane, voice, colors, type, and components so every later command has context.

Commands you will use most

Teaches Claude what good design actually looks like. No generic gradients, no Inter on everything, no centered hero with three feature cards. It is an anti-slop frontend framework: a set of aesthetic constraints that force Claude to read the brief, infer the right design direction, and ship interfaces that do not look templated.

Install

How to use it

1. Install the skill. It activates automatically on frontend tasks
2. The skill reads your brief before generating any code. It infers: page kind (landing, portfolio, redesign, editorial), audience, vibe words, and whether a real design system applies
3. Before any code, Claude states a one-line design read. Example: "Reading this as: landing page for design-conscious consumers, with a minimal language, leaning toward editorial aesthetic."
4. The skill has adjustable dials in v1 if you need them: DESIGN_VARIANCE (1 to 10, symmetry to artsy chaos), MOTION_INTENSITY (1 to 10, static to cinematic), VISUAL_DENSITY (1 to 10, airy to packed)

Choose your variant

A complete playbook for building studio-grade websites. The kind that win on Awwwards, not the kind that scream AI. Five distinct, production-ready designs with real AI-generated imagery, signature scroll interactions, and full documentation of every technique.

What is inside

The five designs

The stack (no build step)

• GSAP + ScrollTrigger for the animation engine
• Lenis for smooth scroll (the single biggest "this feels premium" upgrade)
• Three.js only where a WebGL background earns its place
• Google Fonts
• AI image generation (Magnific / Flux / Midjourney / DALL·E)

How to get started

1. Pick a design closest to your project's vibe
2. Read docs/02-extracting-real-sites.md to learn how to extract tokens from any site you admire
3. Read docs/05-animations.md and start remixing scroll interactions
4. Use docs/07-image-generation.md to generate cohesive, on-brand imagery
5. Use the snippets/ folder for drop-in components

Run this once per project. It installs all three skills and pulls in the reference repo.

1. Taste Skill fires first. When you describe what you want, it reads the brief, picks the right aesthetic direction, and generates code that does not default to AI clichés
2. Use elitedesign as reference. Pull typography pairings from docs/03-typography.md, animation recipes from docs/05-animations.md, and color strategies from docs/04-color-and-themes.md
3. Emil's skill handles motion. As you build interactive components, it ensures every animation uses proper easing, appropriate duration, and GPU-accelerated properties

Run these before shipping. This is where the output goes from "looks fine" to "looks like a studio built it."

Follow docs/08-deployment.md from the elitedesign repo. A design is not done until it is on a URL someone can open.