Replit Agent
Replit Agent prompt for a 404 page
This prompt makes Replit Agent pitch three 404 headline directions before building, so you choose the voice instead of accepting a first draft. The finished page fits one screen: typographic mark, search, a "Surprise me" random-page button, and a report link carrying the broken path. Customizer style, palette, type, and motion settings reskin it freely.
Last updated
Prompt
Plan first, then build: I need a 404 page for {{product}}, served for every unmatched route on my Replit-hosted site. In your plan, propose three different headline directions in the product's voice and let me pick one before you write code — the audience is {{audience}}, and tone matters more here than anywhere else on the site.
Once I approve, build a single-screen page with this anatomy:
- Centered content block: a large typographic 404 mark (or an illustrated one, whichever suits the visual direction), the chosen headline, and one supporting line reassuring the visitor that nothing is broken on their end.
- Recovery cluster: the primary button, a search field wired to the site's search route, and a "Surprise me" ghost button that navigates to a random page from a hardcoded list of five worthwhile destinations — that is the page's one playful interaction.
- Bottom edge: a muted single line with a mailto link for reporting the broken URL, with the current path prefilled in the subject.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Constraints:
- Everything fits one viewport at 1366x768, with the content block at optical center — slightly above true center.
- Spacing: 12px between items inside the recovery cluster, 40px between the three groups.
- Under 480px, the search field goes full-width and the two buttons share one row beneath it.
The primary call to action is "{{cta}}".
After deploying, verify on the live URL: an unknown path returns HTTP 404 rather than a 200 that merely looks like an error page; "Surprise me" lands on different destinations across repeated clicks; the mailto link carries the broken path in its subject; nothing scrolls at 1366x768. If any check fails, fix it and redeploy before reporting done. I'll refine the headline and the destination list through follow-up messages.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Plan first, then build: I need a 404 page for a project management SaaS, served for every unmatched route on my Replit-hosted site. In your plan, propose three different headline directions in the product's voice and let me pick one before you write code — the audience is engineering managers at startups, and tone matters more here than anywhere else on the site. Once I approve, build a single-screen page with this anatomy: - Centered content block: a large typographic 404 mark (or an illustrated one, whichever suits the visual direction), the chosen headline, and one supporting line reassuring the visitor that nothing is broken on their end. - Recovery cluster: the primary button, a search field wired to the site's search route, and a "Surprise me" ghost button that navigates to a random page from a hardcoded list of five worthwhile destinations — that is the page's one playful interaction. - Bottom edge: a muted single line with a mailto link for reporting the broken URL, with the current path prefilled in the subject. Visual direction: Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else. Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge. Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy. Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission. Constraints: - Everything fits one viewport at 1366x768, with the content block at optical center — slightly above true center. - Spacing: 12px between items inside the recovery cluster, 40px between the three groups. - Under 480px, the search field goes full-width and the two buttons share one row beneath it. The primary call to action is "start a free trial". After deploying, verify on the live URL: an unknown path returns HTTP 404 rather than a 200 that merely looks like an error page; "Surprise me" lands on different destinations across repeated clicks; the mailto link carries the broken path in its subject; nothing scrolls at 1366x768. If any check fails, fix it and redeploy before reporting done. I'll refine the headline and the destination list through follow-up messages.
Same task in other tools
Questions about this prompt
Why approve a headline before the Agent builds anything?
A 404's whole value is voice, and voice is what Replit Agent is most likely to flatten if left to defaults. Choosing between three directions costs one message and anchors the tone; every later follow-up can reference "the headline we picked" instead of relitigating it.
How do I confirm the page really serves HTTP 404?
Open the deployed URL with a junk path and check the status in the dev-tools network tab, or run curl -I against it. The acceptance list makes the Agent do this itself, but spot-check once — a 200 that looks like a 404 quietly poisons your search indexing.
Can I change the Surprise me destinations after launch?
Yes — the prompt hardcodes a five-item list precisely so it stays editable, and a follow-up like "swap the third surprise destination for /changelog" is a one-line change. Keep the list to pages genuinely worth landing on, or the joke becomes a trap.
Part of the Replit Agent landing-page cluster — start from the main Replit Agent landing page prompt.