Content
# Build Stunning Websites with Claude Code
> Full setup guide from the YouTube video — copy-paste everything you need.
No frameworks to learn. No design skills required. Just Claude Code + the right tools wired in.
---
## What You're Installing
| Tool | What it does |
|------|-------------|
| **UI/UX Pro Max** | Gives Claude a massive design system: 67 styles, 96 palettes, 57 font pairings |
| **21st.dev Magic MCP** | Lets Claude pull 100+ polished, production-ready React components |
| **Playwright MCP** | Lets Claude take screenshots of your live site and fix visual issues automatically |
---
## Prerequisites
You need **Node.js** and **Claude Code** installed.
- Node.js: https://nodejs.org (download the LTS version)
- Claude Code: https://claude.ai/code
Verify Node is installed:
```bash
node --version
npm --version
```
---
## Step 1 — Install UI/UX Pro Max
This gives Claude a professional design vocabulary. Without it, Claude defaults to generic Inter font + blue buttons.
```bash
npm install -g uipro-cli
uipro init --ai claude
```
Done. Claude now has access to the full design library on every project.
---
## Step 2 — Set Up 21st.dev Magic MCP
This connects Claude to a library of polished UI components it can pull in while building your site.
**2a. Get your free API key**
1. Go to https://21st.dev/magic/console
2. Sign up (free)
3. Copy your API key
**2b. Add it to Claude Code**
Open `~/.claude.json` in any text editor and add the following inside the `"mcpServers"` object:
```json
"21st-dev-magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "YOUR_API_KEY_HERE"
}
}
```
If `mcpServers` doesn't exist yet, your full `~/.claude.json` should look like:
```json
{
"mcpServers": {
"21st-dev-magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "YOUR_API_KEY_HERE"
}
}
}
}
```
**Restart Claude Code** after saving.
---
## Step 3 — Install Playwright MCP
This lets Claude open your deployed site in a headless browser, take a screenshot, and fix visual bugs automatically — no manual review needed.
Add this to `"mcpServers"` in `~/.claude.json` (alongside the 21st.dev entry):
```json
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
```
**Restart Claude Code** after saving.
Your final `~/.claude.json` should have both entries:
```json
{
"mcpServers": {
"21st-dev-magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "YOUR_API_KEY_HERE"
}
},
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
```
---
## Step 4 — The Master Build Prompt
Copy this entire prompt into Claude Code. Fill in the bracketed sections, then hit send.
```
Build me a complete, production-ready website. Here are the details:
**Project:**
[What does the business/project do? 1–2 sentences]
**Target audience:**
[Who is it for?]
**Pages / sections needed:**
[e.g. hero, services, pricing, about, contact — or just say "standard landing page"]
**Vibe / aesthetic:**
[e.g. dark & minimal, bold & colorful, luxury, playful, corporate, brutalist, editorial]
**Tech stack:**
[Next.js + Tailwind + shadcn/ui (default) — or plain HTML if you want a single file]
**Colors or references:**
[Any specific colors, fonts, or websites to draw inspiration from — optional]
---
Design requirements (follow these exactly):
- Use UI/UX Pro Max to select a specific aesthetic style, color palette, and font pairing.
Never use generic fonts like Inter, Roboto, Open Sans, or Lato.
Pick something characterful that fits the vibe.
- Search 21st.dev Magic for polished components for the hero, navigation, and feature/service cards
before writing any section from scratch.
- Every page must include:
1. Staggered entrance animations on the hero (Framer Motion: opacity + translateY, 0.1s stagger)
2. Scroll-triggered reveals on all sections (whileInView, viewport once: true)
3. Hover lift on cards (translateY -4px, box-shadow)
4. At least one ambient background animation in the hero (floating gradient orbs or mesh gradient)
5. Page transitions with AnimatePresence
- The site must look like it was designed specifically for this project — not a template.
Commit fully to the chosen aesthetic. No half-measures.
- Write all files completely. No TODOs, no placeholders, no "implement this later" comments.
```
---
## How the Screenshot Review Works
Once the site is deployed (to Vercel, Netlify, Surge, etc.), add this to your prompt:
```
Navigate to [YOUR_LIVE_URL], take a full-page screenshot, review it for any visual issues
(broken fonts, layout overflow, low contrast, misaligned sections), fix them all in one pass,
redeploy, and screenshot again to confirm.
```
Claude will open the live URL in a headless browser, screenshot it, diagnose issues, fix the
HTML/code, redeploy, and verify — automatically.
---
## Quick Reference
| What | Command / Location |
|------|-------------------|
| UI/UX Pro Max install | `npm install -g uipro-cli && uipro init --ai claude` |
| MCP config file | `~/.claude.json` → `mcpServers` |
| 21st.dev API keys | https://21st.dev/magic/console |
| Restart Claude Code | Close and reopen the app or terminal |
---
## Troubleshooting
**"uipro: command not found"**
Run `npm install -g uipro-cli` again. If on Mac/Linux, you may need `sudo`.
**21st.dev components not appearing**
Make sure you restarted Claude Code after editing `~/.claude.json`. Check the key is correct
(no extra spaces or quotes).
**Playwright screenshots not working**
Some environments block headless browsers. As a fallback, deploy the site and paste the URL
manually — Claude can still read and fix the code without a screenshot.
---
Built with Claude Code · github.com/[your-handle]/claude-web-stack-guide
