Demo: Landing Page

Hands-on demo. Use a single prompt so your agent generates a marketing landing page for a todo app.

This demo shows how one prompt can steer an AI coding agent to build a landing page for a product. The product is a todo application: you are not building the full app here, only the public marketing surface (hero, benefits, call to action) so visitors understand what the app does and why they should try it.

Work in a Next.js app with Tailwind set up (or let your agent scaffold that stack). Paste the prompt below into your agent, let it generate or change files, then run the app locally with npm.

Goal

End with a single-page marketing experience for your todo product: clear headline, short supporting copy, and a primary action (for example Get started or Join waitlist). The stack for this exercise is Next.js and Tailwind.

Example prompt

Copy this into your agent and adjust wording if you want:

hey so im working in this repo and i need a landing page for my todo app, lets call it Taskflow, its just a normal todo app nothing fancy

can you make like one long page you scroll down, at the top put the name and a short line about what it is and maybe a bit more text under that and two buttons one that looks like the main one and one thats more like a secondary thing

then under that put some feature cards or whatever, like three of them, about stuff that makes sense for a todo app, you can make up the text

then maybe a how it works part with step 1 step 2 step 3

and a footer with a fake company name and copyright or whatever people put in footers

try to make it look modern and not ugly, pick an accent color or something

for this demo were using nextjs and tailwind so please build it like that, tailwind classes and the usual next app layout, dont swap in some other css thing unless you absolutely have to

when youre done i want that to be what shows on the home page when i run the app, and tell me which files you touched

Run it with npm

From the project root (the folder that contains package.json):

Install dependencies (first time, or after the agent adds a dependency):

npm install

Start the development server:

npm run dev

Open the URL your terminal prints (often http://localhost:3000 for Next.js). You should see the new landing page.

If npm run dev fails, read the error in the terminal and paste it back into your agent with a short note so it can fix the project.

Tweak something you do not like

After the page is up, look at it in the browser and pick one thing that bothers you. Maybe the hero feels cramped, a button label is vague, or a section looks off on mobile.

Write your own prompt in plain language: say what you want changed and where. Send that to the same agent and let it edit the Next.js and Tailwind code. Refresh the dev server tab and see if the fix matches what you had in mind. If not, send another small prompt and iterate.

Example tweak prompt:

On the home page hero: make the primary button label specific ("Start organizing" instead of "Get started"), increase line-height on the subhead, and add more vertical padding above the feature cards on mobile only. Keep Tailwind, no new CSS files.

Context

Continue in Context under First steps: what fills the window, how placement affects retrieval, and how to clean or /compact a session.