Sobre esta plantilla
Antes de rehacer cada sección hero para un producto de IA o SaaS, lee Stellar AI: la composición y la especificación que hay detrás están aquí. Abre con “Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es blanco #FFFFFF de base y azul intenso #101117 para la tipografía, y la página está compuesta en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 800x708 antes de escribir código. El brief gasta su presupuesto de movimiento en transiciones de 0.1s. Tenlo abierto mientras escribes: el brief de 3.973 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Si hay que renunciar al movimiento, el diseño de sección hero sigue leyéndose porque un tamaño de display fijo de 80px y pasos de espaciado de 30px se encargan de la jerarquía.
- 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 Stellar AI.
- Si redibujas Stellar AI con una tipografía propia, conserva las proporciones de Inter en su sección hero o la escala de tamaños dejará de cuadrar.
Qué incluye
- La navegación es fina a propósito. 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 acción lleva el acento mientras los enlaces se quedan en el color del texto, así la jerarquía de la barra coincide con la de la página que tiene debajo.
- Tamaños fijados en el brief. Tipo y espaciado salen aquí de una sola lista: un tamaño de display fijo de 80px, pasos de espaciado de 30px y transiciones de 0.1s. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- La composición es el contenido. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 800x708, y por eso se sostiene cuando cambia el texto.
- Navegación sin fondo propio. La navegación es una sola fila, sin un segundo nivel debajo. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
Movimiento e interacción
Duraciones cortas y nombradas
El hover, la pulsación y el foco se resuelven en 0.1s, que es lo que hace que la interfaz se sienta inmediata. El easing se especifica junto a la duración (0.1s), así que una reconstrucción no puede colar otra sensación sin avisar.
Respuesta en los controles
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas y pestañas o un acordeón que intercambia contenido en el sitio, así que el resto de la maquetación es una composición fija. Los estados salen de la paleta de la propia página y no de un valor por defecto de componente. Mantén los efectos de puntero en los controles.
El orden detrás de sección hero
Aquí el orden es el diseño: navegación, la insignia de anuncio, la fila de cifras, la fila de clientes y la cuadrícula de tarjetas se colocan para que la oferta llegue antes que la prueba, y la distancia entre ambas la marcan un tamaño de display fijo de 80px y pasos de espaciado de 30px. Quien busca SaaS recibe la oferta antes que las opciones.
Por qué esta composición funciona para SaaS
Podrías reconstruirlo como una pila de tarjetas sueltas y perderías solo el argumento. Esta clase de sección hero se lee como una única decisión: navegación, la insignia de anuncio, la fila de cifras, la fila de clientes y la cuadrícula de tarjetas en una sola secuencia. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Leer Stellar AI como especificación
Compara esto con una plantilla que llama preferencia a su espaciado. Aquí los mismos valores tienen nombre (un tamaño de display fijo de 80px, pasos de espaciado de 30px y transiciones de 0.1s), así que un cambio o los respeta o rompe la composición a la vista. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿El prompt de Stellar AI 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 800x708. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Stellar AI se construyó en React y Tailwind CSS, 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.
¿Puedo usar Stellar AI en un proyecto de cliente?
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 800x708.
