Sobre esta plantilla
Lee AI Runtime como especificación de landing page: los valores se escribieron antes de construir la página. El esquema de color es neutro #28282A de base y tono claro #C8C8C8 para la tipografía, y la página está compuesta en Inter. El montaje es React; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se limita a transiciones de 0.85s, cubic-bezier(0.22, 1, 0.36, 1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Tenlo abierto mientras escribes: el brief de 9.593 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page sirve a equipos que tienen que justificar un marco de 1472x1080 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 28px en vez de una captura.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 6,9s de vídeo en bucle.
Qué incluye
- Fila superior: marca, enlaces y acción. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. La sección activa se marca con peso, no con una píldora ni con un subrayado.
- Todas las medidas están escritas. Los tamaños se leyeron del render en 1472x1080: secciones de 100vh, pasos de espaciado de 28px, transiciones de 0.85s y easing cubic-bezier(0.22, 1, 0.36, 1). Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato.
- Cifras tratadas como tipografía. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de landing page se convierta en una lista de funciones. La fila pertenece a la primera pantalla y no a una banda aparte, lo que mantiene la prueba cerca de la afirmación. Da a cada cifra una etiqueta corta.
- Un pie de página que sostiene la marca. Los enlaces se agrupan en columnas y la marca ocupa su propio bloque, lo que mantiene legible un pie de página largo en lugar de convertirlo en una lista. Los tamaños bajan de los encabezados de columna a los enlaces, así la jerarquía sobrevive a un pie de página denso. Reserva el acento para una sola acción.
Movimiento e interacción
Incluye una rama más silenciosa
La capa de movimiento viene con interruptor: la entrada y el bucle se descarta con prefers-reduced-motion. La maquetación es idéntica con el movimiento desactivado, así que nada depende de la animación.
Movimiento ambiente sin librería de scroll
Un clip de 6,9s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto. Graba o exporta a 1472x1080 o más ancho.
El reflujo de landing page
Una pantalla estrecha no se arregla encogiéndola. Este brief resuelve el cambio en el tipo y en la navegación: 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. La escala cambia con el viewport; la secuencia, no.
Cómo ordena AI Runtime la primera lectura
Compara la parte alta de esta página con una primera pantalla típica de SaaS. Las dos llevan titular y acción; aquí navegación, el titular, la insignia de anuncio, la fila de cifras y la fila de clientes ocupan un orden fijo en vez de competir con el mismo peso. Quien busca SaaS recibe la oferta antes que las opciones.
El argumento de landing page
En esta página hay una sola promesa, y secciones de 100vh y pasos de espaciado de 28px la sostienen en su sitio. Nada por debajo de la primera pantalla tiene que cargar también con la oferta. AI Runtime enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de AI Runtime?
El brief capturado ocupa 9.593 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Necesito React para recrear AI Runtime?
No. El brief es una especificación, no una lista de dependencias. Se escribió para React, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
¿Cuánto de AI Runtime está animado?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 0.85s con la curva cubic-bezier(0.22, 1, 0.36, 1). El brief anota los valores para que un port no tenga que adivinarlos.
