AI Landing Pages: From Project Plan to Published Page

Wondering how to use AI to build landing pages that convert without hiring a developer or designer? Want a step-by-step workflow for creating landing pages with ChatGPT and Codex, from the first project plan to a live, published page?

​In this article, you'll discover how to plan, design, write, host, and connect AI-built landing pages using ChatGPT, Codex, GitHub, and Vercel.

Why Landing Pages Are the Bottleneck for Testing Marketing Ideas

The biggest misconception Dan Sanchez sees among marketers using AI is that productivity means progress. Most marketers now use AI, and many use several AI tools, so output has gone through the roof. But more output doesn't always produce more revenue or move the right projects forward. Dan says it's easy to chase shiny ideas. He can spend a long walk dictating new concepts to ChatGPT, yet none of them touch the work that's actually slowing down growth.

​Every company is in one of three places: growing and struggling to keep up with that growth, plateauing and trying to break through, or declining and trying to reverse the slide. In all three cases, the job is to find the idea that fixes the problem. That might be new packaging, a new offer, a new message, a new front-end and back-end offer combination, or restructured pricing.

​No one knows the answers to those questions in advance. The only option is to test them, and nearly all of that testing now happens digitally on a landing page. A poll on social media can hint at interest, but people really vote by subscribing with their email address or making a small purchase, and both require a landing page.

​Dan found that he could only test new offers as fast as he could set up landing pages. Writing the promotional email with Claude was quick. But even with a background in graphic design, HTML, CSS, drag-and-drop builders, and WordPress, a single landing page and everything that goes with it took him four to eight hours and sometimes two days. With AI, he now builds landing pages faster, and he says the results are better than anything he could design before. That speed shortens the feedback loop on every idea.

#1: Map the Full Landing Page Funnel Before Building With AI

An AI-built landing page is rarely just one page. Before building anything, Dan recommends roughly mapping the entire campaign around it.

​Define the Offer and the Goal: The starting point is what's being tested and what visitors should do on the page. The idea might be a new package, a different price, or a new lead magnet that feeds the sales team or nurtures leads before they see an offer. The plan needs the main problem the page solves and the offer that solves it.

​Choose the Copy Approach: The next decision is which copywriting frameworks will shape the page. Marketers who don't know the common frameworks can ask ChatGPT to recommend them. Some copy can be drafted ahead of time.

​Plan the Form: The form's requirements come next. It could be a multi-stage form, a single form, an email-only field, or a purchase.

​Plan the Thank-You Page: Dan says this is where many marketers leave money on the table. Visitors are at their most excited right after they complete the action, so the thank-you page is the place for another offer, such as an upsell or a downsell, or a survey that captures more information as they enter the email list. If the funnel asks for more, there may be additional pages.

​Plan the Follow-Up: The plan should also cover whether an automated email sequence follows the signup. Even a simple three-part email sequence needs planning, along with what happens when someone doesn't take the next step. A multi-stage funnel may need several email sequences, each triggered by where a person drops off.

​Mapped this way, a landing page becomes a full campaign. Dan points out that assigning a three-page funnel with two automated follow-up sequences to a team used to take a long time. That's the scope AI can now handle.

#2: Write a Landing Page Scope of Work in ChatGPT Before Opening Codex

Before moving into a coding tool such as Codex or Claude Code, Dan brainstorms and plans the entire project on the chat side of ChatGPT or Claude.

​There's a practical reason for this in ChatGPT. It gives users two separate pools of credits: one for Codex and ChatGPT Work, and another for regular chat. Spinning up multiple agents in Codex can burn through the Codex budget quickly, so Dan saves those credits for building and does all brainstorming and planning in chat. He says OpenAI recommends the same approach. He usually works in the ChatGPT web app, though the Mac and Windows apps can toggle to the chat side and do the same thing.

​In the chat, Dan lays out the requirements in a loose brain dump, either from what's in his head or from notes he's already put on paper. For example: this is the offer, and this is the idea to test; the landing page should use this copywriting framework; the thank-you page should include this; one form goes here, and another goes there; a three-part email sequence should follow up on the offer; and if people don't take one action, they should get something else.

​Next, he asks ChatGPT to turn those requirements into a document. ChatGPT can build documents directly in chat, even without Work enabled. He reads it, goes back and forth a few times, and ends up with a scope of work.

