Setup Guide

Make Claude Code build
beautiful websites

By Dan Donovan, @askdandonovan

One skill that forces Claude Code to pick a real design direction (colour system, typography, spacing) before writing a single line of code.

2 Steps
~2 min Setup time
1 Skill
Free tools Claude Code requires an Anthropic subscription

What is it?

Claude Code builds websites fast, but every site comes out looking the same. The UI UX Max Pro Skill fixes this by generating a complete design system first (real font pairings, intentional colours, proper spacing) so the code that follows actually looks designed.

What you'll have after this
Design System First
Generated before any code is written
Multiple Style Options
Choose from different design directions
Real Typography
Actual font pairings, not system-ui
Intentional Colours
Palettes matched to your industry
Before you start: You'll need Claude Code installed and Node.js installed. If you don't have either, Step 1 covers Claude Code. For Node.js, visit nodejs.org and download the installer.
1

Install Claude Code

If you already have Claude Code installed, skip to Step 2.

Where's Terminal? On Mac, press Cmd + Space, type Terminal, and hit Enter. On Windows, press the Start button, type cmd, and hit Enter.

Open your terminal and paste this:

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

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

2

Install the UI UX Max Pro Skill

This is the skill that changes everything. It forces Claude Code to generate a complete design system (fonts, colours, spacing, component styles) before writing any code.

Two commands. That's it.

Terminal 
npm install -g uipro-cli
Terminal 
uipro init --ai claude
3

Now use it

Navigate to a folder where you want your site:

Terminal 
cd ~/Desktop

Start Claude Code:

Terminal 
claude

Type your prompt:

"Build me a landing page for a fitness coaching business using the frontend design skill"

Press Enter and watch it build.

Where does the output go? Your website files will appear in the folder you navigated to. Open the index.html file in your browser to see your site. Just double-click it in Finder.
?

What to try first

Open Claude Code and try one of these prompts. Each one will generate a design system first, then build the site.

"Build me a landing page for a fitness coaching business using the frontend design skill"
"Build me a restaurant website with warm, appetising colours"
"Build me a creative agency portfolio with bold typography"
Pro tip: Generate 2-3 versions and pick the best one. To get different design directions, just run the same prompt again. Each time, Claude Code picks a different style: different fonts, different colours, different layout. Try it 2-3 times and pick your favourite.

"Without this skill, every AI website looks identical. With it, you get something you'd actually put your name on."

Something go wrong? Copy the error message and paste it back into Claude Code. It can usually fix the problem itself.