Replit Agent prompt to build a landing page
Landing pages generated from thin prompts all converge on the same hero and three cards. This spec gives Replit Agent a fixed section order, a Postgres-backed waitlist with dedupe, and layout-shift rules for images. What you get is a shippable one-pager where the form actually stores emails and repeat submits are handled politely.
Last updated
Build a one-page marketing site for {{resource}} in this Repl. Frontend plus one small API route for the waitlist. That route needs a running server, so plan to ship this as an Autoscale deployment; a Static deployment only works if you cut the form and point the CTA at a mailto link instead.
Sections in order: hero with a single headline, one subline, and one primary CTA button. A three-item problem and solution row. A product screenshot block using a placeholder image with explicit width and height so nothing shifts while it loads. A how-it-works list with three numbered steps. A social proof placeholder. A closing CTA repeating the hero action. Footer with contact and privacy links.
Waitlist: the CTA scrolls to an email form that POSTs to /api/waitlist and writes to a waitlist table in the built-in Postgres database. Validate the email server-side, dedupe on the address, and respond to repeats with a friendly already-subscribed message instead of an error.
States: success swaps the form for a confirmation line. Network failure keeps the typed email in the field and shows a retry message under the input. No alert dialogs anywhere.
Styling: one display font for headlines, system font for body, a single accent color used only on CTAs, constrained content width, and real spacing between sections rather than divider lines.
Done when: the page reads correctly at phone width in the webview, submitting the same email twice shows the dedupe message, and a hard refresh produces no visible layout shift in the hero.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a one-page marketing site for users in this Repl. Frontend plus one small API route for the waitlist. That route needs a running server, so plan to ship this as an Autoscale deployment; a Static deployment only works if you cut the form and point the CTA at a mailto link instead. Sections in order: hero with a single headline, one subline, and one primary CTA button. A three-item problem and solution row. A product screenshot block using a placeholder image with explicit width and height so nothing shifts while it loads. A how-it-works list with three numbered steps. A social proof placeholder. A closing CTA repeating the hero action. Footer with contact and privacy links. Waitlist: the CTA scrolls to an email form that POSTs to /api/waitlist and writes to a waitlist table in the built-in Postgres database. Validate the email server-side, dedupe on the address, and respond to repeats with a friendly already-subscribed message instead of an error. States: success swaps the form for a confirmation line. Network failure keeps the typed email in the field and shows a retry message under the input. No alert dialogs anywhere. Styling: one display font for headlines, system font for body, a single accent color used only on CTAs, constrained content width, and real spacing between sections rather than divider lines. Done when: the page reads correctly at phone width in the webview, submitting the same email twice shows the dedupe message, and a hard refresh produces no visible layout shift in the hero.
Same task in other tools
Questions about this prompt
Why store the waitlist in Postgres instead of a form service?
The database already lives in your workspace, so one table gets you server-side validation, dedupe, and a trivial export later, with no third-party account or embed script. The tradeoff is that the site needs an Autoscale deployment to keep the API route alive, which the prompt states up front.
How do I change the section lineup for my product?
Rewrite the sections list in the prompt and keep everything else. The rules doing the real work are the single CTA per section, explicit image dimensions, and the dedupe behavior, and those transfer to any section order.
The page jumps when the screenshot loads, what is the fix?
The image is missing explicit width and height, so the browser cannot reserve space. Ask the agent to add real dimensions to every image element, then hard refresh the webview and watch the hero for movement.