​A scope of work, a term from project management, defines what needs to be done, when, and where. Dan compares it to a brief for a freelancer, which is how Codex will be used next. For a landing page project, the scope of work outlines the landing page, thank-you page, forms, and email sequences. It can be a basic outline, but it needs to be ready before building starts.

​Pro Tip: Dan suggests asking ChatGPT what's missing from the scope of work and having it ask clarifying questions. Answering those questions produces a stronger scope of work. Some needs will still surface during the build phase, and those can be added later.

​Model choice in chat doesn't matter much. On the chat side, Dan simply picks a reasoning level. The newest model, Astra (GPT-6), and more granular control over models and reasoning levels are available only in Codex.

#3: Set Up Codex and a Delegate Skill to Build the Landing Page

Dan uses ChatGPT to write the plan and Codex to execute it. Codex lives inside the ChatGPT desktop app. On a Mac, switching the app to code mode opens Codex. Dan doesn't recommend using the ChatGPT Work toggle for this project; Work is useful on mobile and on the go, but because this project involves coding landing pages, he does it all in Codex.

​Codex works in project folders the same way Claude Code does. Unlike ChatGPT project folders, which are web-based, Codex folders are stored locally on the computer (typically in the Documents folder on a Mac). Everything created for the project sits in that folder, and Codex can use the computer to get work done.

​To start, Dan creates a project folder, opens a conversation in that folder, hands Codex the scope-of-work document, and asks it to build the project. Codex can handle planning, copy, and design out of the box. Dan says all the frontier models have been strong at web design for about a year and continue to improve.

How to Get Three Landing Page Design Options First

Dan builds everything locally before pushing it to a host. And before Codex builds the full project, he asks it to start with only the landing page and create three different versions in HTML, showing what the design could look like with the copy in place.

​He always specifies that Codex should handle both design and copywriting in a single pass. The copy influences the design and the design influences the copy, and as a marketer with a design background, Dan always worked on layout and copy together. After Codex delivers the three versions, he picks one and has Codex execute the rest of the project.

How to Build a Delegate Skill to Save Codex Credits

Astra is an expensive model that burns through credits quickly. Even Astra Light is costly, though less expensive than Fable on the Claude side. But not every task in a project plan needs Astra's level of power.

​Dan solved this with a one-time setup. On the research side of ChatGPT in the Mac app, he asked it to research what Astra is good at, what the smaller Terra model is good at, and what Luna, a smaller model still, is good at. Then he asked it to build a Codex skill so that when he says “delegate,” Astra knows what to hand off, what to keep for itself, and how to move the whole project forward.

​ChatGPT delivered the skill as a Markdown (.md) file. Dan downloaded it, uploaded it to Codex, and asked Codex to install it. Because skill files live outside the project folder and Dan didn't want to give Codex access to files beyond that folder, Codex provided him with a command to paste into the Mac Terminal app to install the skill. Now, whenever he types $delegate, Codex follows those instructions and assigns work to Terra and Luna.

​The same skill works for Claude. Dan says the file can be dragged into Claude with a request to convert it to a Claude skill, which only requires changing the file name and a couple of lines in the file.

#4: Direct the Design and Copy for AI-Generated Landing Pages

Simply asking Codex to build a landing page will produce an unattractive one. Better results come from clear direction on both design and copy.

How to Give AI Art Direction for a Landing Page Design

A well-developed brand guide makes the design side straightforward. Without one, Dan's go-to method is to search Pinterest for websites or landing pages and find designs that feel right. He says that's what most designers do. Dribbble is another option, but Dan finds Pinterest faster and more intuitive. He pins favorites to a board, drags the images to his desktop, and uploads them to Codex, with instructions to make the page look like the example.

​Dan pulls inspiration from unrelated industries rather than competitors. Borrowing from a competitor probably won't help as much as it seems.

​When Dan uploads screenshots, he tells Codex what he likes about each one, such as a bold color at the top or a subtle texture in the background. If two designs each have appealing qualities, he describes what works in each. This is the same direction a graphic designer would need. Marketers with the vocabulary to describe typography and white space should include those details. Those without it can describe what they like in plain language or ask Codex to interview them the way a graphic designer would interview a client.

