Sobre esta plantilla
Aquí no hay una captura sino un caso de landing page de DeepThink, con el brief original al lado. El color se limita a #0C0C0C de base y tono claro #FAFAFA para la tipografía y la página se compone en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1280x1928 antes de escribir código. El movimiento se limita a transiciones de 90ms y cubic-bezier(.22,1.36,1), lo bastante discreto para que el texto siga mandando. Tenlo abierto mientras escribes: el brief de 13.695 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page va dirigido a equipos que ya conocen un único archivo HTML autocontenido y solo necesitan dejar easing cubic-bezier(.22,1.36,1) por escrito.
- Este diseño de landing page sirve a equipos que tienen que justificar un único archivo HTML autocontenido ante alguien que no estaba en el kickoff.
- Si tres personas tienen que editar el diseño de landing page, dales a los responsables de contenidos secciones de 100vh y pasos de espaciado de 10px en vez de una captura.
Qué incluye
- Enlaces antes de la acción. La barra se superpone sobre landing page en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Aquí nada se hereda. Toda medida del brief es un número que puedes volver a medir: secciones de 100vh, pasos de espaciado de 10px, transiciones de 90ms y easing cubic-bezier(.22,1.36,1). Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Las tarjetas estructuran. La cuadrícula fija el orden de lectura: paneles del mismo peso, una idea cada uno, compuestos en Inter 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.
- Primero el texto, después el adorno. Toda la composición cabe en una pantalla y se entrega como un único archivo HTML autocontenido, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 1280x1928, 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: 90ms usando cubic-bezier(.22,1.36,1), aplicado a cambios de estado y no a entradas. Los valores son lo bastante cortos para leerse como respuesta y no como animación.
Un lienzo, no una imagen
Un lienzo en vivo hace el trabajo visual: un lienzo WebGL. El brief mantiene la interfaz sobria alrededor del lienzo para que la escena sea el único espectáculo.
El brief de SaaS se sostiene
DeepThink funciona porque su jerarquía está decidida, no decorada. El brief fija las cifras (secciones de 100vh, pasos de espaciado de 10px, transiciones de 90ms y easing cubic-bezier(.22,1.36,1)), así que un texto nuevo cae dentro del marco en lugar de reabrirlo. DeepThink enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Qué se mueve en DeepThink
El movimiento se limita a transiciones de 90ms, una aparición de línea enmascarada y una aparición al hacer scroll. Nada en este tipo de landing page se anima más tiempo del que permite el brief. Nada se anima por gusto en este tipo de landing page.
Las cifras detrás de landing page
Una captura te dice cómo se ve la página; el brief te dice por qué. Con secciones de 100vh, pasos de espaciado de 10px, transiciones de 90ms y easing cubic-bezier(.22,1.36,1) se cierra la distancia entre las dos. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Necesito un único archivo HTML autocontenido para recrear DeepThink?
DeepThink se construyó en un único archivo HTML autocontenido, 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.
¿Cuánto ocupa el prompt que hay detrás de DeepThink?
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 1280x1928. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿De dónde sale el diseño de DeepThink?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1280x1928.
