Give Claude Code a one-line brief and this free four-part stack returns a professional, animated site that does not look AI-generated. Claude builds, Framer Motion animates, a UI skill enforces taste, and 21st.dev supplies the hard sections. Setup takes a few minutes.
The Problem: AI Sites Look AI-Built
Point Claude Code at "build me a website" and you get something that works. It loads, the buttons click, and it looks like every other AI site: flat sections, default spacing, no motion.
Clients notice. A templated site reads as a templated business.
That output is a skills problem, not a Claude problem. Claude was never shown what a designed site looks like or how to animate one. Teach it both, hand it a library of good components, and the same brief comes back looking like you paid an agency for it.
What Is the Web Design Stack?
The web design stack is a free Claude skill that chains four pieces: Claude Code as the builder, Framer Motion for animation, a UI-quality skill so the output looks designed instead of generated, and the 21st.dev component library for ready-made sections like pricing tables and testimonials. You provide an empty folder and a one-line brief. The stack ships the site.
| Piece | What it does | Cost |
|---|---|---|
| Claude Code | Builds the whole site in React | Free to install |
| Framer Motion | Every animation, without hand-coded CSS transitions | Free library |
| UI-quality skill | Spacing, type, contrast, restraint | Free |
| 21st.dev | Pre-built React + Tailwind sections you paste in | Free to browse and copy |
Hosting costs nothing either. The finished site deploys to Vercel for free.
Part 1: Claude Code Runs the Build
Claude Code turns your brief into a real React project. In an empty folder, the scaffold is four commands:
Copy this.
npm create vite@latest . -- --template react npm install npm install framer-motion npm run dev
The last command gives you a local URL, usually http://localhost:5173. Keep it open in a browser tab. The page live-reloads as Claude builds.
You need Node.js first. Check with node -v; you want version 18 or newer. If that errors, install the LTS build from nodejs.org. You do this once, ever.
Pick Next.js instead of Vite when the site needs multiple routes or SEO pages. The animation and component steps stay identical.
Part 2: Framer Motion Handles Every Animation
You will not write a single CSS transition. Framer Motion is a free React library, and the skill carries four ready patterns that cover almost every marketing site: fade up on scroll, staggered lists, hover lift, and a hero headline reveal.
Copy the workhorse, fade up on scroll:
Copy this.
import { motion } from "framer-motion";
<motion.section
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
{/* section content */}
</motion.section>
The mistake that makes it fail: forgetting viewport={{ once: true }}. Without it the animation replays on every scroll and the site feels cheap.
Paste the patterns file to Claude once, at the start, so it animates consistently instead of improvising a new style per section. Three rules keep the motion in check: entrances and hovers only, durations between 0.4 and 0.6 seconds, and when two things fight for attention, cut one.
Part 3: A UI Skill Kills the Template Look
This is the piece most people skip, and it is why their sites look generic.
A UI-quality skill teaches Claude a real design standard: spacing scale, type hierarchy, contrast, restraint. With one loaded, Claude stops reaching for the same flat defaults. The creator of the original video uses a skill called UI UX Max Pro. Any strong, well-written design skill does the same job.
No design skill yet? Steer taste by hand. Give Claude one real website you admire and ask it to match that level of spacing and restraint. Weaker than a dedicated skill, but a lot better than nothing.
Part 4: 21st.dev Supplies the Hard Sections
Pricing tables, testimonial walls, feature grids. These are slow to build by hand and easy to get wrong. 21st.dev is a free community library of React + Tailwind sections, so you copy a good one instead.
The flow takes three steps. Go to 21st.dev and pick a component that fits the section you need. Copy its code snippet. Paste it to Claude with one instruction: "Add this as the pricing section. Match our colors and copy from the brief, keep the layout." Claude drops it in and rewrites the placeholder text and colors to match your site.
The 2 Fixes for a Broken Paste
A missing dependency. The component uses a library you have not installed, and the error names it. Tell Claude "install what this needs" and it runs the install.
Tailwind classes doing nothing. The file sits outside Tailwind's content paths, or the component uses design tokens your config lacks. Let Claude add the tokens or swap them for your palette.
One habit keeps the page coherent. After each pasted component, ask Claude to align it to the site's spacing, font, and color. Two or three pasted sections can clash, and without that pass the page reads as a scrapbook instead of one design.
2 Ways to Install the Skill
The skill is a folder of plain markdown files: the instructions, the animation patterns, the 21st.dev playbook, and a troubleshooting list. Grab it from the resource block at the bottom of this page, then install it one of two ways.
If you use Claude Code: download the folder from Drive, unpack the zip, and move it into ~/.claude/skills/ on your machine. Create the skills folder if it does not exist yet.
If you use Claude on the web or desktop app: keep the zip as it is. Open Settings, then Capabilities, and upload the zip as a skill.
Then start a chat and say: "Build my site with the web design stack. My brief: a clean, modern landing page for my business."
Swap in your real brief. One or two lines is enough: what the site is for and the vibe you want. "SaaS landing page for a CRM, clean and modern, deep blue + white" is a complete spec.
One safety rule. Never paste passwords or API keys into the chat. If a tool needs a key, it goes in the project's .env file on your machine, and Claude never sees it.
Done. The skill is installed.
Because it is plain markdown, the skill is not locked to one engine either. Claude Code and Claude Desktop read it natively, and any agent that follows skill files can run it.
What Happens When You Run It
Claude builds the page section by section and shows you each one. Hero first, then the two or three sections your brief calls for, then the footer. It never dumps a whole page on you unseen.
Animations follow the patterns file. Components come from 21st.dev where they beat hand-building. When the page looks right locally, deploy is three moves: push the project to a GitHub repo (Claude can do this for you), import the repo on vercel.com with "Continue with GitHub", and accept the defaults. You get a live something.vercel.app URL in about a minute. Point a custom domain at it later from Vercel's Domains tab.
Honest: The Snags You Will Hit
The site still looks AI-generated. Two causes: the UI skill was not actually loaded, or the brief gave no visual direction. Confirm Claude acknowledges the skill, and name one reference site you want it to match.
Everything animates at once. Too many effects firing on load. Stagger the lists and reserve motion for entrances and hovers. Subtle beats flashy.
The deploy succeeds but the page is blank. Vercel got the wrong build settings. Re-import the repo and let it auto-detect the framework instead of overriding.
And know the scope. This skill ships a single marketing site. Multi-page builds, a CMS so a non-coder can edit copy, contact forms, and analytics sit outside it.
Run One Brief This Week
If you only do one thing this week: install the stack and hand it the page you keep putting off. The landing page for your offer. The one you explain from scratch on every call.
One brief, one page. If the result is not for you, you spent a few minutes and zero dollars. Everything in this stack is free.