Sobre esta plantilla
Antes de rehacer cada sección de funciones para un producto de IA o SaaS, lee Arceage Stats: la composición y la especificación que hay detrás están aquí. “Maximize Your Yield” es la línea que la maquetación está pensada para sostener. El esquema de color es negro #101010 de base, y la página está compuesta en Instrument Serif. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. Parte del brief capturado y ajusta la composición de sección de funciones en lugar de empezar de cero.
Pensado para
- Equipos de Studio que redactan el brief de un desarrollo y buscan en un marco de 640x470 algo concreto a lo que reaccionar.
- Si tres personas tienen que editar el diseño de sección de funciones, dales a los responsables de contenidos un tamaño de display fijo de 56px y pasos de espaciado de 120px en vez de una captura.
- Quien le pase el brief de sección de funciones a un modelo usará el prompt de 7.826 caracteres como punto de partida.
Qué incluye
- Todas las medidas están escritas. Toda medida del brief es un número que puedes volver a medir: un tamaño de display fijo de 56px y pasos de espaciado de 120px. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
- Etiquetas bajo las cifras. Las cifras se componen como tipo y no dentro de una tarjeta: Instrument Serif al tamaño display, con las etiquetas un paso por debajo. La fila pertenece a la primera pantalla y no a una banda aparte, lo que mantiene la prueba cerca de la afirmación. Quita una cifra antes de reducir la etiqueta.
- La composición es el contenido. La composición de sección de funciones está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 640x470 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 640x470, y por eso se sostiene cuando cambia el texto.
- Los pasos de espaciado van cifrados. El espaciado se cita igual (un tamaño de display fijo de 56px y pasos de espaciado de 120px), no como una escala que crece sola.
Movimiento e interacción
Casi nada de movimiento
Esta se entrega como composición estática en 640x470, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El movimiento se trata como respuesta y no como adorno. Deja el movimiento en los controles.
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 640x470 se queda quieta y solo se mueven los elementos que responden a ti.
Qué cambiar primero en Arceage Stats
Empieza por el texto, no por el color. Reescribe “Maximize Your Yield” como una sola frase sobre tu producto y colócala en Instrument Serif al tamaño que usa el brief. Tu acento tiene que superar la misma prueba de contraste que el de la referencia.
Cómo ordena Arceage Stats la primera lectura
Aquí nada compite con la primera decisión. “Maximize Your Yield” hace ese trabajo desde el primer fotograma. El material de apoyo espera por debajo, y el titular, la fila de cifras 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.
Qué gana un producto de IA o SaaS aquí
Frente a un hero de plantilla, la diferencia está en lo que falta. No hay cuadrícula de tarjetas, ni carrusel, ni una segunda llamada a la acción: solo el titular, la fila de cifras y el clip de fondo, con un tamaño de display fijo de 56px y pasos de espaciado de 120px como referencia. Arceage Stats 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 Arceage Stats es una especificación cerrada o un punto de partida?
El brief capturado ocupa 7.826 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 Arceage Stats?
Arceage Stats 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.
¿Qué gobierna el movimiento en Arceage Stats?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de menos de un segundo. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene. La captura de la referencia es de 640x470.
