Academy — Pro Websites with Claude Code

Getting Started

Set Up Claude Code

Install VS Code, add the Claude Code extension, and unlock the workflow that lets Claude actually build with you — not just chat about code.

What You Need

◆ VS Code (free) — your code editor

◆ A Claude Pro or Max account — Free tier doesn't include Claude Code

◆ About 30 minutes for first-time setup

Install VS Code

📌 Once for the whole machine

1.Open your browser → search "VS Code" → download for your operating system

2.Install and open the application

Install the Claude Code Extension

📌 Inside VS Code

1.Left sidebar → click the Extensions icon

2.Search "Claude Code" → click Install

3.A new Claude icon appears in the top toolbar

4.Click it → sign in with your Anthropic account

5.✓ Done. Left = files, Right = Claude Code agent (like a chat).

Create Your First Project Folder

📌 The folder Claude will work inside

1.Create an empty folder anywhere (Desktop or Documents)

2.In VS Code: Explorer → Open Folder → select it

3.Claude Code now has full visibility into that folder

Enable Bypass Permissions (Recommended)

This setting lets Claude work without asking you to confirm every single action — much faster, much smoother.

📌 In VS Code Settings

1.Open VS Code Settings

2.Search "Claude Code"

3.Enable "Allow Dangerously Skip Permissions"

⚠ The trade-off: Claude executes commands without confirmation. In practice this is fine for building websites — as long as you're actively watching. Never let it run overnight unattended.

Project Memory

The CLAUDE.md File

Imagine hiring a new employee. Instead of re-explaining who you are at every task, you hand them a briefing document. They read it every morning. That's CLAUDE.md — Claude reads it before every single prompt.

What Goes In It

Rules, brand assets paths, screenshot workflow, deployment rules. Anything Claude needs to remember on every session.

Example CLAUDE.md template

# Project: [NAME]

## Rules
- Always invoke the frontend design skill before any frontend code
- Always use brand assets from /brand_assets/
- Screenshot workflow is active

## Brand Assets
- Logo: /brand_assets/logo.png
- Brand Guidelines: /brand_assets/guidelines.pdf

## Screenshot Workflow
After each build:
1. Start the server
2. Take screenshots
3. Visually review and improve

## Deployment Rule
Always develop on localhost first.
Only push to GitHub when I explicitly say: "Push to GitHub"

Two Ways to Create It

Option A · Easiest

Ask Claude Code directly: "Create a CLAUDE.md file for a website project. My project is: [DESCRIPTION]" — Claude generates a starting template tailored to you.

Option B · Pre-made

Use a ready-made template from a community or course. Drop it in the project root, edit the brand/path lines, done in 2 minutes.

It evolves: Your CLAUDE.md isn't one-and-done. Start with the basics, add rules as you discover what works. The longer you use Claude Code, the smarter your CLAUDE.md gets.

End of AI Slop

The Frontend Design Skill

This single skill is the difference between "obvious AI website" and "actually looks professional." It's a knowledge file Claude reads before writing any frontend code.

With Skill vs Without

✗ Without the Skill

Purple gradients. Generic SaaS layouts. Recognizable as AI at first glance. About 40% of what you actually want.

✓ With the Skill

Real animations. Better spacing and typography. No standard AI template. About 60–70% — noticeably professional.

Install the Skill

📌 One command, available everywhere

1.Open Claude Code inside VS Code

2.Type: "Install the Frontend Design Skill globally."

3.Claude handles the install on its own

4.✓ Available in ALL future projects, not just this one

Confirmation It's Working

You'll see in Claude's response: "Invoking the frontend design skill..." — that's your signal it's active.

Force It in CLAUDE.md

So Claude never forgets, add this to your CLAUDE.md:

Add this rule

## Mandatory Rule
Always invoke the Frontend Design Skill before any frontend code.
No exceptions, every session.

Bonus skill — UIUX Pro Max: Open source on GitHub (52,000+ stars). Specifically lists the AI design patterns to avoid. Stack it on top of the Frontend Design Skill for even better results.

Self-Review Loop

The Screenshot Loop

Instead of you telling Claude what looks good, Claude takes a screenshot of its own work, reviews it, and fixes itself. Build → Screenshot → Review → Fix → Screenshot again.

