Sobre esta plantilla
AI Workflow Hero es una referencia de trabajo para un producto de IA o SaaS: el desglose de sección hero, con la maquetación medida y lista para recrear. El color se limita a verde intenso #1F2A1D de base y la página se compone en Inter. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. El movimiento se queda en transiciones de 400ms y cubic-bezier(0.22,1,0.36,1). Tenlo abierto mientras escribes: el brief de 16.580 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de sección hero sirve a equipos que tienen que justificar un marco de 640x470 ante alguien que no estaba en el kickoff.
- 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 AI Workflow Hero.
- Los diseñadores que especifican movimiento a partir de un sitio en vivo usarán el valor de 400ms y la curva cubic-bezier(0.22,1,0.36,1) sin cambios.
Qué incluye
- La barra sigue la cuadrícula. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. La fila se dimensiona a partir de su propia tipografía, no de una altura de cabecera fija.
- Aquí nada se hereda. El brief declara sus tamaños en la captura (pasos de espaciado de 10px, transiciones de 400ms y easing cubic-bezier(0.22,1,0.36,1)), así que un remontaje se puede verificar en lugar de aproximar. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- Números en vez de una afirmación. La fila se sitúa arriba en sección hero como prueba y no como adorno. La fila se alinea al mismo margen que el titular de arriba. La captura de la referencia es de 640x470.
- La navegación es fina a propósito. La navegación es una sola fila, sin un segundo nivel debajo. Diseña el estado colapsado antes de añadir un sexto enlace.
Movimiento e interacción
Tiempos cortos y parejos
Aquí el movimiento se mide en milisegundos: 400ms usando cubic-bezier(0.22,1,0.36,1). Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. Como los valores son cortos, una reconstrucción que los alargue se nota de inmediato.
Estados de puntero, nada más
Solo los controles responden al puntero (estados hover en los botones y los enlaces y no en todas las tarjetas), así que la página se siente viva sin convertir cada elemento en un objetivo. Como los estados son simples, se portan a cualquier sistema de componentes. Unos pocos estados fiables valen más que una lista larga de efectos.
Los tiempos detrás de sección hero
El brief ata cada transición a un valor (transiciones de 400ms, estados hover y pulsados y un lienzo en vivo). Eso es lo que evita que la página se sienta como una plantilla con un preset de animación superpuesto. Nada se anima por gusto en este tipo de sección hero.
Cómo ordena AI Workflow Hero la primera lectura
Aquí nada compite con la primera decisión. El material de apoyo espera por debajo, y navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo se bastan para sostener la parte alta de la página. Quien busca SaaS recibe la oferta antes que las opciones.
El argumento de sección hero
Un hero genérico y este tipo de sección hero usan las mismas piezas. Aquí el orden lo dan navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo y todo se mide con pasos de espaciado de 10px, transiciones de 400ms y easing cubic-bezier(0.22,1,0.36,1), así que la pantalla se lee como una secuencia y no como un contenedor. AI Workflow Hero enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿El prompt de AI Workflow Hero es una especificación cerrada o un punto de partida?
El brief capturado ocupa 16.580 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.
¿Necesito React y Tailwind CSS para recrear AI Workflow Hero?
AI Workflow Hero 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.
¿Cómo se comportan las transiciones de 400ms en AI Workflow Hero?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 400ms usando cubic-bezier(0.22,1,0.36,1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
