Design and Animate Like a Pro Team
Left to defaults, AI-generated sites tend to look flat and dated. This field guide covers five animation and design skills that change how Claude builds for the web — real 3D, professional timelines, design-token extraction, motion direction and a proven animation workflow.
The Five Skills
- Three.js — immersive 3D scenes with lighting, camera animation, model loading and particles, without touching raw WebGL. Good for 3D heroes and product viewers.
- GSAP (official GreenSock) — the professional standard for timeline sequencing, ScrollTrigger scroll effects and smooth transitions.
- Design DNA — point it at a site you admire and it extracts the visual identity into reusable design tokens: color, typography and layout logic. The guide suggests installing this one first.
- Motion Design by LottieFiles — teaches Claude to choose timing, easing and choreography, drawing on Disney's animation principles for UI, before it writes code. Works with CSS, Framer Motion, GSAP or Lottie.
- Animate — a workflow built on Emil Kowalski's "Animations on the Web," with easing and timing patterns and working examples for hovers, toasts and modals. Trigger it with
/animate.
Each installs with npx skills add.
How to Stack Them
Design DNA for the look, Three.js for depth, GSAP and Motion Design for timing, and Animate for the polish.
Skills, Not Libraries
These skills are guidance and patterns that shape how Claude writes the code. The underlying libraries — Three.js, GSAP, Framer Motion — still install into your project as normal.
What's in the Guide
All five skills, what each adds, the install command for each, the order to stack them in, and links to every repo.
The full field guide is in the PDF.
Get the Guide
Drop your email below and we'll send it straight to your inbox.