Ship a Landing Page in 2 Hours with Claude Code

Every weekend you spend debating frameworks is a weekend you didn't validate your idea. I've watched founders burn two months picking between Astro, Remix, and SvelteKit before writing a single line of copy. Meanwhile, someone else shipped a landing page on Saturday, collected 200 emails by Monday, and started building the actual product with real signal.

I've taught over 100 people to build with Claude Code, and the landing page exercise is the one that consistently blows people's minds. You go from a blank terminal to a deployed page with email capture, analytics, and proper OG tags in about two hours. Here's the exact workflow.

The Stack (Don't Overthink This)

Next.js, Tailwind CSS, and Vercel. That's it. Next.js gives you server-side rendering and API routes in one package. Tailwind means you're never fighting CSS files. Vercel deploys from a git push.

If someone tells you to evaluate 12 hosting providers and 6 CSS frameworks before building a landing page, ignore them. This stack works for solo founders, for YC companies, and for Fortune 500 marketing teams. Pick it and move.

Your First Prompt

Open your terminal, create a project folder, and start Claude Code:

mkdir my-landing-page && cd my-landing-page
claude

If you haven't installed Claude Code yet, follow the setup guide first. Takes about 5 minutes.

Now paste this prompt. Swap in your own product details:

Create a Next.js landing page for a SaaS product called "PulseMetrics"
that helps startup founders track their key metrics in one dashboard.

The page should include:
1. A hero section with a headline, subheadline, and email capture form
2. A "How it works" section with 3 steps
3. A features section with 4 feature cards
4. A testimonial/social proof section
5. A final CTA section with another email capture form
6. A footer with links

Use Tailwind CSS for styling. Make it modern, clean, with a dark
color scheme. The primary accent color should be indigo.

For the email capture, create a Next.js API route at /api/subscribe
that accepts a POST request with an email field and saves it to a
local JSON file for now. We'll hook up a real email service later.

Set up the project with TypeScript and the App Router.

That prompt covers layout, content structure, styling direction, and a working backend for email capture. Claude Code will scaffold the entire Next.js project, install dependencies, and build every component. The whole generation takes about 3-4 minutes.

Iterating on the Design

The first pass will be functional but generic. That's expected. Now you steer it. Run the dev server and look at what you've got:

Start the dev server so I can see the page.

Claude Code will run npm run dev and give you a localhost URL. Open it in your browser. Then start giving targeted feedback:

The hero headline is too generic. Change it to:
"Stop Guessing. Start Knowing."
Subheadline: "One dashboard for the 5 metrics that actually
predict whether your startup will survive."

Also, the feature cards feel cramped. Add more padding and
make them 2x2 grid on desktop, single column on mobile.

Each iteration takes 30-60 seconds. Keep going until the page feels like yours. My students usually need 4-6 rounds before they're happy. That's 10-15 minutes of total iteration time.

A few prompts that consistently produce good results:

• "Make the hero section taller with more breathing room." Generic pages always cram the hero.
• "Add subtle animations. Fade in each section as I scroll down." Claude Code will bolt on Framer Motion or CSS animations.
• "The CTA buttons need more contrast. Make them pop against the background."
• "Add a gradient mesh background to the hero section." Instant visual upgrade.

Bolting On Email Capture (For Real)

The local JSON file approach works for testing, but you want real email collection. Resend is the simplest option. You get 3,000 emails/month free, and the API takes 5 minutes to set up.

Replace the local JSON email storage with Resend.

Here's my Resend API key: re_xxxxx (I'll add this as an env var)

When someone submits their email:
1. Add them to my Resend audience called "Waitlist"
2. Send them a confirmation email from hello@pulsemetrics.com
   with subject "You're on the list" and a short thank-you message
3. Show a success state on the form

Create a .env.local file for the API key and add .env.local
to .gitignore.

Claude Code will install the Resend SDK, rewrite the API route, handle error states, and update the form component with loading and success states. If you don't want Resend, the same pattern works with Mailchimp, ConvertKit, or even a simple Supabase table.

Adding Analytics

You need to know if anyone's actually visiting this page. Vercel Analytics is one line of code:

Add Vercel Analytics and Vercel Speed Insights to the project.
Also add proper OpenGraph meta tags and a Twitter card so the
page looks good when shared on social media.

OG title: "PulseMetrics - The Startup Metrics Dashboard"
OG description: "Track the 5 metrics that predict startup survival.
One dashboard. Zero guesswork."
OG image: generate a simple OG image using the @vercel/og package
with the product name and tagline on a dark indigo background.

This single prompt handles analytics, social sharing, and dynamic OG image generation. Three things that most founders either skip or spend a full day configuring manually.

Deploying to Vercel

Push your code to GitHub and connect the repo to Vercel. If you haven't done this before, tell Claude Code:

Initialize a git repo, create a .gitignore for Next.js,
and help me push this to a new GitHub repository.

Claude Code will run the git commands, and if you have the GitHub CLI installed, it'll create the repo for you. Then go to https://vercel.com/new, import the repo, and click Deploy. Vercel auto-detects Next.js and handles everything.

Add your RESEND_API_KEY as an environment variable in the Vercel dashboard. Your page is live. Custom domain takes another 2 minutes in Vercel's settings.

What the Finished Page Looks Like

After two hours, you've got:

• A responsive landing page with hero, features, social proof, and two CTAs
• Working email capture that stores subscribers and sends confirmation emails
• Analytics tracking every visitor
• Proper OG tags so the page looks professional when shared on LinkedIn or Twitter
• Deployed to a production URL with HTTPS
• Code in a GitHub repo you can keep iterating on

That's a launchable validation page. Share it in communities, run some ads against it, post it on Twitter. If people sign up, you've got signal. If they don't, you saved yourself months of building something nobody wanted.

The Prompting Pattern That Makes This Work

Notice the pattern across every prompt above. You describe what the component should do, how it should look, and where the data goes. You never write code. You never debug CSS. You steer and Claude Code builds.

This is the same prompting discipline I teach in the best practices guide. Specific inputs produce specific outputs. Vague prompts produce vague pages. Tell Claude Code exactly what headline you want, exactly what color scheme, exactly where the email should go. Precision in your instructions translates directly to quality in the output.

Common Pitfalls

Trying to make it perfect before launching. Ship at 80%. You can iterate after you have real visitors. Perfection is the enemy of validation.

Skipping mobile. Tell Claude Code to make it responsive from the start. Over half your traffic will be mobile. If you forget, just say "make every section fully responsive with mobile-first design" and Claude Code will restructure the layouts.

No analytics. A landing page without analytics is just a billboard in the desert. You won't know if your idea has traction or if your traffic source is broken. Bolt on Vercel Analytics before you deploy.

Stop Debating, Start Shipping

The gap between "I have an idea" and "people can see my idea" should be measured in hours, not weeks. Claude Code collapses that gap. Two hours from blank terminal to deployed page.

If you want hands-on training where I walk you through building and deploying real projects like this, ClaudeFluent is our premium program. You'll ship your first project in the first session. Check out the how to use Claude Code guide if you want to get started on your own right now.