Sobre esta plantilla
Antes de rehacer cada sección de funciones para un producto de IA o SaaS, lee NexaCore Control: la composición y la especificación que hay detrás están aquí. El titular de la propia página dice “Constant re-verification because source data can't be trusted”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es blanco #EBEBEB de base, y la página está compuesta en Mazzard H. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. Tómalo como el brief de sección de funciones para un producto de IA o SaaS que tiene que aguantar una reconstrucción, no solo un primer vistazo.
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 640x468 antes de que salga un presupuesto.
- Agencias que llevan su sección de funciones de un producto de IA o SaaS a una propuesta y quieren citar una cuadrícula de 3 columnas y esquinas de 18px en la presentación para que el presupuesto siga en pie tras el kickoff.
- Pensado para un fundador en solitario que saca un único diseño de sección de funciones para un producto de IA o SaaS y no tiene ningún sistema de diseño detrás.
Qué incluye
- El brief nombra los pasos. Los tamaños se leyeron del render en 640x468: una cuadrícula de 3 columnas, esquinas de 18px y pasos de espaciado de 12px. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Cifras a tamaño display. Las cifras se componen como tipo y no dentro de una tarjeta: Mazzard H 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.
- Tamaños fijados en el brief. El espaciado se cita igual (una cuadrícula de 3 columnas, esquinas de 18px y pasos de espaciado de 12px), no como una escala que crece sola.
- Números sobre la línea base. Las cifras se componen en Mazzard H a un tamaño más cercano al titular que al texto corrido.
Movimiento e interacción
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 640x468 se queda quieta y solo se mueven los elementos que responden a ti. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace. No hacen falta líneas de tiempo de scroll.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 640x468 sostenga la página, con el hover y la pulsación como únicos cambios. La quietud es una opción válida.
El orden detrás de sección de funciones
Podrías reordenar estos bloques y la página seguiría cargando. Pero dejaría de leerse como un argumento: la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo son una secuencia, y una cuadrícula de 3 columnas y esquinas de 18px solo funcionan en ese orden. Quien busca SaaS recibe la oferta antes que las opciones.
Las cifras detrás de sección de funciones
El coste de una escala fija es menos margen para improvisar. Con una cuadrícula de 3 columnas y esquinas de 18px la composición se mantiene coherente, pero un elemento nuevo hay que encajarlo y no simplemente colocarlo. Nada de este tipo de sección de funciones depende de un valor por defecto.
Qué se sostiene para IA y SaaS
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 640x468. El marco se queda callado y una cuadrícula de 3 columnas y esquinas de 18px mantienen a quien lee sobre el texto. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de NexaCore Control?
El brief capturado ocupa 8.666 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.
¿Cómo está organizada esta ficha de NexaCore Control?
Todo lo que se cita en la página procede del brief capturado de 8.666 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Necesito React y Tailwind CSS para recrear NexaCore Control?
NexaCore Control 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.
