Sobre esta plantilla
Nexto 404 da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta se queda en neutro #F5F5F5 de base y casi negro #1A1A1A para la tipografía, y el tipo es DM Sans. Se entrega como React y Tailwind CSS, y la captura se fija a 1986x1446 antes de escribir código. El movimiento se limita a transiciones de 5s y cubic-bezier(0.77, 0, 0.175, 1), lo bastante discreto para que el texto siga mandando. Úsalo cuando tu página 404 necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Diseñadores que necesitan los números antes que nada: secciones de 100vh y pasos de espaciado de 20px, todo citado del brief.
- Equipos de producto que escriben los textos de Página 404 y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
- Pensado para un fundador en solitario que saca un único diseño de página 404 para un producto de IA o SaaS y no tiene ningún sistema de diseño detrás.
Qué incluye
- Una fila, sin desplegables. La barra se superpone sobre página 404 en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Medido contra el viewport. La maquetación se resuelve con valores fijos (secciones de 100vh, pasos de espaciado de 20px, transiciones de 5s y easing cubic-bezier(0.77, 0, 0.175, 1)), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado.
- Contenido dividido en paneles. La cuadrícula fija el orden de lectura: paneles del mismo peso, una idea cada uno, compuestos en DM Sans a un tamaño pequeño para que la estructura siga visible. La altura de los paneles la marca el texto, así una línea más larga no rompe la alineación de la fila. Mantén el orden de lectura como orden de paneles.
- La composición es el contenido. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 1986x1446, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Todo el presupuesto de animación
El presupuesto de animación es pequeño y explícito: 5s con la curva cubic-bezier(0.77, 0, 0.175, 1), aplicado a cambios de estado y no a entradas. El easing se especifica junto a la duración (5s), así que una reconstrucción no puede colar otra sensación sin avisar.
Casi nada de movimiento
El brief deja fuera la animación y deja que la maquetación de 1986x1446 sostenga la página, con el hover y la pulsación como únicos cambios. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
El reflujo de página 404
Este tipo de página 404 se compone a 1986x1446 y luego se recompone para anchos estrechos: la escala es fluida en lugar de escalonada, la sección se mantiene a 100vh y la navegación se pliega en un menú móvil, así que la versión de móvil es una decisión y no un apretujón. La versión de móvil es una decisión, no un recurso de emergencia.
Las cifras detrás de página 404
5.689 caracteres de brief producen una especificación completa. La parte que sostiene todo es corta: secciones de 100vh, pasos de espaciado de 20px, transiciones de 5s y easing cubic-bezier(0.77, 0, 0.175, 1). Nada de este tipo de página 404 depende de un valor por defecto.
Qué se sostiene para IA y SaaS
Si tu primera pantalla explica hoy tres cosas, esta es la versión que explica una. Aquí navegación, el titular, la fila de cifras y la cuadrícula de tarjetas se colocan en orden de lectura, con secciones de 100vh y pasos de espaciado de 20px marcando el ritmo. Nexto 404 enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿El brief de Nexto 404 es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 5.689 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Nexto 404 es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1986x1446. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Nexto 404?
Nexto 404 se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
