How to build a landing page from an AI prompt
Turn one prompt into a real page that opens in your browser. No accounts, no data, no plumbing. The moment the whole thing stops being abstract.
This is the lesson where it stops being theory. You are going to describe a page in plain English. Then you watch the agent build a real one, open it in your browser, and hand you the files. No account to connect, no data to wire up, nothing to configure. Just you, the agent, and a blank folder.
I am starting here on purpose. Not because building pages is the most useful thing an agent does for marketing. Because it is the fastest way to feel the difference between this and a chat window. A chat can only describe a page to you. Here, one runs in your browser.
A real landing page from one prompt
Here is a back-to-school promotion an agent built for Rock, a team chat and project tool. The interesting part is that nobody handed it the positioning, the audience, or the offer. It read Rock’s site and three competitors and worked all of that out itself.
Here is the whole prompt. Notice the blanks it was told to fill:
Build a back-to-school promotion landing page for Rock (rock.so), a team chat and project management tool. Study Rock and three leaders, asana.com, clickup.com, and monday.com. Then fill in the strategy yourself: the positioning, the core audience, and the promotional offer. Design the page around what you find. Keep it clean and modern, with one clear offer and a single call to action.
Before it wrote a line of the page, it read the sites and checked in. Here is the message it sent back, waiting for your go-ahead:
I read rock.so and the three leaders, and here is the strategy I would build on.
Positioning: Rock’s all-in-one, flat-rate answer to per-seat enterprise tools, chat and tasks in one place instead of five.
Audience: small teams and agencies getting the year organized after summer, tired of app-switching and per-seat bills.
Offer: three months of Pro, free, through September, no card, flat rate for the whole team.
Want me to build the page on this, or change something first?
The agent paused because you can run it one step at a time, approving each move, or let it work start to finish. Which of those you want is a setting, and a later lesson covers it.
Either way, those are the calls a marketer makes, and it made them from public information before it designed the page. That is the difference between an agent and a chat that waits for you to hand it everything.
Your turn: point the agent at your product
Open a fresh folder like you did in setup. Here is the same prompt with your blanks left open. Copy it, fill the brackets, and let it run.
Build a landing page for [your product] ([your domain]), a [what it is in one phrase]. Study our site and three competitors, [competitor 1], [competitor 2], and [competitor 3]. Then fill in the strategy yourself: the positioning, the core audience, and the promotional offer. Design the page around what you find. Keep it clean and modern, with one clear offer and a single call to action.
If your tool asks to use the web or a browser for the research step, approve it; that is what lets it read the sites. Then let the agent work. It reads, decides, writes the files, and usually offers to open the page for you.
Watch the page render in your browser
This is the part that lands. A moment ago you had a sentence. Now there is a styled page in your browser, running from your own machine, that you can scroll and click.
The page will not be perfect, and that is fine. You are not done, only getting started. The conversation goes on in plain English.
Make the headline sharper. Move the call to action higher. Try a darker palette. Add a section answering the three objections buyers always raise. Each instruction, the agent edits the page, you refresh.
This is closer to art directing than to coding. You bring the judgment about what good looks like, and it handles the how.
Why build in a folder instead of a chat preview?
You can get a chat tool to show you a page too, so let me be honest about the bigger difference. It is everything after the first render.
What you have is a real project on your machine. The files are yours. You can open them, keep them, hand them to a developer, or drop them into your real site. You can even put them online at your own address, with your own analytics on them.
A page inside a chat is a preview you are looking at through glass. This one you own, and you can take it anywhere.
The project also has no ceiling. A chat preview runs in a locked box with limits on what it can hold. Your version grows into as many pages, sections, and moving parts as the job needs, because it is a real project and not a demo. The first page is just the small version of that.
Why the first draft sounds generic
Look closely and the weak spots are obvious. The agent offered three months of Pro, and Rock has no plan called Pro. It reached for the name a SaaS plan most often goes by and hoped. The design is generic in the same way, a template that would fit any company. It has never seen how Rock presents itself.
None of that is the agent failing. It is working from what anyone can pull off the public web. The agent has never read your positioning, your rules, or how you describe your own product.
The folder it is building in holds nothing of yours yet: no logos, no product screenshots, no brand fonts, no guidelines. Give it none of your material and it fills the blanks with reasonable guesses. That is how a plan that does not exist ends up on the page.
That gap is the rest of this course. The next lesson gives the agent a context file: a single document with your positioning and your rules. The agent reads it before every task, so it stops guessing your facts and your voice. After that you connect your data and bring your own material into the folder, and the guesses turn into your product.
Sit with the first pass for now. You described a page in a sentence and then ran it. Making it yours is what comes next.