Sobre esta plantilla
Scene AI conserva el rastro de sus decisiones: el brief que hay detrás de sección hero ocupa 2.425 caracteres. El titular de la propia página dice “Create awesome 3D scenes with AI”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es negro #000000 de base y blanco #EBEAD0 para la tipografía, y la página está compuesta en Inter. La entrega es Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. La página reduce el movimiento a un vídeo en bucle de fondo. Cuando prepares el brief de cada sección hero de SaaS, parte de esta composición y sustituye el tema.
Pensado para
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida sección hero y deja que el prompt recoja un marco de 2056x1476.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 8s de vídeo en bucle.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Scene AI.
Qué incluye
- Fila superior: marca, enlaces y acción. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en un marco de 2056x1476, de manera que la barra nunca compite con la composición que tiene detrás. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto.
- La escala es el estilo. La línea display se compone en Inter a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio.
- Enlaces antes de la acción. La fila se dimensiona a partir de su propia tipografía, no de una altura de cabecera fija. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Un solo medio lleva el tono. La primera pantalla es un único clip a 2056x1476, y todo lo demás se dispone encima. Exporta a 2056x1476 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 2056x1476 o más ancho para que el recorte siga siendo honesto.
Movimiento e interacción
La interacción está en los controles
La interacción se queda en cada control (estados hover en los botones y los enlaces y no en todas las tarjetas), así que nada más de la página se mueve como efecto secundario. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 8s en 2056x1476, en bucle discreto detrás del texto y sin reaccionar al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Hacer tuyo este tipo de sección hero
Cambia primero el texto y el material, después el color y por último la maquetación. El marco de 2056x1476 y la escala de Inter son lo que sostiene la página, así que sustituye alrededor de ellos y no a través de ellos. Otra marca puede reutilizar el marco entero.
Las cifras detrás de sección hero
Casi todas las decisiones de aquí son un valor que puedes comprobar: un marco de 2056x1476. El medio es un bucle de 8s en 2056x1476. El tipo se queda en Inter, así que una sustitución tiene que mantener las mismas proporciones. Nada de este tipo de sección hero depende de un valor por defecto.
Por qué esta composición funciona para SaaS
En esta página hay una sola promesa, y un marco de 2056x1476 la sostienen en su sitio. La página lo dice sin rodeos: “Create awesome 3D scenes with AI”. Nada por debajo de la primera pantalla tiene que cargar también con la oferta. Scene AI enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Scene AI?
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 2056x1476. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Scene AI depende de Tailwind CSS?
La referencia está construida en Tailwind CSS, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
¿Puedo publicar una página reconstruida a partir de Scene AI sin acreditar nada?
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 2056x1476.
