How to Build an Opt-In Landing Page with an Email Sequence in Under 30 Minutes with Codex and Claude Code

I don't know how many times a client has come to me needing a landing page in the next half an hour, because they've just decided to launch an ebook or a lead magnet and they have no clue how to do it.

And honestly, even now I get frustrated when clients come to me and need one, because I just hate using any page builder. AI can build it ten times faster, ten times better, and it will look amazing.

So here's exactly how to build an epic opt-in landing page with an email sequence in less than thirty minutes. But you do need to have a few things set up first.

Full disclosure on how I run it. I build the design in Codex, with GPT-6 Astra, because ChatGPT is better at design than Claude Code right now. Then I get it to give me the code in a zip file, put the zip into Claude Code, and Claude Code publishes it. The only reason I do that is that Claude Code is authenticated to all of my stuff. I run my entire organisation from Claude Code. It has all my skills, and it's where my Vibe Coder sits. So I always do the first run of the design in Codex, and everything after that happens in Claude Code.

You don't have to do it my way. Every step below works in Claude Code on its own, or with Codex for the design. I'll show you both where they're different.

What you're building

• One landing page on your own domain, in your brand. A headline, who it's for, what's inside the lead magnet, a short bit about you, and a sign-up form.
• A form that goes somewhere. Everyone who signs up lands in a list in Brevo, the email tool, with their first name.
• An email sequence. The first email sends the lead magnet straight away. The next ones follow up over the next few days.
• A thank-you message on the page, so they know it worked.

If what you need is a whole website rather than one page, that's the website post.

What you need to have set up already

This post starts from the point where your accounts are ready. If any of these isn't done yet, do it first, and the build itself will fit in the half an hour.

• Claude on a paid plan, with Claude Code set up in the Claude desktop app. This is where the page gets finished, connected to Brevo and published.
• Codex, if you want to design the way I do. Codex comes with ChatGPT Plus and the plans above it. As of October 2026, Plus gets GPT-6 Astra in Codex, but not in the normal ChatGPT chat. If you'd rather keep everything in one place, skip Codex and do the design in Claude Code.
• A Vercel account, already connected to Claude Code. Vercel is where the page lives on the internet. The free plan is fine.
• A domain, already bought and set up with your Vercel account.
• A Brevo account, already connected to Claude Code. Brevo is where the people who sign up land, and it's what sends the emails.
• Your brand profile. Palette, fonts, the feeling. If you haven't got one, here's how to build it. Don't build without it.
• The lead magnet itself, finished, as a PDF.

You don't need a database for this. Brevo is the record of who signed up.

Step 1 - Install the Vibe Coder

The Vibe Coder is the skill I use for every build. It's a developer you hand a job to. It builds the thing, runs it, checks it in a browser, runs the pre-launch checks and writes you a report. It never puts anything live on its own. Going live is a separate step, with you, at the end of this post.

It's the Claude side of this build, so you install it in Claude Code.

1. Download the kit: Vibe-Coder-by-Incuv8or.zip.
2. Double-click the zip to unzip it.
3. Open the Claude desktop app and click the Code tab.
4. Start a new chat.
5. Drag the unzipped Vibe-Coder-by-Incuv8or folder into the chat.
6. Fill in the blanks and paste this.

I've downloaded the Vibe Coder kit (attached). Read README FOR
CLAUDE.md first & set it up with me, one step at a time. It's a
skill, not a scheduled task. Here's how I want mine:
- My name: [NAME]
- What I'll mostly build: [e.g. landing pages & websites for clients,
  client portals, tools for my own business]
