MeDo

Generador de Página 404 con IA.

Las páginas perdidas son inevitables — una 404 olvidable no lo es. Describe el estilo de tu marca y MeDo genera una página de error completamente diseñada con ilustración, navegación clara y texto que mantiene a los visitantes comprometidos en lugar de hacerlos rebotar.

Página 404
Página 404

Una página 404 es tu última oportunidad de retener a un visitante

Cuando alguien llega a una URL rota, la pantalla de error predeterminada del navegador es un callejón sin salida — cierran la pestaña y se olvidan de que existías. Una página 404 bien diseñada reconoce el error con personalidad, ofrece navegación clara de vuelta a contenido útil y refuerza la confianza en la marca exactamente en el momento en que más se necesita. Los sitios con páginas 404 alineadas a la marca reducen mediblemente las tasas de rebote en estados de error y recuperan tráfico que de otro modo se perdería para siempre.

6 plantillas

Plantillas de Página 404 que puedes generar

Cada plantilla es un prompt real, no una captura de pantalla. Cópialo en cualquier editor de IA o ejecútalo en MeDo y obtén código React + Tailwind.

MinimalCentered

Vertically Centered 404 Layout

Numeral, one line of copy, one button. The layout to reach for when you have no search index and no obvious second destination — two links beat a sitemap dump.

Create a not-found page layout, vertically centered in the viewport: a large 404 numeral as a display element, an h1 stating that the page was not found in plain language, one sentence explaining it may have moved or been deleted, and a primary Back to home button. Reuse the site header and footer so the page does not read as a different site. The route must return an HTTP 404 status, not a 200 with error copy on it, or search engines will index the dead URL. Give the h1 focus on load so screen reader users land on the error rather than the nav, and keep the numeral decorative with aria-hidden so it is not announced as a number.

Prueba en MeDo
RecoverySearch

404 With a Search Field

For any site with more than a few dozen pages, where the visitor was looking for one specific thing. The input, not the home button, is the real recovery path.

Create a not-found page built around a search affordance: a compact 404 heading, one line of copy, then a labelled search input with an autofocus and a submit button that posts to the site search route. Below it, list five popular or recently updated pages as real links rather than a generic Back to home. Seed the search input with any meaningful slug segment from the failed URL so the visitor starts from their own query. Return an HTTP 404 status from the route and do not redirect to the homepage. Label the input with a visible label, announce result counts through an aria-live region, and keep the header and footer navigation intact.

Prueba en MeDo
DeveloperDocs

Terminal-Aesthetic 404 Page

Monospace numeral, scanline texture, links to search and the docs index. The audience here reads error output for a living, so the page can be terse without feeling cold.

Create a not-found page for a developer tool: a monospace 404 with a faint glow on a dark surface, a short headline, one line noting the page may have moved between versions, and a docs search input. Add links to the docs index, the changelog and the version switcher, since a broken docs URL is usually a version mismatch rather than a typo. Return an HTTP 404 status and keep the docs sidebar rendered so the reader retains their place in the tree. Set the h1 as the focus target on load, mark the background texture aria-hidden, and hold contrast at 4.5:1 for the muted supporting copy against the dark background.

Prueba en MeDo
CommerceStorefront

404 With Products and Categories

A dead product URL usually means the item sold out or was renamed, so the page should show alternatives rather than apologise. Category links recover more sessions than a home button does.

Create a not-found page for a store: a short heading acknowledging the product or page is unavailable, a product search input, a row of four top-level category links, and a grid of four bestseller cards with image, name and price. Explain in one line that items can sell out or be renamed. Return an HTTP 404 status for the missing URL — a soft 404 redirecting to the homepage strands the visitor and keeps the dead link indexed. Give every product image real alt text, keep the cards keyboard reachable in reading order, and preserve the cart indicator in the header so an in-progress basket is visibly intact.

Prueba en MeDo
In-appConsole

404 Inside the App Shell

For authenticated routes, render the error inside the existing nav instead of ejecting the user to the marketing site. Losing the app shell reads as a logout, which triggers support tickets.

