Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Bloom AI, con el brief original al lado. “Innovating the spirit of bloom AI” es la línea que la maquetación está pensada para sostener. La paleta es azul intenso #030E1A de base, verde apagado #AAD9C3 para la tipografía y verde #2E5648 para los acentos, con la tipografía Poppins. El montaje es React y Lucide icons; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. Es la referencia adecuada para este tipo de sección hero en un producto de IA o SaaS, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Equipos de growth que retintan su sección hero de un producto de IA o SaaS y quieren conservar el marco de 800x564 mientras cambia el texto de la oferta.
- Equipos internos que amplían su sección hero y necesitan que pasos de espaciado de 50px pasen a los bloques nuevos sin tocar los valores.
- 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 Bloom AI.
Qué incluye
- Una barra de navegación que no estorba. La barra reúne la marca, los enlaces de la sección y un botón en #2E5648, medida en pasos de espaciado de 50px, así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #2E5648 es el único elemento de la barra con peso.
- La escala baja de golpe. La tipografía es Poppins, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. Las cifras comparten la tipografía de interfaz, así estadísticas y etiquetas pertenecen al mismo sistema. Conserva los pasos, cambia la tipografía.
- La barra sigue la cuadrícula. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Valores que puedes comprobar. El brief declara sus tamaños en la captura (pasos de espaciado de 50px), así que un remontaje se puede verificar en lugar de aproximar. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
Movimiento e interacción
Estático a propósito
Aquí no hay librería de scroll: la composición de 800x564 se queda quieta y solo se mueven los elementos que responden a ti. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción. No hacen falta líneas de tiempo de scroll.
Movimiento que no estorba
Esta se entrega como composición estática en 800x564, así que la jerarquía tiene que funcionar sin movimiento, y funciona.
El acierto de sección hero
El diseño defiende su argumento en una sola pantalla. El medio es una imagen fija en 800x564. El material pone la atmósfera, el texto pone la oferta, y pasos de espaciado de 50px mantienen ambas cosas separadas. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Cómo ordena Bloom AI la primera lectura
La página tiene un orden deliberado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. El titular ocupa el tamaño de display, la línea de apoyo explica la oferta y el acento verde #2E5648 marca la acción principal, así que el siguiente paso nunca está en duda. Nada más compite: no hay una cuadrícula de tarjetas antes de la primera decisión, y eso es lo que evita que este tipo de sección hero resulte pesado en un trabajo de SaaS. Quien busca SaaS recibe la oferta antes que las opciones.
Leer Bloom AI como especificación
Cuando una reconstrucción se desvía, lo primero que se va es el espaciado. Bloom AI lo evita publicando pasos de espaciado de 50px junto a la composición. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Bloom AI?
El brief capturado ocupa 3.900 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.
¿Qué puedo hacer con el brief de Bloom AI una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 3.900 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Necesito React y Lucide icons para recrear Bloom AI?
No. El brief es una especificación, no una lista de dependencias. Se escribió para React y Lucide icons, 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.
