Sobre esta plantilla
Autonomous Ops es una referencia de trabajo para un producto de IA o SaaS: el desglose de landing page, con la maquetación medida y lista para recrear. Abre con “Falcon AI operations overview” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es #F0F0F0 de base, #282828 para la tipografía y naranja #FF6900 para los acentos, con la tipografía Segoe UI, Arial, Helvetica. Se entrega como un único archivo HTML autocontenido, así que el conjunto de landing page se puede trasladar a un proyecto sin traspaso de diseño. Todo el movimiento cabe en transiciones de 3000ms, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de landing page en un producto de IA o SaaS, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Este diseño de landing page sirve a equipos que tienen que justificar easing cubic-bezier(.16,1.3,1) ante alguien que no estaba en el kickoff.
- Equipos de growth que retintan su landing page de un producto de IA o SaaS y quieren conservar el marco de 2028x1080 mientras cambia el texto de la oferta.
- Si la maquetación parte de un único archivo HTML autocontenido, llévate primero secciones de 100vh y una cuadrícula de 3 columnas y no toques la paleta hasta que se asiente la cuadrícula.
Qué incluye
- Navegación contenida en una fila. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #FF6900, dimensionada para no destacar frente al resto de la página. Los enlaces se componen a un tamaño menor que la marca, y la acción en #FF6900 es el único elemento de la barra con peso. Una acción por barra.
- Medido contra el viewport. La maquetación trabaja con valores absolutos y no con proporciones: secciones de 100vh, una cuadrícula de 3 columnas, esquinas de 1.59cqw y transiciones de 3000ms. Un remontaje que da esos números se parece a la referencia sin más ajustes. Conserva los valores que parecen arbitrarios.
- Medios sin superposición. El vídeo ocupa la capa inferior de la composición de 2028x1080, con el texto dispuesto por encima y nada entre ambos. Exporta a 2028x1080 o más ancho y el recorte de cobertura sigue funcionando.
- El tipo lleva el tono. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Segoe UI, Arial, Helvetica a un tamaño display cerrado y una caída clara hasta el texto de apoyo. La interlínea sigue los pasos de tamaño y no un valor global único.
Movimiento e interacción
Tiempos en milisegundos
El movimiento de los controles es corto y repetible: 3000ms en cada cambio de estado. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición.
Renderizado, no ilustrado
La primera pantalla la construye el navegador y no llega como imagen: un lienzo WebGL. El brief mantiene la interfaz sobria alrededor del lienzo para que la escena sea el único espectáculo. Mantén la interfaz plana alrededor.
Qué cambiar primero en Autonomous Ops
Cuando pongas tu propio material, conserva el recorte y el orden de capas. El medio es un bucle de 9,7s en 2028x1080. Esa colocación es lo que mantiene legible el texto. Reescribe el texto y el material antes de recolorear nada.
El orden detrás de landing page
La atención se canaliza en lugar de dispersarse. La página lo dice sin rodeos: “Falcon AI operations overview”. El ojo aterriza primero en la línea de display, después en el texto de apoyo y por último en la acción. La prueba social, cuando aparece, se queda en una franja o una fila y no en un muro de testimonios. Esa secuencia es el diseño. Quien busca SaaS recibe la oferta antes que las opciones.
Qué se mueve en Autonomous Ops
Una librería de animaciones predefinidas te daría más movimiento que esto. El brief pide menos: transiciones de 3000ms, un bucle de 9,7s y una aparición de línea enmascarada, y nada decorativo por encima. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Necesito un único archivo HTML autocontenido para recrear Autonomous Ops?
Autonomous Ops 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.
¿Qué puedo hacer con el brief de Autonomous Ops una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 18.222 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Autonomous Ops 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 2028x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