Create an in-app not-found view that renders inside the authenticated shell with the sidebar and top bar intact: a compact heading stating the resource was not found, one line noting it may have been deleted or belongs to a different workspace, a Back to dashboard button, and a link to switch workspace. Do not sign the user out or bounce them to the marketing homepage. Return an HTTP 404 for a genuinely missing resource and a 403 where the resource exists but is not theirs, since conflating the two leaks whether an ID is real. Move focus to the heading on render and keep the page title informative for browser history.

Prueba en MeDo
Brand-ledCanvas

Illustrated Full-Bleed 404 Page

The error page as a piece of the brand — an illustration or animation carrying the page and the copy staying out of its way. Only works if the recovery link is still obvious at a glance.

Create a brand-led not-found page: a full-bleed illustration or looping animation filling the viewport, an oversized 404 or short witty headline set over it, one line of copy, and a single high-contrast Back to home button that stays legible against the artwork. Mark the illustration aria-hidden and carry all meaning in the text. Respect prefers-reduced-motion by holding a static frame instead of looping. Keep the total weight in check — a 3MB hero on an error page is bandwidth spent on a failed request. Return an HTTP 404 status and keep the footer navigation present beneath the artwork.

Prueba en MeDo

Cómo personalizar tu Página 404

Dale peso visual al número de error, no solo tamaño de texto

El "404" es lo primero que un visitante ve — hazlo un elemento de diseño, no solo un número. Un relleno degradado, brillo sutil, sombra desplazada o incluso un personaje ilustrado interactuando con él transforma un frío código de error en algo memorable y consistente con la marca.

Escribe texto que reconozca la frustración y avance rápido

Evita líneas genéricas como "Ups, página no encontrada." Reconoce lo que pasó en una oración corta, luego apunta inmediatamente hacia adelante. El tono debe coincidir con tu marca: juguetón para apps de consumo, limpio y directo para herramientas de desarrollo, cálido y disculpador para e-commerce.

Ofrece dos rutas de recuperación — una primaria, una secundaria

Un solo botón "Ir al inicio" es el mínimo. Una gran página 404 agrega una opción secundaria afinada a la intención probable del visitante: "Explorar documentación", "Buscar", "Ver páginas populares" o "Contactar soporte". Dos caminos distintos previenen el rebote de todo o nada.

Incluye un campo de búsqueda para sitios con mucho contenido

Para blogs, sitios de documentación y tiendas de e-commerce, incrustar un campo de búsqueda directamente en la página 404 convierte el callejón sin salida en un momento de descubrimiento. Un visitante buscando un artículo o producto específico puede encontrarlo inmediatamente sin volver a la página principal.

Quién usa el componente Página 404

Aplicación web SaaS

Las páginas 404 de SaaS típicamente usan el estilo de ilustración principal del producto, un titular empático corto y un botón "Volver al dashboard" — manteniendo al usuario dentro del producto en lugar de enviarlo a la página de marketing.

Herramienta de desarrollo o sitio de documentación

Las páginas 404 de herramientas de desarrollo se inclinan por estéticas de terminal o código: fuentes monoespaciadas, texturas de escaneo de líneas o un stack trace de error ficticio renderizado como diseño. Los enlaces de recuperación apuntan a búsqueda y al índice de documentación en lugar de un inicio genérico.

Tienda de e-commerce

Las páginas 404 de retail minimizan el rebote mostrando bestsellers, enlaces de categorías o una barra de búsqueda directamente en la página de error. Algunas incluyen una pequeña oferta de descuento ("Déjanos compensarte — aquí tienes un 10% de descuento") para convertir la frustración en un momento de compra.

Sitio de marketing o marca

Las páginas 404 de marcas y agencias tratan la pantalla de error como un lienzo para la creatividad — ilustraciones inesperadas, textos ingeniosos y animaciones interactivas que hacen que el enlace roto mismo sea compartible y acorde a la marca.

Patrones de Página 404 para distintos sitios web

El mismo componente página 404, adaptado al tipo de sitio donde se publica.

01 / 06

SaaS Application 404

Render the error inside the app shell with the sidebar intact and point at the dashboard, not the marketing homepage. Dropping an authenticated user onto the public site looks like a session expiry, and they will contact support rather than click Back.

Estilos y variantes de Página 404

Elige la variante que encaje con el resto de la página y genérala.

