A Site a $1-5K Freelancer Would Build. In One Evening.
The full stack for generating websites with Claude Code: UI/UX Pro Max, the Framer Motion skill, and the 21st Dev MCP. Real commands, real expectations, no magic.
Site Factory · Claude Code
Claude Code puts together landing pages, portfolios, and showcase sites at a level freelancers charge one to five thousand dollars for. Not "in a single command" like the Reels promise, but with a handful of well-crafted prompts and the right stack. This guide is an honest breakdown: which 4 tools you need, how to install them, and what to realistically expect.
The numbers
| Value | What it means |
|---|---|
| 4 | tools in the stack |
| 1 evening | for a complete site |
| $20 | per month for the stack |
| $1-5K | the level of the result |
WHAT "$1-5K LEVEL" MEANS
No illusions. No hype.
✅ What the stack nails
- · Service landing pages (lawyer, coach, studio)
- · Portfolios and business showcase sites
- · A simple business-card site with a booking form
- · Product launches, waitlist pages
- · Conference, meetup, event pages
❌ Don't even try
- · An online store with a cart and checkout
- · A SaaS with sign-ups and pricing plans
- · Social networks, marketplaces, dashboards
- · Systems with a database and an admin panel
- · Anything bigger than 5 pages with logic
Why not "in a single command"
One prompt = one screen of average quality. A site at an expensive freelancer's level comes together from 5-10 prompts: hero, product sections, testimonials, form, footer. That's normal, and it's fast. Just don't fall for the "one command" claims in Reels.
① THE 4-TOOL STACK
What and why.
| Tool | Role | Description | Price |
|---|---|---|---|
| Claude Code | The foundation | Anthropic's CLI tool. Runs in your terminal, writes code, installs dependencies, opens projects. Without it, the other 3 tools don't work. | $20/mo (Pro) |
| UI/UX Pro Max | Design aesthetics | A skill with a bank of 50+ UI styles (Glassmorphism, Bento, Brutalist) and design systems. Without it, Claude churns out generic sites that look like AI templates. | free |
| Framer Motion skill | Animations | A skill that teaches Claude to use the Framer Motion library properly: smooth transitions, hover effects, scroll animations. Without it, animations are either bad or nonexistent. | free |
| 21st Dev | Components | An MCP server. Claude asks it for "a beautiful button/hero/form" and gets back a production-grade component. Free tier for search, $20/mo for generation. | $20/mo (Pro) |
Know the difference
Skill = a text instruction that loads Claude up with knowledge. MCP server = an external service Claude calls for data or generation. UI/UX Pro Max and Framer Motion are skills (context). 21st Dev is an MCP (an external tool). They're not the same thing, and they install with different commands.
② SETUP · CLAUDE CODE
The foundation. 5 minutes.
Claude Code is a terminal app. If you've never opened a terminal, don't worry, every step is spelled out below.
1. Open a terminal
Mac: Cmd+Space, type "Terminal", hit Enter.
Windows: Win+R, type "cmd", or install Windows Terminal.
2. Install Node.js (if you don't have it)
Download the LTS version from nodejs.org and install it. This gives you the npm command in your terminal.
Check it: run node --version in the terminal. You should see a version number (for example v22.0.0).
3. Install Claude Code
Run this in the terminal:
``
npm install -g @anthropic-ai/claude-code
``
Give it 30-60 seconds. If it complains about permissions (permission denied), add sudo before the command on Mac.
4. Launch claude
Type this in the terminal:
``
claude
``
On first launch it asks you to log in to Anthropic. A browser window opens; sign in with your clean email account (if you're in Russia, see the access guide).
5. Create a project folder
In the terminal:
``
mkdir my-site
cd my-site
claude
``
This creates a folder, moves into it, and starts Claude Code in that folder's context. This is where your future site lives.
③ SETUP · UI/UX PRO MAX
A design bank. 50+ styles inside.
Without this skill, Claude will churn out generic sites with the same gradients and stock imagery. With it, you get access to Glassmorphism, Bento grid, Brutalism, Editorial, Soft UI, and dozens of other directions. You can just say "make it Bento style" and Claude gets it.
- UI/UX Pro Max (website) — Overview, style examples, documentation
- GitHub (source) — If you want to look under the hood
TWO COMMANDS INSIDE CLAUDE CODE
1. Add the marketplace
Start Claude Code (if it's not already running) and type inside it:
``
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
``
This hooks up the plugin repository. You only run this once.
2. Install the skill itself
``
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
``
Once installed, the skill kicks in automatically whenever Claude sees a design or UI task.
3. Check that it works
Type this in Claude Code:
``
show me the available UI styles from UIUX Pro Max
``
Claude should list 50+ styles. If you get something generic, reinstall.
④ SETUP · FRAMER MOTION SKILL
Animations. No janky effects.
One important thing up front: you're installing the skill, not the library itself. The skill is a set of instructions telling Claude how to use Framer Motion properly. When it's time to build the site, Claude will install the library via npm on its own if it's needed.
What Framer Motion is: a React library from the company Framer for smooth animations. Those "beautiful transitions" on modern sites are often built with it. The skill teaches Claude to use it right: scroll animations, hover effects, transitions between sections.
- ClaudSkills (Framer Motion) — One version of the skill, installs via curl
- GitHub (Schoepplake) — A second version, installs via the plugin marketplace
OPTION A · VIA THE PLUGIN MARKETPLACE (EASIER)
1. Add the marketplace
Inside Claude Code:
``
/plugin marketplace add Schoepplake/framer-motion-skill
``
2. Install the skill
``
/plugin install framer-motion@framer-motion-skill
``
Done, the Framer Motion skill is active.
Option B · via curl (if the first one didn't work)
In a regular terminal (NOT inside claude), run:
``
mkdir -p ~/.claude/skills/framer-motion
curl -L https://claudskills.com/skills/framer-motion/SKILL.md -o ~/.claude/skills/framer-motion/SKILL.md
``
This manually creates the folder and drops the skill file into it. Claude Code will pick it up on the next launch.
⑤ SETUP · 21ST DEV MCP
A component generator. Magic Generate.
21st Dev is the strongest tool in the stack. It's not just templates: it's an AI that generates 5 variants of any UI component (hero, button, form, card) from your text description. Claude talks to 21st Dev over the MCP protocol.
- 21st.dev — Sign-up, docs, pricing
- 21st.dev/magic — Magic Generate, $20/mo for generation
1. Sign up at 21st.dev
21st.dev → Sign up. Log in with GitHub or Google.
2. Get an API key
In your account dashboard, find the API Keys section. Create a new key and copy it. It'll look something like this: 21st_xxxxxxxxxxxxxxxxxxxxx
3. Install the MCP with one command
In a regular terminal (NOT inside claude):
``
npx @21st-dev/cli@latest install --api-key YOUR_KEY
``
Replace YOUR_KEY with the key you copied earlier. The command writes the necessary settings into the Claude Code config on its own.
4. Restart Claude Code
Exit the current session (Ctrl+C twice) and launch claude again. On startup you should see a message that the 21st-dev/magic MCP server is connected.
5. The Pro plan for Magic Generate
Component search is free. Generating 5 variants of a component (Magic Generate) requires the Pro plan on 21st.dev at $20/mo. Without Pro, Claude can find existing components but can't generate new ones for your prompt.
⑥ THE PROMPT · HOW TO ASK FOR A SITE
This is where the magic starts.
With all 4 tools installed, you open Claude Code in your project folder and write one detailed prompt. Claude decides on its own which stack to use, which components to pull from 21st Dev, and which UI/UX Pro Max style to apply.
AN EXAMPLE OF A GOOD PROMPT
``` Build me a landing page for the "Prana" yoga studio in Moscow.
Details: - address: Lesnaya 12, near Belorusskaya metro station - membership price: 8000₽/month - booking via WhatsApp +7 999 123 45 67
Structure: 1. Hero with the name, a subheading, and a booking button 2. Benefits (3 cards: group classes, one-on-one, online) 3. Class schedule (table or list) 4. Team (3 instructors with photo placeholders) 5. Pricing (3 plans) 6. Booking form 7. Footer with contact info
Style: use UIUX Pro Max - something calm and warm. Soft UI or Editorial. Animations: scroll fade-in for sections (use the Framer Motion skill). Components: grab the hero and the form from 21st Dev. Stack: Next.js 16 + Tailwind. No backend, just a static page. ```
What Claude does next
- Scaffolds a Next.js project structure (takes 30-60 seconds)
- Installs dependencies: tailwind, framer-motion, lucide-react
- Hits 21st Dev for the hero block and the booking form
- Applies the UIUX Pro Max style to every section
- Adds Framer Motion animations: fade-in on scroll
- Starts a dev server on localhost:3000
- Gives you the link to open in your browser
The first pass takes 10-15 minutes. After that you say "make the hero bolder", "cut the team down to 2 people", and so on. Those edits take minutes.
The more detailed the prompt - the better the result
"Build me a yoga studio site" = a generic result. With details (name, address, prices, structure, style) = 5-10x better quality. Don't be afraid of writing a long prompt. Claude loves context.
ANTIPATTERNS
Where people fail.
- ✕ Installing only 21st Dev without the skills — You'll get functional components, but the design will be generic. UI/UX Pro Max sets the site's overall taste; without it, every site looks the same.
- ✕ Asking for an "online store" or a "SaaS" — This stack is for landing pages and showcase sites. A store with a cart = a database + payments + an admin panel. That's a different job and a different stack (Next.js + Stripe + Supabase).
- ✕ A short prompt with no structure — "Make it pretty" = pretty by Claude's standards, not yours. Describe the sections, provide the copy, name the style. The more details, the closer the hit.
- ✕ Not naming a UIUX Pro Max style — Claude won't guess which of the 50+ styles you want. Say it outright: "Brutalist" or "Soft Pastel" or "Editorial Magazine". If you don't know - ask Claude to show you the list.
- ✕ Working without a restart after installing — Skills and MCPs get picked up when Claude Code starts. If you installed all 4 tools in a row - exit and launch claude again before you start working.