Sobre esta plantilla
Asme 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 esquema de color es negro #000000 de base y gris #C9CAB9 para la tipografía, y la página está compuesta en Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 800x582 antes de escribir código. La página reduce el movimiento a transiciones de 500ms. Tenlo abierto mientras escribes: el brief de 4.360 caracteres es la parte que se traslada a tu propia página.
Pensado para
- 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 Asme.
- La composición sirve a equipos de contenidos que van a cambiar el titular y necesitan que los pesos de Instrument Serif mantengan el mismo ritmo.
- Si tu tipografía no es Instrument Serif, los desarrolladores front-end deberían volver a medir el titular antes de reajustar el tiempo de la entrada.
Qué incluye
- La barra sigue la cuadrícula. La navegación es una sola fila, sin un segundo nivel debajo. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto.
- Aquí nada se hereda. El brief declara sus tamaños en la captura (transiciones de 500ms), 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. Verifica un remontaje contra los mismos números.
- Cifras a tamaño display. Las cifras se componen en Instrument Serif a un tamaño más cercano al titular que al texto corrido. La fila se alinea al mismo margen que el titular de arriba.
- Primero el texto, después el adorno. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 800x582, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Tiempos cortos y parejos
Aquí el movimiento se mide en milisegundos: 500ms. 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.
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 800x582 se queda quieta y solo se mueven los elementos que responden a ti. El movimiento se trata como respuesta y no como adorno.
El reflujo de sección hero
Este tipo de sección hero se compone a 800x582 y luego se recompone para anchos estrechos: la escala es fluida en lugar de escalonada, así que la versión de móvil es una decisión y no un apretujón. Un apretujón habría sido más barato y no aguantaría.
Cómo ordena Asme la primera lectura
Aquí nada compite con la primera decisión. El material de apoyo espera por debajo, y navegación, el titular, la fila de cifras, el clip de fondo y el pie de página se bastan para sostener la parte alta de la página. Quien busca SaaS recibe la oferta antes que las opciones.
Los tiempos detrás de sección hero
El brief ata cada transición a un valor (transiciones de 500ms y estados hover y pulsados). 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.
Preguntas frecuentes
¿El prompt de Asme es una especificación cerrada o un punto de partida?
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 800x582. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Asme 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 Asme 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 800x582.
