Sobre esta plantilla
HAUL! da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. “`. Next to the logo block, add the text” es la línea que la maquetación está pensada para sostener. La paleta se queda en blanco #FFFFFF de base y naranja #BB420D para los acentos, y el tipo es Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1832x1354 antes de escribir código. El movimiento se limita a transiciones de 0.8s, lo bastante discreto para que el texto siga mandando. Úsalo cuando tu pie de página necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Pensado para un fundador en solitario que saca un único diseño de pie de página para un producto de IA o SaaS y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de pie de página a un modelo usará el prompt de 4.329 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de pie de página cuyo titular tiene que seguir siendo tan largo como el de HAUL!.
Qué incluye
- Los pasos de espaciado van cifrados. Aquí nada se mide a ojo. La especificación fija secciones de 50vh y transiciones de 0.8s, y el resto de la maquetación se deriva de esos valores. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- Tarjetas sin bordes. Donde iría un bloque de texto corrido, esta página coloca un conjunto de paneles, y eso es lo que mantiene pie de página fácil de escanear. Los paneles comparten la tipografía de interfaz a un solo tamaño, lo que evita que la cuadrícula se convierta en una segunda maquetación.
- Una paleta con una sola voz. La paleta es un fondo y una señal (blanco #FFFFFF y naranja #BB420D), con el segundo color reservado para las acciones. El contraste entre #BB420D y blanco #FFFFFF es lo que hace legible el acento en tamaños pequeños.
- Números que llegan al montaje. El espaciado se cita igual (secciones de 50vh y transiciones de 0.8s), no como una escala que crece sola.
Movimiento e interacción
La interacción está en los controles
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe.
La página responde al scroll
Parallax es el único comportamiento de scroll de la página, así que el efecto tiene un lugar definido en la composición. El comportamiento de scroll se mide contra la misma maquetación de la página estática, así que nada se desplaza al quitarlo. No apiles un segundo efecto de scroll.
Qué cambiar primero en HAUL!
Empieza por la promesa, no por el adorno. Reescribe “`. Next to the logo block, add the text” como una sola frase que diga a qué te dedicas y compónla en Inter al tamaño de display que usa el brief. Sustituye naranja #BB420D por tu acento de marca y compáralo con blanco #FFFFFF antes de tocar nada más. El marco y la escala son lo que hay que dejar en paz.
Leer HAUL! como especificación
No se puede ajustar una composición a ojo cuando la reconstruyen dos personas. El brief elimina la discusión y lo deja por escrito una sola vez: secciones de 50vh y transiciones de 0.8s. Nada de este tipo de pie de página depende de un valor por defecto.
El reflujo de pie de página
Aquí responsive significa que cambia la escala, no la jerarquía: la sección se mantiene a 50vh. El texto se queda por encima del pliegue, los controles siguen siendo lo bastante grandes para tocarlos y se respeta el movimiento reducido. No se elimina nada importante en anchos estrechos.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de HAUL!?
El brief capturado ocupa 4.329 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.
¿Por qué la ficha nombra React y Tailwind CSS?
HAUL! 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.
¿De dónde sale el diseño de HAUL!?
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 1832x1354.