- Where my brand profile is: [PATH, or "I don't have one"]
- Where I want my builds saved: [e.g. ~/Documents/Builds, or "you
  choose"]
- My default stack: [or "you choose"]
- Hand builds over as tasks in my task manager: [no / yes - ClickUp,
  Notion, Asana or Trello]

Claude checks what you've got, installs anything missing (it will help you with Node.js, a small free programme the code needs to run), and reads your setup back to you. When it says "Your Vibe Coder is installed", you're ready.

Step 2 - Set up your folder

Everything for this page lives in one folder, so whichever tool you're in always knows where to look.

1. Inside your builds folder, create a folder and call it the name of your lead magnet.
2. Put your brand profile PDF in it.
3. Put the lead magnet PDF in it.
4. Add a short document of notes: who the lead magnet is for, the problem it solves, the three or four things they'll get, and one sentence on how the page should feel.

Step 3 - Get three designs

If you're designing in Codex (my way): open the Codex app, start a new chat (connected to your AI brain) and choose GPT-6 Astra in the model picker if your plan offers it.

If you're staying in Claude Code: start a new chat in the Code tab, click the + and choose AI brain, and type /vibe-coder at the start of the prompt below.

Then paste this, filled in.

I need an opt-in landing page for my lead magnet, [NAME OF LEAD MAGNET] - located in [name of folder in AI Brain]
Everything you need is in this folder: my brand profile, my notes & the
lead magnet PDF.

Who it's for & the problem it solves: [one paragraph]
What they get: [the three or four things inside it]
How it should feel: [your one sentence]

The brand: follow my brand profile. If something in my notes
contradicts it, tell me rather than choosing one.

The page: a headline, a line on who it's for, what's inside, a short
bit about me, & a sign-up form with first name & email. One page, no
navigation, designed for phones first.

Give me three genuinely different variations, not three shades of the
same idea. Tell me in one line what each one is doing differently, then
tell me which one you'd pick & why. Give me a link to look at each one.

Ask for three, and insist they're different. With one, you'll accept it because you've got nothing to compare it to. With three, you'll know which one's right almost straight away.

Step 4 - Pick one and finalise it

Pick the one you want. Then go back and forth on that one until it's right, one thing at a time. "The headline's too long, one line." "Move the form up so it's on the first screen on a phone." "Less pink."

If you're in Codex, finish with this, so you can move it over.

This is the one. Give me the finished code for this design in a zip
file in this folder, & delete the other two variations from it.

Codex saves the zip in your lead magnet folder.

If you're in Claude Code, skip this and go straight to Step 5. The design is already in your folder.

Step 5 - Build it in Claude Code

1. Open the Claude desktop app and click the Code tab.
2. Start a new chat (only if you built this in codex, otherwise use the same chat!)
3. Click the + at the bottom of the chat and choose your lead magnet folder.
4. Paste this.

/vibe-coder I'm building an opt-in landing page for my lead magnet. The
approved design is in this folder [as a zip from Codex - unzip it & use
it exactly as it is / from my last chat]. My notes, my brand profile &
the lead magnet PDF are in here too.

Finish the page so it matches the design exactly, phones first, & set it
up so it deploys to Vercel without any fuss. Build the form so it shows
a thank-you message when someone signs up, with a hidden anti-spam field
but no CAPTCHA. We'll connect it to Brevo next.

Put the lead magnet PDF on the site so it has its own link.

Never put a key or password in the code, & never ask me to paste one
into this chat. When you need one, open the file it goes in & I'll paste
it there myself.

When it's running, give me the link to open in my browser.

The Vibe Coder builds it, checks it in a browser and gives you a link that looks like http://localhost:3000. Open it on your laptop and on your phone. That's your page, running on your own computer. Only you can see it. Think of it as your workshop. Vercel is the shop window, and it comes last.

Say what's wrong, one thing at a time, until it matches the design.

Step 6 - Write the email sequence

Stay in the same chat.

Now write the email sequence for anyone who signs up.

Read my brand profile, my notes & the lead magnet itself, so the emails
sound like me & talk about what's actually inside it.

Email 1 goes straight away: a thank you, the link to the lead magnet on
the site, & one line on where to start. Then [two] more over the next
[week]. Each one gives them one useful thing from the lead magnet & ends
with one next step, which is [your offer / your call link].

Write them in plain English, short, like I'm emailing one person. Give me
a subject line for each. Show me all of them before we do anything with
them, & save them in this folder once I've said yes.

Read them out loud. Change anything you wouldn't say. The first email is the first thing your business ever says to this person, so make it sound like you.

Step 7 - Put the sequence into Brevo and connect the form

Right now the form looks right and does nothing. This step puts the emails into Brevo and makes the form add each person to your list, which starts the sequence.

Now I want the sequence in Brevo. Create a list for this lead magnet,
load each email in as a template in my brand, & set them up to send in
order to anyone who's added to the list.

Then connect the form, so anyone who signs up is added to that list with
their first name. Do it through a small server step, not in the
visitor's browser, so the Brevo key never reaches anyone. If you need my
Brevo API key, open the file it goes in & I'll paste it there myself.

If there's anything you can't do from here & I have to switch on in
Brevo myself, tell me exactly where to click.

An API key is a password for your Brevo account. It goes in one private file on your computer (never in the chat). Claude will tell you where to find it in Brevo if it needs it.

Test it. On localhost, sign up with an email you can check.

• In Brevo, under Contacts, you're on the list with your first name.
• Email 1 is in your inbox, and the link to the lead magnet opens the PDF.
• The page showed the thank-you message, not a blank screen.

Then submit the form again straight away with nothing in it. Nothing should land. That's the anti-spam working. If something didn't happen, tell Claude exactly which one.

Step 8 - Put it live on your domain

This is the step the Vibe Coder never does on its own. You do it with Claude, in the same chat.

Everything works on my computer. Deploy it to Vercel & connect it to
[YOUR DOMAIN]. Add the Brevo key to Vercel's environment variables
without showing it in this chat. Walk me through anything I need to
click, one step at a time.

Claude tells you when to do each of these.

1. In Vercel, open the project, click Settings, then Environment Variables, and check the Brevo key is there. This is the only other place that key is allowed to live.
2. Click Settings, then Domains, and check your domain is added. Vercel shows you any records you still need to add.
3. Wait until the domain turns green in Vercel.
4. Open the live page on your phone and sign up one more time. Same checks as Step 7, but on the internet this time.

That's your opt-in page, live, with the email sequence behind it.

The catch, and the fix

The catch is the emails, not the page.

The first time you send from your own domain, Brevo wants you to prove the domain is yours. If you skip it, your sequence can land in spam or not send from your address at all, and your beautiful page is collecting emails for a lead magnet nobody receives.

Walk me through authenticating my domain in Brevo so my emails don't
land in spam. Tell me which records to add & where.

Do it once and every page you build on that domain after this is covered. If the domain side is new to you, the go-live step in the website post walks through where DNS records go.

What this looks like as a business

A lead-magnet landing page is a package I sell. The client isn't paying me for how long I sit there. They're paying for a page that looks like their brand, a form that actually goes somewhere and emails that land, on the day they decided to launch.

Start with your own

Build one for your own lead magnet before you build one for a client. You'll hit every snag with nobody waiting, and you'll finish with a page that's collecting emails for you.

If you haven't built your brand profile yet, that's the foundation for this: start here.