​Codex displays the HTML page in a built-in browser in a panel on the right side of the app, with the chat on the left. Unlike Claude Design, which lets users click, drag, and adjust elements and fonts directly, Codex works more like Replit or Lovable. After each prompt, Codex updates the page, and it must be reloaded to show the changes.

How to Structure Landing Page Copy With AIDA, PAS, and the 4 Cs

Dan has Codex write the copy and the design together, guided by the project plan. He also gives it a copywriting structure to start from. His go-to stack for a standard landing page uses three frameworks in one output: the AIDA framework above the fold, the PAS framework directly underneath, and the 4 Cs framework below that.

​Marketers don't need to master these frameworks to use them. A quick search for AIDA, PAS, and the 4 Cs explains each one, and telling ChatGPT or Codex to follow that structure is enough for it to apply them.

#5: Host and Publish an AI-Built Landing Page With ChatGPT Sites or GitHub and Vercel

Before going live, the project lives locally. Both Codex and Claude Code include a preview that opens the site in a browser, so the page can be reviewed and refined as feedback comes in. Codex also writes the email sequence and saves each email as a Markdown file in the folder for review and updates.

​When everything is ready, there are two main publishing paths.

How to Publish a Landing Page With ChatGPT Sites

The easy option is ChatGPT Sites, which is included in the ChatGPT Plus plan ($20 per month) and supports a custom domain. Dan regularly helps friends move basic websites off Square by having Codex copy the existing site, rebuild it in HTML, and upload it to ChatGPT Sites.

​ChatGPT Sites hosts static HTML, so it can't run forms or other dynamic features on its own. The workaround is an embedded form from an email platform such as Mailchimp that can redirect to another page. Given the form code, Codex places the form on the page and sets the thank-you page as the redirect. For solopreneurs and freelancers on a budget, this option covers a lot.

How to Publish a Landing Page With GitHub and Vercel

For more flexibility, Dan uses GitHub, a code repository that works like a Google Drive folder for code, combined with Vercel, which hosts and deploys the site. After decades on WordPress, Dan moved everything to Vercel. He rebuilt his personal website in JavaScript without a computer science background, and Vercel handles JavaScript apps as well as simple static sites.

​Vercel's free plan is generous and covers simple static websites, and the paid plan is $20 per month. The setup follows a short sequence:

1. Codex pushes the site to GitHub.
   
   
2. A new project is created in Vercel.
   
   
3. When Vercel asks whether to connect GitHub, select yes, then select the GitHub project.
   
   
4. The domain name is mapped to the Vercel project.

ChatGPT can walk through any additional steps. Dan recommends GitHub rather than uploading files directly to Vercel because GitHub provides version control. If an update accidentally deletes something or a new feature breaks the site, GitHub makes it possible to roll back to an earlier version.

​Vercel is a web host, not a database. Landing pages may or may not need a database, so Dan suggests asking ChatGPT whether the scope of work requires one. If it does, Neon and Supabase are two popular options with freemium plans. Each has pros and cons, so Dan recommends having ChatGPT run a side-by-side analysis.

#6: Connect Landing Page Forms, Payments, and Email Sequences

Once the hosting is in place, the forms and payments need to connect to the tools that already run the business.

Embed an Existing Form: For lead capture, the easy approach is to build the form in Mailchimp or another email marketing platform and embed it on the page.

​Send Payments to a Secure Checkout: When the page accepts payments, buyers should use a payment method with a secure checkout. For simple products, Dan says Codex can integrate the page with a Stripe account and create a secure checkout experience. Businesses with a complex ecosystem of products, payments, and customers will likely need a different approach.

​Connect Through the API: The method Dan now uses all the time takes more setup ,upfront, but is easier afterward: it gives the site access to the email platform's API. In Mailchimp, an API token is available by request in the settings. That token goes into Environment Variables, a simple form in the Vercel project's backend. This stores the token securely, allowing the website to use it without risking it being leaked online and exposing the Mailchimp account.

​With the token in place, Codex can build the forms, integrate each form with Mailchimp, and line up the form values with the existing fields. When Dan wants a new field, he asks Codex to add it to the form and to Mailchimp. It builds the form field and creates the matching custom field in the Mailchimp database, and every submission flows directly into Mailchimp without a Mailchimp form.