The Cycle

Write code

Claude implements the section you asked for

Start the local server

Claude spins up localhost on its own

Take a screenshot

Puppeteer captures the rendered browser view

Visually check the result

Does it match the goal? Spacing, alignment, color?

Adjust + screenshot again

Repeat until it actually looks right

Wire It Into CLAUDE.md

Add this section

## Screenshot Workflow
Use Puppeteer for screenshots during development.
- Save screenshots in /temp_screenshots/ with timestamp
- At minimum 2 rounds: Build → Screenshot → Review → Fix → Screenshot
- Compare screenshots with reference when available

Claude will set up Puppeteer itself the first time you ask for it.

When to Turn It OFF

⚠ Animated elements break the loop. Screenshots only capture frozen frames — they don't capture motion. Claude thinks the animation wasn't built, keeps trying, and gets stuck in an infinite loop.

Use this when adding animations

Add this animated element.
IMPORTANT: Do NOT use the screenshot tool since this is an animation.
Let me know when you're done and I'll check it myself.

Inspiration → Output

Clone Sites You Love

Find a website you like visually. Hand its screenshot and styles to Claude. Get a version of it with your content, your branding — without losing what made the original look good.

Where to Find Inspiration

Dribbble

Design community — explore by mood, color, or industry.

dribbble.com

Godly Website

Infinite scroll of great-looking websites. Best for layouts.

godly.website

Awwwards

