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.
I am starting here because it is the fastest way to feel the difference from a chat window. Building pages is not even the most useful thing an agent does for marketing. But 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. 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:
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, the autonomy dial you met when you set up your tool.
Either way, those are the calls a marketer makes, and it made them from public information before it designed the page.
Assignment: point the agent at your product
Here is the same prompt from the demo with your blanks left open. Make a new folder and open it, the way you did in setup, and call it something like agent-hq. It is not a throwaway: this is the project folder the rest of the course lives in, the page, the practice company, your checkpoints.
Fill the brackets and let it run; no product of your own means filling them with any company you know well. 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.
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.
Watch the page render in your browser
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. 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.
Why build in a folder instead of a chat preview?
You can get a chat tool to show you a page too. The bigger difference is everything after the first render.
In a chat
A preview behind glass, inside the tool’s window.
Stays where it was made.
Lives at the tool’s address, if it goes live at all.
A locked box with limits on what it can hold.
In your folder
Real files on your machine that open in your browser.
Yours to keep, hand to a developer, or drop into your site.
Goes live at your own address, with your own analytics.
Grows to as many pages and parts as the job needs.
The context, the connections, and the checkpoints ahead all land in this same folder, and the page you just made is the smallest thing it will hold.
Why the first draft sounds generic
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.
None of that is the agent failing. It is working from what anyone can pull off the public web. 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.
The next lesson shows what closes the gap: a context file, a single document the agent reads before every task, so it stops guessing facts and voice.
Sit with the first pass for now. You described a page in a sentence and then ran it.