01 / 06

Centered Minimal 404

Numeral, headline, one button, vertically centered. Ships in an hour and never looks broken. The right choice when you have no search index, because the alternative is a page whose main action leads nowhere useful.

Página 404 en React, Next.js, Vue y Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: el mismo página 404, seis formas de integrarlo.

01 / 06

React 404 Page

In a client-only SPA a catch-all route renders the page but the server still answers 200, so configure the host to serve index.html with a 404 status for unknown paths — otherwise crawlers index every dead URL.

src/routes.tsx

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/docs/*" element={<Docs />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Cómo añadir tu Página 404 a un proyecto

Cuatro pasos, desde elegir una plantilla de página 404 hasta llevarlo a producción.

01~30s

Pick a 404 Layout

Match it to why your URLs break — search-first for a content site, category links for a store, the app shell for authenticated routes, centered minimal for everything else.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Swap the placeholder recovery links for the two destinations you would actually want a lost visitor to reach.

03~1min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "seed the search box from the failed slug", "keep the sidebar rendered", "hold a static frame under reduced motion".

04~1min

Wire the Not-Found Route

Drop it into not-found.tsx, +error.svelte, 404.astro or your catch-all route, then curl a dead URL and confirm the response is 404 and not a 200 with error copy on it.

Preguntas frecuentes sobre Página 404

¿Qué es un generador de páginas 404 con IA?

Un generador de páginas 404 con IA toma una descripción en lenguaje natural del estilo, audiencia y tono de marca de tu sitio y produce una página de error completa y estilizada — concepto de ilustración, titular, texto de apoyo, enlaces de navegación y código listo para producción. MeDo genera el componente completo incluyendo layout, colores y estados interactivos, no solo un esqueleto de código.

¿Cómo creo una página 404 personalizada con IA?

Abre MeDo y describe la estética de tu sitio, tu nombre de marca y cómo quieres que los visitantes se recuperen. Por ejemplo: "Crea una página 404 para una agencia de diseño minimalista. Fondo blanco, gran 404 sans-serif en gris claro, un titular corto e ingenioso, un botón primario 'Volver al trabajo' y un enlace secundario 'Ver casos de estudio'." MeDo genera el componente; refina con prompts de seguimiento hasta que coincida exactamente con tu marca.

¿Qué debe incluir una buena página 404?

Como mínimo: una indicación clara de que la página no fue encontrada, una explicación corta escrita por humanos (no solo "Error 404"), y al menos una ruta de navegación de vuelta a contenido útil. Las páginas 404 fuertes también incluyen visuales o ilustraciones consistentes con la marca, una opción de recuperación secundaria (búsqueda o enlaces de categorías), y texto que coincida con el tono general del sitio.

¿Cómo afecta una página 404 al SEO?

Una página 404 correctamente implementada devuelve un código de estado HTTP 404, que indica a los motores de búsqueda que la URL no existe — esto es comportamiento correcto y esperado. Lo que importa para el SEO es que los enlaces internos rotos se corrijan en la fuente y que la página 404 ayude a los visitantes humanos a recuperarse para que no reboten inmediatamente. Una página 404 bien diseñada no perjudica el SEO y puede reducir la señal de tasa de rebote que produce un estado de error sin salida.

¿Cuál es el mejor diseño para una página 404?

El mejor diseño de página 404 coincide con tu marca, comunica el error claramente sin jerga y devuelve al visitante a contenido útil en un clic. Para la mayoría de sitios esto significa una señal de error visualmente prominente (ilustrada o tipográfica), una explicación de una oración en lenguaje claro, y un botón de acción principal. Evita páginas abarrotadas con demasiadas opciones de navegación — dos rutas de recuperación claras superan a un volcado completo del sitemap.

¿Puedo generar una ilustración de página 404 con IA?

Sí. Cuando describes tu página 404 en MeDo, puedes especificar el estilo de ilustración — basado en personajes, geométrico, abstracto o solo iconos — y MeDo lo integra en el layout del componente. También puedes solicitar conceptos de ilustración específicos como "un astronauta perdido", "un robot roto" o "una señal de carretera vacía" y MeDo generará SVG o HTML estilizado correspondiente para dar vida al concepto.