Sobre esta plantilla
Lee NexaCore Results como especificación de sección de funciones: los valores se escribieron antes de construir la página. El titular dice “NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track”, y el orden de sección de funciones gira alrededor de esa línea. La paleta es blanco #EBEBEB de base y índigo #C86FFF para los acentos, con la tipografía Mazzard H. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. Es más útil cuando cada sección de funciones de IA y SaaS tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Equipos que construyen su sección de funciones de un producto de IA o SaaS y necesitan dejar constancia de un marco de 640x466 antes de que salga un presupuesto.
- Los responsables de marketing que hereden un diseño de sección de funciones usarán tipografía de 14px a 18px y esquinas de 36px para comprobar que una reescritura mantuvo la escala.
- Quien le pase el brief de sección de funciones a un modelo usará el prompt de 9.261 caracteres como punto de partida.
Qué incluye
- Valores que puedes comprobar. Los tamaños se citan, no se heredan: tipografía de 14px a 18px, esquinas de 36px y pasos de espaciado de 20px. Cambia la tipografía o el texto y esas relaciones se mantienen. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
- Cifras tratadas como tipografía. Las estadísticas se tratan como tipografía: cifras al tamaño display, etiquetas en el paso más pequeño del brief y todo en #C86FFF o en el color del texto, nunca en una tarjeta de color. Las cifras llevan el acento #C86FFF mientras todo lo que las rodea se queda en el color del texto.
- Todas las medidas están escritas. El espaciado se cita igual (tipografía de 14px a 18px, esquinas de 36px y pasos de espaciado de 20px), no como una escala que crece sola.
- El comportamiento se define por ancho. El brief usa un clamp entre 14px y 18px para el titular, y eso es lo que evita que una línea larga se rompa de forma torpe. El tipo cambia de tamaño, no de papel, a medida que se estrecha el viewport. Diseña la maquetación estrecha, no la aprietes.
Movimiento e interacción
Movimiento que no estorba
Esta se entrega como composición estática en 640x466, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El movimiento se trata como respuesta y no como adorno.
Casi nada de movimiento
El brief deja fuera la animación y deja que la maquetación de 640x466 sostenga la página, con el hover y la pulsación como únicos cambios. Deja el movimiento en los controles.
Leer NexaCore Results como especificación
La mayoría de las referencias muestra el resultado y se guarda las cifras. Esta lo invierte: publica tipografía de 14px a 18px, esquinas de 36px y pasos de espaciado de 20px junto a la página, para que el resultado se pueda reproducir y no aproximar. Nada de este tipo de sección de funciones depende de un valor por defecto.
El brief de SaaS se sostiene
El diseño defiende su argumento en una sola pantalla. El medio es una imagen fija en 640x466. El material pone la atmósfera, el texto pone la oferta, y tipografía de 14px a 18px y esquinas de 36px mantienen ambas cosas separadas. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
El orden detrás de sección de funciones
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 14px a 18px y esquinas de 36px), porque la secuencia sostiene la página y no es decorativa. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de NexaCore Results?
El brief capturado ocupa 9.261 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 NexaCore Results?
NexaCore Results 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 NexaCore Results?
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 640x466.
