🎨 Animated-Website-skill
100% Free Core · Powered by Claude Code · 1 command

Ship an animated website
from a one-line brief.

Zero Paid Accounts Required
Stitch · Magic · Firecrawl are optional

A 7-step AI pipeline with a 100% free core: UI UX Pro Max, Nano Banana 2 (free via infsh), WebFetch, and hand-crafted Tailwind code. No API keys needed to get started. Paid MCPs are optional enhancements only.

Powered by Free Optional (paid)
🧠 Claude FREE 🎨 UI UX Pro Max FREE 🍌 Nano Banana 2 FREE 🌐 WebFetch FREE 🖼️ Stitch OPTIONAL ✨ 21st.dev OPTIONAL 🌀 Firecrawl OPTIONAL
🧠 Claude FREE 🎨 UI UX Pro Max FREE 🍌 Nano Banana 2 FREE 🌐 WebFetch FREE 🖼️ Stitch OPTIONAL ✨ 21st.dev OPTIONAL 🌀 Firecrawl OPTIONAL

The 7-Step Pipeline

Each step is a dedicated tool. The free path is primary — optional paid MCPs enhance but never gate the output.

📝
Step 1
Brief & Plan
🎨
Step 2
Design Tokens
🌐
Step 3
Scrape
🖼️
Step 4
Layouts
🍌
Step 5
Imagery
Step 6
Components
🚀
Step 7
Ship
Zero Paid Accounts

Free Quick Start

Get a complete, animated website in 3 steps — no API keys, no paid accounts, no setup beyond Claude Code and infsh.

🆓
Free Core
Always works · No accounts
  • UI UX Pro Max — 161 palettes, 57 font pairings, 50+ design styles
  • Nano Banana 2 — AI hero images via infsh (Gemini 3.1 Flash Image)
  • WebFetch — built-in URL scraping for reference sites
  • GSAP + Tailwind CDN — professional animations, zero install
  • Hand-crafted components — navbar, hero, features, pricing, footer — all premium quality
Optional Enhancements
Add-on MCPs · Account required
  • Stitch — AI screen layout generation (Google, account required)
  • Magic / 21st.dev — pre-built polished components (limited free tier)
  • Firecrawl — JS-rendered deep scraping (500 free credits/month)
All three fall back gracefully to the free core. The pipeline never stops if they're absent.

3-Step Free Setup

Everything you need, nothing you don't.

1

Clone the repo

Get the pipeline + UI UX Pro Max skill — all bundled, free.

git clone https://github.com/
  ANIS151993/
  Animated-Website-skill.git
cd Animated-Website-skill
2

Install infsh

Free Nano Banana 2 image generation. One command to install and login.

curl -fsSL \
  https://cli.inference.sh | sh
infsh login
3

Run the pipeline

Open Claude Code in the cloned folder and fire the command.

/animated-website
# Claude asks for your brief.
# Type it and press Enter.

Want Stitch, Magic, or Firecrawl? Follow the full setup below.

Full optional setup guide
Optional Enhancements Setup

Full Setup Guide

12 steps to wire up Stitch, Magic, and Firecrawl for the enhanced experience. Skip this if you only need the free core.

Your OS:

Verification Checklist

Click each item as you confirm it works.

Required (Free Core)
UI UX Pro Max skill present FREE
ls .claude/skills/ui-ux-pro-max/data/
/animated-website command available FREE
.claude/commands/animated-website.md exists
Nano Banana 2 / infsh logged in FREE
infsh me → returns your profile
Optional Enhancements
MCP servers connected OPTIONAL
claude mcp list → stitch ✓ magic ✓ firecrawl ✓
Google Cloud configured OPTIONAL
gcloud config list → project = your-project
Stitch API enabled & key set OPTIONAL
$STITCH_API_KEY exported
Free Core Progress
0 / 3 required complete

Optional items do not affect this count.

Recommended Workflow

A clean path from brief to shipped site.

1️⃣

Write a tight brief

One sentence. Name the product, the audience, and the primary CTA. Vague in, vague out.

"Landing page for a GPU cost monitor
targeting ML engineers; CTA = book demo."
2️⃣

Invoke the pipeline

Inside Claude Code, type the slash command with your brief.

/animated-website 
3️⃣

Confirm the plan

Claude drafts sections, palette, and motion language. Reply go to proceed.

Hero Features Social proof Pricing CTA
4️⃣

Preview & iterate

Serve the generated index.html locally.

python3 -m http.server 8000
# open http://localhost:8000
Live demo · built end-to-end with this pipeline

See it in action: Camelot Hound Café

A King-Arthur-themed dog cafe — twelve knight-pup brand identity, Saxon-brews menu, Pixar-3D hero, adoption gallery, and a live map to Camelot. Generated from one short brief.

Camelot Hound Café — the Round Table of dog knights
Example Website
Camelot Hound Café
Single-file build · 9 AI images · scroll reveals · responsive · accessible
🐶 Visit the Cafe
🆓 Zero paid accounts required

Ready to ship something?

Clone the repo, install infsh, and run /animated-website. No API keys needed to get started.

👤 About the Maker

Md Anisur Rahman Chowdhury

Researcher, engineer, and the author of the Animated-Website-skill pipeline. Find me across the web: