A clean, modern, animated website that looks like it was built by a high-end agency, built by you, on your own machine, in under an hour. No design skills needed. No coding background needed. Just follow the four steps below.

Who this guide is for

  • Total beginners (you've never coded before, that's fine)
  • Creators who want a personal site, landing page, or portfolio
  • Founders who need a hero page for a product launch
  • Anyone tired of paying agencies $5K to $10K for a basic site

What you need before starting

  1. A computer (Mac, Windows, or Linux)
  2. Node.js installed, grab the LTS from nodejs.org
  3. A Claude account (claude.com, free tier works to try it out)
  4. A code editor, VS Code is the easiest
  5. About 30 to 60 minutes of focused time

That's it. No design software. No Figma. No Photoshop.

The 4 Steps, Overview

  1. Install Claude Code in your terminal
  2. Add the UI/UX Pro Max skill
  3. Pull a hero section from 21st.dev
  4. Drop in Framer Motion for animations

That's the whole flow. Now let's go deep on each one.

Step 1, Install Claude Code in your terminal

Claude Code is Anthropic's command-line coding assistant. Think of it as a senior developer sitting in your terminal, ready to build whatever you describe. You type plain English, it writes the actual code, creates the files, and shows you the result.

How to install it

  1. Open your terminal, on Mac press Cmd + Space and type "Terminal"; on Windows open PowerShell; on Linux you already know.
  2. Run:
npm install -g @anthropic-ai/claude-code
  1. Wait 30 to 90 seconds for it to finish.
  2. Navigate to where you want your project to live:
cd Desktop
mkdir my-website
cd my-website
  1. Start Claude Code:
claude

The first time, it asks you to log in. It opens your browser, you click "approve", come back, done.

How to talk to Claude Code

Just type, in plain English, what you want. No syntax. No magic words. Most people massively overthink prompting, describe what you want like you're talking to a developer friend.

Prompting tips that actually matter

  • Be specific. "Build a website" is bad. "Build a portfolio site for a photographer with a grid gallery and a lightbox" is good.
  • Describe the feeling. Words like minimal, playful, luxury, brutalist, Apple-style, or warm and earthy change everything.
  • Name the stack. Tell Claude what to use: Next.js, Tailwind, TypeScript, React.
  • Iterate. Build the skeleton first, then refine: "make the hero bigger", "change the fonts to serif", "add more whitespace".
  • Ask questions. "Explain what this file does in beginner language."

Step 2, Add the UI/UX Pro Max skill

Out of the box, AI-built sites tend to look the same. Flat gradients. Same fonts. Same spacing. The dreaded "AI slop" look. The UI/UX Pro Max skill is a set of design instructions that teaches Claude how to make layouts that don't look AI-generated, better typography, better spacing, better color, modern patterns.

How to add it

  1. Go to the repo.
  2. Click the green "Code" button, then "Download ZIP".
  3. Unzip the folder. Inside you'll see a SKILL.md file.
  4. In your project folder, create a folder for the skill:
mkdir -p .claude/skills/ui-ux-pro-max
  1. Copy SKILL.md (and any other files from the repo) into that folder.
  2. Restart Claude Code so it picks up the new skill.

Now when you ask Claude to design anything, it follows the design rules automatically. You don't need to mention the skill in your prompt, it just works in the background.

Step 3, Pull a hero section from 21st.dev

21st.dev is a huge library of pre-built, beautiful UI components made by real designers, hero sections, navbars, pricing cards, testimonials, all free to copy. Think of it as Lego blocks for your website.

How to use it

  1. Visit 21st.dev and filter by "Hero" or "Landing Pages".
  2. When you find one you like, click it and grab the install code.
  3. Back in your terminal, tell Claude:

Claude figures out where to put it, installs missing packages, updates imports, and wires it into your page. This is the magic move, designer-quality sections without designing them.

What to look for in a good hero

  • Big, confident headline, bold and large
  • Plenty of whitespace
  • One clear call-to-action (not three)
  • Some visual interest: subtle gradient, 3D object, illustration, or product screenshot
  • Mobile-friendly out of the box

Repeat the same process for pricing tables, testimonials, feature grids, FAQs, footers. Tell Claude to keep palette, typography, and spacing unified across them.

Step 4, Drop in Framer Motion for animations

A static site and an animated site feel like different price brackets. Subtle motion, text fading in, cards lifting on hover, sections sliding up as you scroll, is what makes a site feel expensive.

Install it

npm install framer-motion

Or just ask Claude: "Install Framer Motion in this project."

Use it (the easy way)

You don't need to learn Framer Motion's API. Describe what you want:

  • "Make the hero headline fade in and slide up when the page loads, 0.6s duration."
  • "When the user scrolls to the features section, stagger each card with a fade-up."
  • "On hover, make the pricing cards lift slightly and glow at the edges."
  • "Add a smooth page transition between routes."

Putting it all together, a real 45-minute workflow

  • 00:00 to 00:05, Open terminal. Run claude. Ask it to set up Next.js + Tailwind + TypeScript.
  • 00:05 to 00:10, Add the UI/UX Pro Max skill to .claude/skills/. Restart Claude.
  • 00:10 to 00:20, Prompt the full landing page: hero, features, pricing, testimonials, footer.
  • 00:20 to 00:30, Browse 21st.dev. Pick a hero. Paste it to Claude to swap in and adapt.
  • 00:30 to 00:40, Add Framer Motion. Fade-ins on scroll, hover lifts, a page-load animation for the hero.
  • 00:40 to 00:45, Run npm run dev, open localhost:3000, fix anything weird by prompting Claude.

Done. A site that looks like it cost $10K to build.

How to deploy it (free)

  1. Make a free account at vercel.com.
  2. Push your project to GitHub (Claude can run the git commands).
  3. On Vercel, click "Import Project", connect your repo, click Deploy.
  4. ~60 seconds later you have a live URL.
  5. Add a custom domain later if you want (~$10 to $15/year).

Common beginner mistakes to avoid

  • Prompting the entire site in one giant message. Build in chunks.
  • Skipping the UI/UX Pro Max skill, without it, your site looks generic.
  • Not previewing as you go. Run npm run dev early and often.
  • Saying "just fix it" when something breaks. Paste the actual error.
  • Over-animating. Pick 3 to 4 animation moments max.
  • Forgetting mobile. Always ask: "Make sure this is fully responsive."

What to do if you get stuck

  • Tell Claude the exact error. Copy-paste it.
  • Ask Claude to explain what it just did. Understanding beats copying.
  • Start a fresh terminal session if context gets weird.
  • Use git. Commit after every working step, roll back when things break.