What specifically distinguishes a "branded 404 page" from a generic error page?
The difference isn't just visual style (illustration, color) — the more important distinction is information architecture. A generic server-default 404 page usually offers a single technical message and one link, effectively handing the visitor full responsibility for figuring out what went wrong. A branded 404 page, by contrast, treats the page as a small navigation interface, offering multiple branching options and using a brand-consistent tone to reduce the visitor's frustration.
This output demonstrates exactly that difference: it's still communicating "this page doesn't exist," but through illustration, copy tone, and three clear exits, it turns a bare error notice into a small re-orientation experience.
Why bother designing a 404 page at all? Visitors shouldn't be ending up there in the first place.
That premise itself is flawed — visitors often land on a 404 page not because they did something wrong, but because of the site's own issues: internal links that weren't updated, pages that moved without a redirect set up, external sites still linking to your old URL. In other words, a meaningful share of 404 traffic is "accidental visitors" the site itself created, not visitors who typed the wrong address.
Given that this traffic is going to happen regardless, it makes more sense to design the page as a last chance to recover the visitor rather than let them get stuck at a dead end — especially for visitors arriving from an external link or search result who were already interested in your content; a friendly guidance page is far more likely to keep them than a cold error message.
How was it decided which three options to offer for the "three exits"? Couldn't you just throw in any three buttons?
The logic behind choosing three exits maps to three distinct situations a visitor might be in — it's not just picking three buttons to fill space. This output's judgment: a visitor who's unsure what they were looking for needs to "return to a known starting point" (homepage); a visitor who already knows what they want but hit a broken link needs to "search directly"; a visitor who can't find it even through search, and may be in more of a hurry, needs "human help" (contact support). These three situations cover nearly the full range of visitors who end up on a 404 page.
If you just threw in any three buttons (say, "Home," "About Us," "Blog"), the count would still be three, but they wouldn't map to the visitor's actual difficulty, and the guidance effect would be far weaker — which is why the number of exits isn't really the point; whether each exit matches a real situation is.
Where should I start fixing my own site's 404 page? What's the priority order?
If you can only do one thing, add a visible search box first — the data shows it's the highest-usage element and the most direct way to recover a visitor. Second priority is adding at least one exit besides "back to home" (popular categories, a contact option), so a single exit doesn't leave the visitor lost a second time. Copy tone and illustration style are nice-to-haves you can refine later — they don't need to be perfect on the first pass.
For an e-commerce site, it's also worth adding links to popular products or a current promotion — outside case data suggests this is the most direct lever on conversion.
The 404 page is usually the least-designed page on an entire site — visitors only land there because of a broken link or a deleted page, so many teams just leave the server's default black-on-white text in place. But this is actually an underrated opportunity: the visitor is still within the site's domain, just on the wrong path, and a well-designed 404 page can turn a dead end into a redirect. This test had Claude Design generate a branded 404 page, with the focus on observing how it packs enough guidance into an intentionally minimal page.
The input for this one was kept deliberately simple: the brand tone is "friendly, not preachy," and the page's goal is "make the visitor feel like a missing page isn't the end of the world, and give them three clear next steps." Nothing was specified about whether to include an illustration, whether to include a search box, or what the button copy should say — those were left for the output to decide on its own.
What came back was a centered, single-column layout: a hand-drawn-style illustration up top (a lost compass icon), a slightly self-deprecating headline in the middle, and three buttons side by side below it: back to home, search the site, and contact support. The overall color palette follows the brand's primary colors but at reduced saturation, so the error page doesn't end up looking more eye-catching than a normal page.
The most notable structural decision in this output is the deliberate design of three side-by-side action options, instead of a single "back to home" button. The problem with a single exit is that if what the visitor was looking for has nothing to do with the homepage, "back to home" just sends them to another place where they have to start searching all over again — it doesn't actually solve the problem. Three exits map to three different situations: not sure what you're looking for → homepage; you know the keyword → search; can't find it and it's urgent → contact support. This kind of branching design turns a single dead end into three paths, each matching a different visitor intent.
Another detail worth recording is the placement of the search box — the output put it front and center among the three buttons and made it larger, clearly judging search to be the option most likely to get used. That judgment has data behind it: outside tracking research shows well-designed 404 pages with clear guidance elements can increase visitor dwell time by roughly 25%, and for e-commerce sites, adding popular products or category links to a 404 page can even lift conversion. This particular output didn't include a product-recommendation Block (since the prompt didn't specify an e-commerce context), but the overall layout leaves room to insert one, suggesting the output accounted for how the page might get extended down the line.
Worth mentioning is that the copy's tone is itself part of the output. The generated headline reads "This page decided to go on a trip" rather than the boilerplate "404 - Page Not Found" — this kind of slightly humorous error-message design has become increasingly common on branded sites in recent years, on the logic that a visitor is already a bit frustrated by a broken link, and a friendly or self-deprecating tone can soften that reaction rather than reinforcing the error itself with cold technical jargon like "HTTP 404 Not Found."
If your site is still running on the server's default 404 page, three judgment calls from this output are worth borrowing directly: offer three or more exits for different situations instead of one back button, put the search box at the visual focal point, and use a friendly tone instead of technical jargon. Traffic to a 404 page usually isn't trivial — broken links, old bookmarks, and typos all route there — and turning that visitor, who would otherwise be lost, into someone redirected back into your site's content is a near-zero-cost optimization that's frequently overlooked.