Coding Camp is open for the season
wright mode
AI TOOLS·20 MAY 2026

How to build a sales page with Claude Code (the build that made me $20k+)

Claude Code built a complete sales page for my masterclass in under 10 minutes. Stripe payments wired in, deployed live. Over $20,000 in revenue later, here's the exact build.

8 min read

How to build a sales page with Claude Code (the build that made me $20k+)

Claude Code just built me a sales page for my masterclass that made over $20,000 in revenue. The build itself took under 10 minutes.

Zero coding experience. I described what I wanted in plain English. Claude Code's front-end design skill handled the layout, the copy, the styling. I wired in Stripe for payments, deployed to Vercel, sent the link to my list. Done.

Here's the exact build, step by step, written for non-technical founders. You'll need an evening — you don't need a developer.

Watch: the full Claude Code sales page build (21 minutes)

What you'll need

Three tools. None of them require coding to use.

  • Claude Code — Anthropic's coding interface (comes with Claude Pro)
  • Cursor or VS Code — a friendlier interface to run Claude Code in (free)
  • A Stripe account — for taking payments (free to sign up, fees per transaction)
  • A Vercel account — to host the live page (free for personal use)

That's the stack. The most expensive piece is your Claude subscription at $20/month.

(If you're brand new to Claude Code, start with Claude Code for non-technical users first. This post assumes you've got Claude Code running inside Cursor.)

Step 1 — Open Claude Code inside Cursor

Open Cursor, hit Open Project, create a new folder called something like claude-code-workshop.

Once the project is open, look for Claude Code in your sidebar. If it's not there yet, search the extensions for "Claude Code" (Anthropic's verified one, around 5M downloads — you can't miss it). Install, restart Cursor, log in with your Claude subscription.

Claude Code installed in Cursor — your project folder on the left, Claude chat on the right, terminal at the bottom

You can also open Claude Code via the command palette: hit search → "show and run commands" → pick Claude Code: Open in new chat.

Step 2 — Download the front-end design skill

This is the bit that makes the build genuinely good rather than ugly. Anthropic publishes a front-end-design skill on GitHub — a markdown file that teaches Claude Code how to design things that actually look professional.

Google "Claude Code front-end design" and you'll find Anthropic's GitHub. Grab the raw markdown file URL.

Back in Cursor, just paste that URL into Claude Code:

"Hey Claude, can you download this front-end design skill?"

Claude Code installs the skill into the project. From now on, anything it builds in this project automatically applies the design principles in that skill — proper spacing, hierarchy, type scale, the works.

Step 3 — Plan the build (this is the most important step)

Switch Claude Code to plan mode. Bottom of the chat window, there's a toggle: "ask before edits / edit automatically / plan mode". Pick plan mode.

Plan mode means Claude reads, thinks, asks questions, but doesn't write code yet. It's the difference between "build me a sales page" and "build me the sales page I actually need."

Give it the brief. The exact prompt I used:

"I'm building a sales page for my Claude Code masterclass. I want to base it on my existing Claude masterclass sales page — go and have a look in my folders for the background and context. Use your front-end-design skill. I'll also be setting up the Stripe MCP for the payment process. Can we think through this plan together? Ask me any questions you need until you're 95% sure you can do this job well."

That last line is the unlock. "Ask me questions until you're 95% sure you can do this well" stops Claude from going off and building the wrong thing. It'll come back with 4-6 clarifying questions — exactly the questions a good designer would ask before starting.

Answer those. The plan firms up. When the plan looks right, exit plan mode and let Claude build.

Step 4 — Wire up Stripe (the part everyone gets stuck on)

Taking payments is the bit that scares non-technical founders. With Stripe's MCP integration, it stops being scary.

Stripe MCP is a way for Claude to talk to your Stripe account directly. You give it permission once, it can create products, prices, and checkout sessions on your behalf.

Inside Claude Code:

"Set up the Stripe MCP. Create a product called 'Claude Code Masterclass' priced at $XXX. Wire the checkout into the sales page."