Award-winning designs (3 W's in the URL — not 2).

awwwwards.com

Surprisingly strong for landing pages and hero sections.

pinterest.com

motion-sites.ai

Animated backgrounds, scroll effects. Copy-paste prompts.

Animations

Step 1 · Full-Page Screenshot

📌 Capture the whole page, not just the viewport

1.Open the inspiration site, press F12 (Windows) or Right-click → Inspect (Mac)

2.Open the Console tab

3.Press Ctrl+Shift+P (Win) or Cmd+Shift+P (Mac)

4.Type "Screenshot" → choose "Capture full size screenshot"

5.✓ Complete page (not just visible area) downloads automatically

Step 2 · Grab the Styles

📌 Inside Developer Tools

1.Open the Elements tab

2.Copy the style section (HTML + CSS)

3.Advanced: Also grab the source code (Ctrl+U) for HTML + JS

Step 3 · Hand It To Claude

Paste into Claude Code

I want to create a new website similar to this inspiration.

Here's the screenshot: [INSERT SCREENSHOT]
Here's the style code: [INSERT CSS CODE]

Create a new website that follows this design.
Use the same visual structure as a starting point.
Show me on localhost.

Step 4 · Apply Your Branding

After the structure looks right

The website looks good. Now:
- Use our Brand Guidelines: @brand_assets/guidelines.pdf
- Use our logo: @brand_assets/logo.png
- Adapt the content for our product/company
- Translate everything to [language]

Why this works: You're not asking Claude to invent design taste — you're giving it a reference to mimic, then re-skinning with your brand. That's the whole trick.

The Final Upgrade

Individual Components

Instead of cloning a whole site, you now clone individual UI elements — animated backgrounds, special buttons, glow effects — and drop them into your existing build. This is what separates "fine" from "wow".

The Best Source · 21st.dev

A library of high-quality, ready-to-use website components. Animated backgrounds, glow buttons, hover effects, navbars, card designs — all copy-and-paste.

📌 How to use 21st.dev

1.Go to 21st.dev

2.Pick a category (e.g. Backgrounds → Hero Waves)

3.Click the element you like

4.Click "Copy Prompt" — copies the code snippet

5.Paste into Claude Code with the prompt below

Drop the component in

Add this element to our website:
[INSERT CODE FROM 21ST.DEV]

Do NOT use the screenshot tool (it's an animation).
Let me know when done.

Other Component Sources

CodePen

Many creative one-off effects, easily ported.

codepen.io

Shadcn/UI

Professional React component library, production-ready.

React

motion-sites.ai

Copy prompt → paste into Claude Design or Claude Code directly.

Animations

Mindset shift: You're not building from scratch — you're assembling. Pro websites are collages of components that look great together. This is exactly how design agencies actually work.

Design Quality Map

The 7 Levels of Quality

A clean ladder that explains why some Claude websites look AI-generated and others don't. Find your current level. Climb one step at a time.

The Ladder

Just a prompt

"Create a landing page for X" — no further instructions. Generic AI design. Purple gradients. Most people are stuck here.

Beginner

Activate design skills

Frontend Design Skill or UIUX Pro Max Skill enabled. Better spacing, better typography. Still feels templated — just a better template.

Basic

Add visual references

Hand Claude screenshots of websites you like. Claude can now mimic instead of describe. Ceiling: about 50% accuracy from image alone.

Solid

Clone the actual code

HTML + CSS + JS from the inspiration site. Claude understands the technical implementation, not just the image. The most important jump.

Pro

Add your own elements

Custom AI-generated artwork, 21st.dev components, custom fonts. It finally feels like your project, not a template.

Pro

External design tools

Stitch (free, by Google), Figma, Pencil.dev, Paper.design. Iterate visually, then bring the export back into Claude Code.

Senior

3D / WebGL

Custom WebGL, 3D experiences, complex shaders. Still beyond most users — but it's where things are heading.

Expert

Honest take: Most people are stuck at Levels 1–3. The biggest single jump is going from Level 3 (screenshot mimic) to Level 4 (clone the code). That's when you start to understand how websites actually work, not just how they look.

The New Tool

Claude Design

Released April 2026, Claude Design is a separate Anthropic product built specifically for design work. Prototypes, landing pages, slide decks, animated promos — all powered by Claude Opus 4.7 vision.

Quick Facts

Apr

Released April 2026

4.7

Pro+

Pro / Max / Team only

⚠ Separate quota: Claude Design has its own weekly usage limit — independent from your normal Claude messages. Use it wisely.

What It Can Build

Prototypes

Wireframe + high-fidelity. Iterate visually.

Wireframes

Pitch Decks

Slide decks with consistent design system.

Slides

Landing Pages

Production-ready, exportable, brand-consistent.

Web

Mobile Mockups

App screens, flows, and full mockup sets.

Mobile

Launch Videos

HTML animations and short promos.

Motion

Design Systems

The foundation everything else builds on.

Systems

The Design System (Most Important Foundation)

A design system is the recipe book for your brand: colors, typography, button styles, spacing rules, components. Once you have one, Claude Design builds everything consistent with your brand — automatically.

If you have a brand

Claude Design → Design Systems → Create New. Enter company name, link GitHub repo (recommended), upload logo + assets. Optional: import a Figma file. Generation takes ~5 min.

Starting from scratch

First develop the brand in regular Claude (saves Design quota), save as markdown, upload that file into Claude Design.

Brand kick-off prompt (regular Claude, not Design)

Help me develop a brand for [PRODUCT].
I need: name, positioning, target audience, color palette (4 colors),
typography (primary + secondary font), logo concepts,
visual identity and voice/tone

Workflow · Building a Landing Page

Concept + content in regular Claude

Hero text, features, social proof, pricing, CTA — saved as markdown

Open Claude Design

New project → High Fidelity → select your design system → upload markdown

Use Tweaks, not prompts

The Tweaks panel (right side) lets you change colors, fonts, layouts in real time — no tokens used until you apply

One change per prompt

Claude Design loses focus with 5+ simultaneous changes. Iterate small, ship faster.

Feedback Methods

Method	When to use
Comment — click element → enter text	For specific elements
Direct edit — click text → change	For text, colors, sizes
Draw — circle an area → annotate	Regions without a clear element
Tweaks — sliders + options	Global style changes

Token-saving rule: Brainstorm in regular Claude. Build in Claude Design. Brainstorming inside Design wastes its separate quota — and you'll hit the wall fast.

Localhost → Live

Deploy to a Real Domain

The full path from "looks good on my laptop" to "anyone in the world can visit it." Claude Code → GitHub → Vercel, with auto-deploy on every change.

How the Three Pieces Fit Together

The Deployment Pipeline

Claude Code

Where you build locally
Tests on localhost first
Pushes when you say so

GitHub

Cloud backup of your code
Receives the push
Triggers Vercel automatically

Vercel

Detects every GitHub change
Builds + deploys live
Free SSL + .vercel.app domain

The Golden Rule — In Your CLAUDE.md

Locks down auto-deploy

## Deployment Rule
I always develop on localhost.
Only push to GitHub when I explicitly say: "Push to GitHub".
No automatic deployment without my approval.

Set Up GitHub

📌 If you don't have one yet

1.Go to github.com → create a free account

2.Or just tell Claude Code: "Create a GitHub repository and push the project there"

3.Claude handles authentication and pushes for you

Set Up Vercel

📌 Live in under 5 minutes

1.Go to vercel.com → create account using GitHub credentials (important!)

2.Click "Add New Project" → pick your GitHub repo → "Deploy"

3.✓ Website is live at [name].vercel.app

4.Auto-deploy is now active for every future push

Custom Domain (Optional)

In Vercel → Project Settings → Domains → buy a domain inside Vercel or connect an existing one. Porkbun is cheaper than GoDaddy for new domains.

⚠ Critical security rule: Never push API keys, passwords, or secrets to public GitHub repos. This includes Supabase keys, Stripe keys, anything sensitive. They belong in .env files excluded from Git. Remind Claude:

"Make sure no API keys or sensitive data end up in the GitHub repository."

Stack & Fixes

Tech Stack + Common Mistakes

The full tool list for real web apps (not just landing pages), and the exact mistakes that trip people up — plus the fix for each one.

The Tech Stack — For Actual Web Apps

What	Tool	Why
Framework	Next.js + TypeScript	Standard for modern web apps
CSS	Tailwind CSS	Fast, consistent, well-supported
Starter template	v0.dev · Lovable · Replit	Great as a starting point
Deployment	Vercel	Seamless GitHub integration
Auth + database	Supabase	Both in one place, easy to visualize
Payments	Stripe	Industry standard for online payments
Email	Resend	Free tier, easy to integrate
Analytics	PostHog	Open source, privacy-friendly
Domain	Porkbun	Cheaper than GoDaddy
Terminal (optional)	Warp	AI terminal, great for Git beginners

Add this to your CLAUDE.md so Claude uses the right stack

## Tech Stack
Framework: Next.js + TypeScript
CSS: Tailwind CSS
Package manager: npm (not bun)
Database: Supabase

Common Mistakes & Fixes

Website looks like AI

Generic gradients, boring layout. Fix: Install Frontend Design Skill and force it in CLAUDE.md.

Claude changes too much at once

You ask for a hero tweak, it rewrites the page. Fix: Be specific — "Only adjust the hero section."

Screenshot loop runs endlessly

Animation never gets "captured" so Claude keeps trying. Fix: Turn off the screenshot tool for animated elements.

Claude forgets style rules

Brand drift across sessions. Fix: Reference design system / brand assets path in CLAUDE.md.

Local changes deploy themselves

Half-baked work pushed live. Fix: CLAUDE.md rule — "Only push when I say: Push to GitHub."

404 error after Vercel deploy

Main file isn't named index.html. Fix: Ask Claude Code to rename — done in one prompt.

Mobile view looks broken

Desktop-only thinking. Fix: Before deploy → F12 → mobile view → "optimize for mobile."

Claude Design changes the logo

Recolors or rebuilds it on the fly. Fix: Say explicitly — "Do not change the logo. Use exactly the PNG I uploaded."

Claude Design quota used up

Hit weekly limit mid-project. Fix: Export as ZIP → continue in Claude Code (separate quota).

The Full System at a Glance

Complete Overview

Setup & Memory

VS Code + Claude Code extension
Bypass Permissions enabled
CLAUDE.md in project root
Brand assets folder linked

Build Techniques

Frontend Design Skill global
Screenshot loop active
Clone sites via screenshot + CSS
Drop in 21st.dev components

Ship It

Test on localhost first
"Push to GitHub" only when ready
Vercel auto-deploys
Custom domain via Porkbun

Pro Websites withClaude Code

Set Up Claude Code

The CLAUDE.md File

The Frontend Design Skill

The Screenshot Loop

Clone Sites You Love

Individual Components

The 7 Levels of Quality

Claude Design

Deploy to a Real Domain

Tech Stack + Common Mistakes

Pro Websites with
Claude Code