Why Use an API Instead of MCP for Landing Page Forms

Dan recommends the API over an MCP connection for this job. MCP is useful when working in Codex or Claude Code and pulling data into an AI session. But once Codex finishes building the landing page, it's no longer interacting with the MCP. The deployed page must run on its own without Codex, and sending data directly to an email provider from live code is API work.

​Pro Tip: When a setup step gets confusing, let ChatGPT take over the browser. Dan has done this several times when he couldn't find a setting in Vercel. Because he's already logged in, ChatGPT opens the browser, clicks through, finds the setting, corrects course when it misunderstands, and completes the task.

How to Load Email Sequences With Browser Control

Dan has Codex build the pages first. Codex also writes the email copy, but loading those emails into an email platform is a separate step. Dan uses a drag-and-drop email builder, and there's no way to load emails into it through the API. An MCP connection can help if the email tool supports that feature, but Dan’s doesn't.

​The alternative is browser control, and this is where Astra stands out. It's now reliable and fast enough to take over the browser, build every email in the drag-and-drop sequence, and set the delay timers. Dan says he can give the instruction and work on something else for 20 minutes while it builds nine emails.

​Once the hosting and integrations are set up, they can be reused for every future landing page. Dan no longer logs in to Vercel. He works only in Codex, asking it to change a page he no longer likes, showing it a screenshot of something he saw elsewhere, reviewing the result, and telling it to push the page live. He also asks for full website audits and pastes in articles about conversion to ask whether the advice would increase the landing page's conversion rate, then has Codex make the recommended changes.

​Dan acknowledges there's a learning curve, but he says this workflow is easier than building automations in Make.com or n8n, and easier than building a first automated sequence in Drip. For marketers who already send emails or use drag-and-drop builders in WordPress, it's within reach.

#7: Split Test and Review AI Landing Pages Before Going Live

Because Vercel is built to host full JavaScript web apps, a landing page project can grow well beyond a single page.

How to Split Test AI-Built Landing Page Variations

Creating short and long versions of a landing page for a split test is simple. Multiple pages alone can serve as variations. Adding a database opens up much more. Dan says Codex can write a small JavaScript split test at 50/50, 20/80, or any other ratio. It can also build a login area to check the split test stats, calculate which version is winning, declare a winner at the push of a button, and set up the next test.

​That kind of reporting dashboard requires a database because the data has to be stored somewhere. For tracking, Dan has Microsoft Clarity and Google Analytics coded into his pages.

How to Review Landing Page Code and Test the Funnel

Human review stays in the loop. Dan checks and reads every page before pushing it live. When the code becomes more sophisticated, such as a custom split tester, he also runs a code review.

​He uses a code review skill he got from a friend, but it's possible to build one the same way as the delegate skill. ChatGPT can research best practices for a code review skill that looks for security vulnerabilities, redundant code, and messy code, as well as issues a marketer might not think to check, and then build the skill. It installs the same way. Dan asks Codex to run the code review and delegate parts of it so that Luna handles the easy tasks, rather than Astra doing all the work.

​He runs a code review before pushing any change that goes beyond simple or aesthetic updates, and always for database work or more substantial features.

​Before launch, the entire funnel needs a manual test: filling out the form, confirming the thank-you page loads, and receiving the first couple of emails. The final check confirms the right emails are in the right place and that the copy says what it should. This step was necessary when funnels were built by hand, and it's still necessary now.

Other Notes From This Episode

• Connect with Michael Stelzner @Stelzner on Facebook and @Mike_Stelzner on X.
• Watch this interview and other exclusive content from Social Media Examiner on YouTube.

Where to subscribe: Apple Podcasts | Spotify | YouTube Music | YouTube | Amazon Music | RSS

✋🏽 If you enjoyed this episode of the AI Explored podcast, please head over to Apple Podcasts, leave a rating, write a review, and subscribe.

---

Stay Up-to-Date: Get New Marketing Articles Delivered to You!

Don't miss out on upcoming social media marketing insights and strategies! Sign up to receive notifications when we publish new articles on Social Media Examiner. Our expertly crafted content will help you stay ahead of the curve and drive results for your business. Click the link below to sign up now and receive our annual report!