Claude Code wiring up the Stripe MCP — creating the product, the price, the checkout session, all from one prompt

Stripe asks you to authenticate once. From then on, Claude can do everything inside Stripe from prompts. It's the moment "I have no coding experience" stops being a constraint.

Step 5 — Deploy to Vercel

The page only matters if it's live on the internet. Vercel handles this.

"Deploy this to Vercel."

Claude Code asks you to log into Vercel, gives you a vercel.app URL within 60 seconds. The page is live. You can buy your own masterclass right now. Stripe will charge you.

If you have a domain — say masterclass.yourdomain.com — connect it in the Vercel dashboard. Two minutes.

Step 6 — Test the full flow + ship

The last 10 minutes are the most important:

  1. Open the live URL in an incognito window
  2. Click the buy button
  3. Pay with a real card (you can refund yourself)
  4. Confirm the receipt arrives
  5. Confirm whatever happens next (welcome email, calendar invite, Slack notification) actually fires

If anything looks off — formatting weird, button colour wrong, the heading too small, the checkout flow confusing — go back to Claude Code, describe what's wrong:

"The checkout button is too small and the call to action under it is unclear. Fix it."

It edits, redeploys, you re-test. Each iteration takes minutes.

What this actually changed for my business

Before Claude Code, building a new sales page meant: brief a designer, brief a developer, wait two weeks, $4-6k, hope it converts.

Now it's: describe the page, build it in the afternoon, ship it the same day. The first masterclass I sold this way did $20k+ in revenue. The page cost me my Claude subscription + a coffee.

The bigger shift: launches stop being expensive bets. If a page doesn't convert, you don't have to defend the $5k you spent — you just ship a different page tomorrow. The cost of trying something dropped to near zero, which means the number of things you can try just went up by 10x.

(For the wider context on what else Claude Code unlocks for non-developers, see Claude Code for non-technical users — that's the foundation post that covers IDE setup, plan mode, and basic project structure.)

FAQ

Can I really build a sales page with no coding experience?

Yes — provided you're willing to describe what you want clearly and give feedback when something's off. The actual code is written by Claude Code. You're directing it, not writing it. Skills you DO need: knowing what you want the page to say, being able to give specific feedback ("button too small, heading should be bolder"), and reading the live page critically.

Is Claude Code free?

Claude Code comes with the Claude Pro plan ($20/month). You can technically use it on the free tier with rate limits, but for any real project you'll hit those limits in an hour. Pro is the practical minimum.

Do I need to know what Stripe MCP, Vercel, and Cursor are before I start?

No, but knowing what each does makes the build smoother. Cursor is your editor (where Claude Code lives). Stripe is your payment processor. Vercel is where your live page is hosted. MCP (Model Context Protocol) is the way Claude talks directly to Stripe so you don't have to copy-paste API keys around. You'll learn enough about each one during the build to know what to do next time.

How long does it actually take to ship a sales page this way?

The build itself: 10-15 minutes once your tools are connected. First time end-to-end (installing Cursor, downloading the front-end skill, setting up Stripe MCP, deploying to Vercel): plan on 2-3 hours. Subsequent builds: 30-60 minutes.

What if I want a real designer to refine it later?

Claude Code's output is a real codebase (HTML/CSS/JS or React). A designer or developer can pick it up and refine it the same way they'd refine any handover. The "AI built it" doesn't mean it's locked into anything. Useful path: ship the Claude-Code version, see if it converts, hand to a designer for v2 only if it earns its way to that level of investment.


If you want to actually build a sales page like this with help — the design, the Stripe wiring, the deploy — that's what we do inside Wright Mode. Fortnightly Build-with-Brooke sessions where we ship Claude Code projects together. If you'd rather have a sales page built FOR you in 90 minutes, book a Wright STACK Consult.

keep going

Liked this? Wright Mode is where I publish the actual builds.

The membership is the working studio behind the blog — fortnightly Q&As, the full automation library, and the AI tools I build live.