Sobre esta plantilla
Digitwist AI Builder es la referencia de sección hero para un producto de IA o SaaS, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. “Design at the speed of thought” es la línea que la maquetación está pensada para sostener. La paleta es azul brillante #3054FF de base y azul apagado #B4C0FF para la tipografía, con la tipografía Instrument Sans. La entrega es React y Lucide icons: una página, sin plugins y sin herramientas de build entre tú y el diseño. El movimiento se queda en transiciones de 0.6s. Tenlo abierto mientras escribes: el brief de 6.001 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos de Studio que redactan el brief de un desarrollo y buscan en un marco de 800x556 algo concreto a lo que reaccionar.
- Los responsables de marketing que hereden un diseño de sección hero usarán tipografía de 20px a 136px y pasos de espaciado de 120px para comprobar que una reescritura mantuvo la escala.
- 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 Digitwist AI Builder.
Qué incluye
- Fila superior, una acción. La navegación es una sola fila, sin un segundo nivel debajo. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado.
- Una escala para tipo y marco. Tipo y espaciado salen aquí de una sola lista: tipografía de 20px a 136px, pasos de espaciado de 120px y transiciones de 0.6s. Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Insignia sobre el pliegue. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Instrument Sans al paso más pequeño, y nada más compite por ese hueco. La píldora se compone en el paso más pequeño del brief, así se lee como etiqueta y no como un segundo título. Retírala cuando la noticia ya no sea nueva.
- Estructura en una sola pantalla. La composición de sección hero está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 800x556 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 800x556, y por eso se sostiene cuando cambia el texto. Nada decorativo tiene sitio por encima del pliegue.
Movimiento e interacción
El tiempo va en el brief
Los controles se resuelven en 0.6s, lo bastante rápido para que la página responda al tocarla y no después. El easing se especifica junto a la duración (0.6s), así que una reconstrucción no puede colar otra sensación sin avisar. Una duración por comportamiento.
Estático a propósito
Esta se entrega como composición estática en 800x556, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El movimiento se trata como respuesta y no como adorno.
El orden detrás de sección hero
Un orden estricto te cuesta flexibilidad después. Añade una sección por encima y habrá que recortar de nuevo las cifras (tipografía de 20px a 136px y pasos de espaciado de 120px), porque la secuencia sostiene la página y no es decorativa. Quien busca SaaS recibe la oferta antes que las opciones.
Leer Digitwist AI Builder como especificación
Casi todas las decisiones de aquí son un valor que puedes comprobar: tipografía de 20px a 136px, pasos de espaciado de 120px y transiciones de 0.6s. El medio es una imagen fija en 800x556. El tipo se queda en Instrument Sans, 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
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, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo en una sola secuencia. Digitwist AI Builder enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Digitwist AI Builder?
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 800x556. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Digitwist AI Builder depende de React y Lucide icons?
Digitwist AI Builder se construyó en React y Lucide icons, 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 trato los medios de Digitwist AI Builder 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 800x556.
