How to build your first website with Claude

What's up, it's murphmaxxing. Welcome to my easy guide to building your first website. Take it slow, read and install carefully, and don't skip the optional step at the end.

Step 1: Install Claude

Install the Claude desktop app and make sure you also install Next.js 16 or newer. Grab the app at claude.ai/downloads.

Step 2: Add the UI/UX Pro Max skill

Open Claude Code and ask it to install this link, the UI/UX Pro Max skill: github.com/nextlevelbuilder/ui-ux-pro-max-skill

Step 2.5: Add the Superpowers plugin

In Code, send this prompt in and ask it to install:

claude plugin install superpowers@claude-plugins-official

Step 3: Connect 21st.dev Magic Chat

Make an account on 21st.dev, then go to 21st.dev/magic-chat. Click MagicChat on the left sidebar, scroll down, and copy the install command. It looks like this (your own API key goes where the stars are):

claude mcp add magic --scope user --env API_KEY="********" -- npx -y @21st-dev/magic@latest

Step 4: Install Framer Motion

Send this command into Claude Code:

npm install framer-motion

Step 5: The master prompt

Fill this prompt out with whatever you want your website to be about, then paste it into Claude Code. Don't be lazy and ask Claude to fill it in for you. Fill the brackets, delete the hints, paste the whole block. Have these active: UI/UX Pro Max, Framer Motion, 21st.dev Magic Chat MCP, and Superpowers.

Build a minimal, premium landing page for [YOUR PRODUCT/SERVICE in one line].

THE ONE FEELING: [pick one, e.g. "expensive and calm" or "loud and rebellious"]. Every choice serves this. If something does not, cut it. When in doubt, remove, do not add.

STACK
- Latest Next.js with the App Router + TypeScript. Do not pin an old major version.
- Tailwind CSS
- Framer Motion for animation
- Use the 21st.dev Magic Chat MCP for structural components, then restyle them to match your design system
- Use the UI/UX Pro Max skill to define the design system
- Use Superpowers to plan, scaffold, run, and inspect the project

DEFAULT TEXT (this is where these builds usually fail)
- Two fonts total: one display font for headlines, one clean readable font for everything else. Not Inter, Roboto, or Arial.
- Headlines in sentence case. Do not force all-caps and do not use small-caps.
- Body text: 16 to 18px, line height around 1.6, max line length about 65 characters.
- High contrast. Body text must pass WCAG AA against its background.

DESIGN SYSTEM (lock before building sections)
- One dominant color, one accent, used sparingly. No third color.
- Lock a spacing scale and stick to it. Extreme negative space. Add room, not content.
- Every section fills the width with balance.

SECTIONS (keep it lean, in order)
1. Sticky navbar
2. Hero: one headline, one line of subtext, one CTA.
3. Features: 3 to 4, visually distinct.
4. Social proof
5. Pricing
6. FAQ
7. Footer with personality

MOTION (less is more)
- Pick 2 to 3 high-impact moments: a staggered hero entrance, gentle scroll reveals (whileInView, once: true), and one signature hover. Respect prefers-reduced-motion.

CHECK YOUR OWN WORK (after every section)
- Run the site, open localhost:3000, and screenshot the section you just built.
- Critique it honestly: balanced or empty on one side? Crowded or misaligned? Readable? Intentional type?
- Fix every problem, screenshot again, and only show me once it looks right.
- Confirm there are no build errors before moving on.

QUALITY BAR
- One idea per section. Generous space between blocks.
- Desktop-first, then make it hold up smaller.
- Copy sounds human. No em-dashes.

PROCESS
1. Lock the design system and default text rules first.
2. Build one section at a time. Screenshot, self-critique, fix, then show me.

Optional Step 6: Take it live

If you want the site on the internet, make an account on Vercel for hosting and Supabase for a database, then ask Claude to connect your project to both. Best of luck, and DM me for any help.