Setup Guide

Build beautiful websites
with Claude Code

By Dan Donovan, @askdandonovan

Two plugins that give Claude Code real design taste: professional typography, colour systems, and production-ready components instead of AI slop.

4 Steps
~5 min Setup time
2 Tools
Free plugins Claude Code plan required (~$20/mo)
?

What is this?

Claude Code builds websites fast, but they all look the same: same blue, same fonts, same layout. Every site looks like it was made by an AI because it was, and the defaults are generic.

Two plugins fix this:

1
UI/UX Pro Max Skill
Forces Claude to generate a real design system before writing any code: typography pairings, colour palettes, spacing scales
2
21st.dev
Gives Claude access to production-ready components (navbars, hero sections, cards, footers) built by real designers

Together, they turn Claude Code from "generic AI page builder" into something that produces sites people actually think were built by an agency.

What you'll have after this
Real Typography
Intentional font pairings, not system-ui defaults
Colour Palettes
Cohesive colour systems, not default blue
Production Components
Navbars, heroes, cards built by real designers
Design System First
Design decisions made before a single line of code
Before you start: You'll need Node.js installed on your computer. Go to nodejs.org, click the big green LTS button, and run the installer. When it's done, close and reopen Terminal so the commands work. You'll also need a Claude Code subscription (Max plan starts at ~$20/mo).
1

Install Claude Code

Claude Code is Anthropic's command-line tool. It runs in your terminal and can read, write, and reason about files on your computer. This is how you'll build websites.

Where's Terminal? On Mac, press Cmd + Space, type Terminal, and hit Enter. On Windows, Claude Code works best through WSL or the desktop app. See the dropdown below.

Open your terminal and paste this command:

Terminal 
curl -fsSL https://claude.ai/install.sh | sh

Once it installs, type claude to verify it works:

Terminal 
claude

It'll ask you to log in the first time. Sign in with your Anthropic account and you're set.

How do I know it worked? You should see the Claude Code interface appear in your terminal: a cursor waiting for your prompt. If you see command not found, close Terminal, reopen it, and try again.
2

Install UI/UX Pro Max Skill

This plugin forces Claude to think about design before it writes code. Instead of jumping straight to HTML, it'll generate a typography system, colour palette, and spacing scale first, like a real designer would.

Two commands. Run them one at a time:

Terminal, Step 1: Install the CLI 
npm install -g uipro-cli
After the first command finishes: Close Terminal completely and reopen it before running the next command. This lets your shell pick up the new uipro command. If you skip this step, the second command will say "command not found".
Terminal, Step 2: Install to Claude Code (globally) 
uipro init --ai claude --global

The first command installs the CLI tool. The second installs the skill globally to ~/.claude/skills/ so Claude Code can use it across every project, not just the folder you're currently in.

What changes? After this, when you ask Claude Code to build a website, it'll start by creating a design system (font pairings, colour palette, component specs) before writing any HTML or CSS.
Getting a permission error? On Mac, try sudo npm install -g uipro-cli instead. It'll ask for your computer password (the cursor won't move while typing, that's normal).
3

Connect 21st.dev

21st.dev is a library of production-ready UI components. Connecting it gives Claude Code access to navbars, hero sections, pricing tables, testimonials, and more, all built by professional designers.

Copy this command and paste it into your terminal:

Terminal 
npx @21st-dev/cli@latest install claude

This registers 21st.dev as an MCP server in your Claude Code settings. When Claude builds a site, it can now pull in real components instead of generating everything from scratch.

If it asks for an API key: Go to 21st.dev, create a free account, and copy your API key from your dashboard. Paste it when prompted.
4

Now try it

Everything's installed. Let's build your first site.

Open Terminal and navigate to your Desktop:

Terminal 
cd ~/Desktop

Start Claude Code:

Terminal 
claude

Type your first prompt, like:

Your first prompt
"Build me a single-page HTML landing page for a coffee shop. Use the UI/UX Pro Max skill for the design system and pull components from 21st.dev. Make it a single index.html file I can open in my browser."

Press Enter and watch it build.

Why name the tools in your prompt? The UI/UX Pro Max skill activates automatically for most design tasks, but explicitly mentioning it and 21st.dev ensures Claude uses both. Otherwise it might skip the design system or build components from scratch instead of pulling production-ready ones.
Claude will ask for permission to create and edit files on your computer. Type y and hit Enter each time to approve. This is normal. You can also type !allowedtools to let it run without asking every time.
Where does the output go? Your website files will appear on your Desktop. On Mac, open Finder and double-click index.html to see your site in the browser. On Windows, right-click the file and choose "Open with" your browser.
Tip: Specifying "single-page HTML" keeps it simple: one file you can open directly. If you want a more advanced React site (using 21st.dev components), Claude will tell you to run npm install && npm run dev to view it.
?

What to try first

Open Claude Code and try one of these prompts. Each one will generate a complete, styled website in seconds.

Simple: single HTML file
"Build me a single-page HTML landing page for my consulting business with a hero, services section, testimonials, and contact form. Use the UI/UX Pro Max skill for the design system."
Intermediate: styled page
"Build me a portfolio site for a photographer with a dark background, image grid, and about section. Single HTML file with embedded CSS."
Advanced: full React site with 21st.dev
"Build me a SaaS pricing page using Next.js. Use the UI/UX Pro Max skill for the design system and search 21st.dev for the navbar, pricing cards, FAQ accordion, and footer components."

Notice how the output looks different from a default Claude Code site. The fonts are intentional. The colours are cohesive. The components look like they came from a design system, because they did.

Simple vs Advanced: The first two prompts create a single HTML file you can open directly in your browser. The third creates a full React project. You'll need to run npm install && npm run dev in the project folder to view it. Start simple.

Daniel Donovan, after testing this workflow on a real project

!

Troubleshooting

General rule: Copy any error message and paste it back into Claude Code. It can usually fix the problem itself.

→

Next: Put it online

You've got a website on your computer. Now make it live. The fastest free option is Vercel: no credit card, no config.

Option 1: Let Claude do it

Ask Claude Code
"Deploy this site to Vercel"

Claude will walk you through connecting your Vercel account and deploying. You'll get a live URL in under 2 minutes.

Option 2: Drag and drop

Go to vercel.com/new, sign up for free, and drag your project folder into the browser. Done. You'll get a live link like your-site.vercel.app.

Want a custom domain? Ask Claude Code: "Connect the domain mysite.com to this Vercel project." It'll generate the DNS settings you need to paste into your domain provider.