104August 18, 2026·4 items

Animated websites with Claude Code: the 4-tool setup

The setup genuinely works: you give Claude a design library, animation, and a pool of ready-made components, then build a site with a single sentence. But the guide going around is out of date: three of its four commands point at either a stale package or a retired service. I verified everything below against its source; this is the version that works.

Claude CodeWeb TasarımGeliştirici Araçları

The source itself

The original setup lives in the repo below. If that's all you want, go ahead.

What follows is the verified version: I checked every command against the package's and project's own docs, and replaced the stale ones with what actually works.

Open the original setup on GitHub

About "free"

All four can be used for free, but two come with conditions worth knowing up front:

Claude Code costs money on its own subscription. But it can be pointed at another provider: two environment variables connect it to a model with a free tier. Which providers have free tiers, and their limits, are listed one by one in the previous resource, 103.

There's a snag: Claude Code expects an endpoint that speaks Anthropic's format, while most free providers speak OpenAI's. So you need a translating layer in between (a proxy like LiteLLM). This is where everyone gets stuck; even with a free provider, pasting the URL straight in won't work.

If you install LiteLLM, watch the version

On 24 March 2026, LiteLLM's PyPI versions 1.82.7 and 1.82.8 were poisoned with credential-stealing code targeting SSH keys, cloud credentials and crypto wallets. The package was pulled and restored, and the current release is clean. Installing without pinning a version gets you the current one; but if you see a command pinning a specific version somewhere, make sure it isn't one of those two.

On the 21st.dev side, searching, publishing and managing are free; installing components is capped at two a day, and generating AI variants needs credits. Exploring is free; mass production isn't.

Free providers → 103

The broken commands in the guide going around

The logic is right, the commands are stale. I verified each of these against the packages' own records; type the top one and you either install the wrong package or nothing happens at all.

npm install -g uipro-cli. The project's own README says this package is stale and shouldn't be used for current assets.

npm install -g ui-ux-pro-max-cli. It still installs the uipro command; only the package name changed.

npm install framer-motion. The library split from Framer in 2025; the name still works but is no longer developed.

npm install motion. You import from "motion/react".

Installing the animation library during setup: with no project yet, the package lands nowhere.

Create the site project first, then install Motion inside it. It's not a Claude plugin, it's a project dependency.

@21st-dev/magic + 21st.dev/magic/console. The package is deprecated on npm; its notice says it "talks to a retired backend and old API keys were reset".

npx @21st-dev/cli@latest init. Get your key from 21st.dev/mcp.

Claude Code: the thing doing the work

The other three add capabilities to Claude; this is what writes the site. It runs in your terminal and creates and edits files directly. If you're pointing it at a free provider, the two variables below are the crux.

Pointing it at another provider

export ANTHROPIC_BASE_URL="<provider's Anthropic-compatible URL>"
export ANTHROPIC_AUTH_TOKEN="<your key>"
export ANTHROPIC_API_KEY=""

The URL must be Anthropic-compatible. Most free providers speak OpenAI's format; for those you need a translating proxy in between. See 103 for the provider list and limits.

Open

UI/UX Pro Max: design intelligence

Gives Claude a ready-made design system: styles, colour palettes, font pairings, accessibility rules. You see the difference immediately: without it the page looks AI-made; with it, designed.

Two ways

# From inside Claude Code (easiest):
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# Or from the terminal:
npm install -g ui-ux-pro-max-cli
uipro init --ai claude --global

The package is ui-ux-pro-max-cli; the old uipro-cli is stale. The trailing --global flag installs into ~/.claude/skills/, so it's on for every project. For a single project, drop the flag and run it inside the project folder.

Open

Motion: animation (formerly Framer Motion)

Page transitions, hover effects, sections that reveal as you scroll. Most of what makes a site feel expensive is this. Claude already knows the library; your job is to add it to the project.

Inside your project

npm install motion

// React tarafında:
import { motion } from "motion/react"

This is not a Claude plugin; there is nothing to "connect". Installed before the site project exists, it lands nowhere. Order: project first, then this.

Open

21st.dev: the component pool

Ready-made React components built by the community: buttons, navbars, hero sections, cards. You pick what you like and Claude drops it into the site. Faster than having components written from scratch, and tidier.

Setup

npx @21st-dev/cli@latest init

Get your key from 21st.dev/mcp. The older @21st-dev/magic package and magic/console URL no longer apply; that package is deprecated on npm and old keys were reset. Search is free; component installs are capped at two a day.

Open

DOA: Yapay Zeka ve Otomasyon

Installing these tools on your own is one thing; actually building with them is another. The community has people using these daily and people building systems from scratch.

If you want a system that actually runs in your business, let's talk for 10 minutes; I'll look at what you're trying to build and tell you which path fits. Free, and not a sales pitch.

Book a 10-minute call

If you'd rather learn this alongside people doing the same work instead of on your own, the community is always open:

Join the community

This is an affiliate link.

← All resources