Sobre esta plantilla
Lee Power AI como especificación de sección hero: los valores se escribieron antes de construir la página. El titular dice “The most powerful AI ever deployed in talent acquisition”, y el orden de sección hero gira alrededor de esa línea. La paleta se queda en negro #000000 de base, amarillo #FCD34D para la tipografía y índigo #A855F7 para los acentos, y el tipo es Geist. Se entrega como un único componente, y la captura se fija a 800x604 antes de escribir código. El movimiento se limita a transiciones de 100ms. Tenlo abierto mientras escribes: el brief de 3.838 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Escribe tu propio titular y luego rehace este diseño de sección hero en un único componente con las medidas intactas.
- Si la maquetación parte de un único componente, llévate primero un tamaño de display fijo de 220px y pasos de espaciado de 82px y no toques la paleta hasta que se asiente la cuadrícula.
- Equipos que rehacen su sección hero de SaaS a partir de la referencia de un competidor y quieren dejar claro un único componente antes de que nadie se comprometa con un framework.
Qué incluye
- Enlaces antes de la acción. La fila gasta el contraste en un solo punto: la acción #A855F7, con la marca y los enlaces retenidos sobre el color del texto. Los enlaces se componen a un tamaño menor que la marca, y la acción en #A855F7 es el único elemento de la barra con peso.
- Los pasos de espaciado van cifrados. La maquetación se resuelve con valores fijos (un tamaño de display fijo de 220px, pasos de espaciado de 82px y transiciones de 100ms), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- Logotipos en la línea base. Los logotipos se apoyan en la línea base en una sola fila compuesta en Geist, sin etiquetas, lo que mantiene implícita la afirmación y intacta la composición. Los logotipos se muestran a un solo tamaño, lo que evita que la tira compita con el titular. Poco contraste, tamaño pequeño y ningún encabezado.
- Una barra sin nada de más. Marca, enlaces y la acción #A855F7 comparten una línea base, y eso es lo que evita que una fila fina parezca accidental.
Movimiento e interacción
Movimiento horizontal continuo
La tira horizontal es el elemento más llamativo después del titular: movimiento continuo, #A855F7 en el elemento activo, y nunca le pide nada al lector. El elemento activo se marca con #A855F7 y no con un cambio de tamaño.
Tiempos en milisegundos
Los cambios de estado están fijados en 100ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento.
Por qué esta composición funciona para SaaS
El diseño defiende su argumento en una sola pantalla. El medio es una imagen fija en 800x604. El material pone la atmósfera, el texto pone la oferta, y un tamaño de display fijo de 220px y pasos de espaciado de 82px mantienen ambas cosas separadas. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Qué se mueve en Power AI
El presupuesto de animación está declarado: transiciones de 100ms, estados hover y pulsados y una marquesina en bucle. Nada en este tipo de sección hero se mueve sin un valor detrás. Nada se anima por gusto en este tipo de sección hero.
Hacer tuyo este tipo de sección hero
Cambiar la paleta de entrada es el error habitual. Altera el tono sin tocar la composición, y la maquetación sigue apoyada en un tamaño de display fijo de 220px y pasos de espaciado de 82px; haz primero el texto y el material, y la paleta al final. Sustituir es más barato que componer, y de eso se trata.
Preguntas frecuentes
¿Por qué la ficha nombra un único componente?
Power AI se construyó en un único componente, 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.
¿El prompt de Power AI es una especificación cerrada o un punto de partida?
El brief capturado ocupa 3.838 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.
¿Cómo trato los medios de Power 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 800x604.
