Sobre esta plantilla
IntelligentX se capturó a 640x462 y se conserva como especificación, no como imagen de galería. La paleta se queda en blanco #EDEEF5 de base, negro #1A1A1A para la tipografía y lima brillante #9FFF00 para los acentos, y el tipo es Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 640x462 antes de escribir código. Tenlo abierto mientras escribes: el brief de 4.182 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 secciones de 110vh y pasos de espaciado de 16px 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 IntelligentX.
- Si tu marca tiene dos colores, los responsables de marketing deberían decidir cuál asume el papel de #9FFF00 y cuál el de #EDEEF5.
Qué incluye
- Enlaces antes de la acción. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #9FFF00, todo en la capa superior de sección hero y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #9FFF00 es el único elemento de la barra con peso.
- Valores que puedes comprobar. Los valores son la especificación: secciones de 110vh y pasos de espaciado de 16px, capturados en 640x462 y no deducidos de una captura. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- La barra sigue la cuadrícula. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Todas las medidas están escritas. El espaciado se cita igual (secciones de 110vh y pasos de espaciado de 16px), no como una escala que crece sola.
Movimiento e interacción
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 640x462 sostenga la página, con el hover y la pulsación como únicos cambios. El movimiento se trata como respuesta y no como adorno.
Movimiento que no estorba
Esta se entrega como composición estática en 640x462, así que la jerarquía tiene que funcionar sin movimiento, y funciona. La quietud es una opción válida.
Cómo ordena IntelligentX la primera lectura
El brief ocupa 4.182 caracteres y nombra el orden de lectura sin rodeos: navegación, la insignia de anuncio, la fila de cifras, el formulario y el clip de fondo, con secciones de 110vh y pasos de espaciado de 16px entre medias. Quien busca SaaS recibe la oferta antes que las opciones.
Qué cambiar primero en IntelligentX
Cambiar la paleta de entrada es el error habitual. Altera el tono sin tocar la composición, y la maquetación sigue apoyada en secciones de 110vh y pasos de espaciado de 16px; haz primero el texto y el material, y la paleta al final. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
El argumento de sección hero
Supón que tu material grita más que tu texto. Es el caso para el que está construida esta composición. El medio es una imagen fija en 640x462. El marco se queda callado y secciones de 110vh y pasos de espaciado de 16px mantienen a quien lee sobre el texto. IntelligentX 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 IntelligentX es una especificación cerrada o un punto de partida?
El brief capturado ocupa 4.182 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.
¿Puedo reconstruir este diseño de sección hero de IntelligentX con otro stack?
IntelligentX 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 IntelligentX 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 640x462.
