Prompt Recipes
Whole pages, described precisely enough that the first build is the one you keep.
These pages are the only ones a visitor sees when something has already gone wrong. They are also the pages most often shipped as an afterthought, which is why so many sites answer a broken link with a cheerful illustration and no information.
The technical failure matters as much as the visual one. An error page that returns HTTP 200 is a soft 404, and search engines will index it — a site with thirty soft 404s looks like thirty thin pages. A maintenance page with a countdown that expires but never opens is worse than no page at all.
The design rule is the same across all five states: one sentence saying what happened in plain language, one primary action, and a short list of real destinations. No mascot carrying the explanation, and no apology standing in for information.
The order is the argument. Reordering these is not a layout decision, it is a change to the reasoning.
Same layout, same type scale, different sentence and action. Five bespoke designs drift apart and cost five times as much to maintain.
What happened, in words a non-technical visitor understands. The status code is a small label, not the headline.
Go home, retry, search, or request access. Exactly one, matched to the state. Two actions means the page has not decided what the visitor should do.
Three to five links that actually exist. A 404 that links to a section you removed is a second failure in the same visit.
404 returns 404, 500 returns 500, maintenance returns 503 with Retry-After. Serving 200 turns an error into an indexable empty page.
Repeat the query, show zero results explicitly, and offer two adjacent suggestions. Silently showing an empty list is the most confusing state of the five.
No auto-redirect after five seconds, no countdown that expires into another countdown, no advertising on an error page.
6 variables. Change one and the text below rewrites itself — nothing else on this page moves.
The minimum worth shipping.
The safest choice for anything used repeatedly.
Build the system pages for a reference gallery of documented styles and prompts, where a 404 is most often a stale bookmark from an older URL structure: the 404 state only, since it is the one that will actually be hit AUDIENCE A visitor who has just hit a dead end — a stale link, a server fault, a search with no results, or a page they are not allowed to see. They are mildly frustrated and will give the page about five seconds to offer a way forward. STRUCTURE (one shared template, repeated per state) 1. Layout: a centred single column, maximum 640px, vertically positioned at roughly 35 percent of the viewport rather than dead centre. No site navigation is required, but the wordmark sits top left as a link home. 2. Status line: the code or state as a small label above the heading — 404, 500, Maintenance, No results, No access. Monospace, 0.75rem, muted. 3. Heading: one sentence in plain language stating what happened. Sentence case, no exclamation mark, no pun. 4. Body: one or two sentences explaining the likely cause and what the visitor can do. If the visitor can fix it, say how. 5. Primary action: a primary button returning to the homepage, plus a search field for the 404 state 6. Destinations: three to five text links, each a page that exists today. For empty search, show the query and two adjacent suggestions instead. 7. Footer line: the site name and a contact address. No social links, no newsletter. STYLE Product neutral: the same page background as the site, one bordered block, the status code in mono at 0.75rem, heading at 1.8rem, primary button matching the site's normal button style. MOTION No animation at all. If the stylesheet failed to load, an animated page is the one thing that looks broken rather than deliberate. COPY RULES - Plain and direct: state what happened, state what to do, stop. No personality, no apology beyond one clause. - Never write oops, whoops, uh oh, or looks like you are lost. - Never blame the visitor. A mistyped URL is the most common cause and the page still does not say you typed it wrong. - Name the cause when it is known: the page moved, the server failed, the link is out of date. - Keep the whole page under 80 words excluding navigation. CONSTRAINTS - 404 must be served with HTTP status 404; 500 with 500; maintenance with 503 plus a Retry-After header. - Error pages carry noindex and are excluded from the sitemap. - No advertising on any error page. - No automatic redirect. If a redirect is appropriate, use a 301 at the server level instead of a page. - Links inside error pages are root-absolute, because an error page renders at any URL depth. - The page must render correctly with no stylesheet, since a broken build is one of the cases it exists for. OUTPUT Five states sharing one template and one stylesheet. Static where possible.
| Variable | How to edit it |
|---|---|
{{PAGES}} |
Ship 404 first, always. Maintenance is the second most valuable because it is the only state where the visitor can be told when service returns. |
{{TONE}} |
Plain is underrated. On a page someone reaches while already annoyed, a joke reads as the site not taking the problem seriously — and the visitor has no way to tell whether their data was affected. |
{{ACTION}} |
Contextual actions are the difference between a page that helps and a page that merely exists. A 500 that offers Go home sends the visitor away from the thing they were trying to do. |
{{STYLE}} |
Keep the error page visually consistent with the site, then resist the urge to make it the most designed page on the domain. It is seen at the worst moment. |
{{MOTION}} |
None. These pages must work when CSS is partially broken, which is exactly the condition that produces a 500 in the first place. |
| Builder | What to do differently |
|---|---|
| v0 | Generate one state and then ask for the others as copy variants of the same component. Generating five pages independently produces five different vertical positions for the heading. |
| Lovable | It will add an illustration. Keep it only if it is a simple inline SVG with no external request — a 404 that depends on a CDN image is a second failure when the CDN is the thing that broke. |
| Bolt | Ask explicitly for the status code and noindex meta. Generated error pages almost always ship as 200 with an indexable head, which is the defect that turns one missing page into dozens of thin ones. |
| Cursor / Claude Code | Implement the states as one template with a data object per state, then wire the server responses (404, 500, 503) before touching the styling. |
A missing page returning HTTP 200 with a human-readable apology is the most common error-page defect on the web. Search engines index it as real content, and a hundred stale links become a hundred thin pages competing with your real ones.
Auto-redirecting to the homepage removes the visitor's ability to read what happened, breaks the back button, and hides the fact that a link is broken rather than fixed. Fix the link; do not paper over it.
A maintenance page promising return in 30 minutes, still showing the same promise four hours later, teaches visitors that nothing on the site is reliable. If the estimate is unknown, say unknown.
Advertising against a page with no content and an unresolved problem is both a policy risk and an insult. Exclude every error state from ad serving.