Sobre esta plantilla
Cognitra Feature se capturó a 640x470 y se conserva como especificación, no como imagen de galería. El titular dice “We provide all-in-one AI automation services in one place”, y el orden de sección de funciones gira alrededor de esa línea. La paleta es naranja apagado #877A73 de base y gris #D2CDC5 para la tipografía, con la tipografía Helvetica, Arial. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El movimiento se limita a transiciones de 0.08s. Cuando prepares el brief de cada sección de funciones de SaaS, parte de esta composición y sustituye el tema.
Pensado para
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 260px sin construir antes un prototipo.
- Quien le pase el brief de sección de funciones a un modelo usará el prompt de 3.241 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección de funciones cuyo titular tiene que seguir siendo tan largo como el de Cognitra Feature.
Qué incluye
- Fila superior: marca, enlaces y acción. Una barra fina ocupa la parte superior de sección de funciones, con la marca a la izquierda y los enlaces compuestos en Helvetica, Arial, de modo que la composición se lee antes como contenido que como interfaz. Por debajo de 260px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 260px los enlaces colapsan en lugar de saltar a una segunda línea. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Prueba en una sola fila. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de sección de funciones se convierta en una lista de funciones. Las cifras comparten la línea base del texto que las rodea, así la fila se lee como un solo objeto. Quita una cifra antes de reducir la etiqueta. La captura de la referencia es de 640x470.
- El comportamiento se define por ancho. El tamaño del tipo se resuelve con un clamp entre 26px y 32px y no con pasos fijos, así la línea display se mantiene proporcionada entre breakpoints en lugar de dar saltos. El menú móvil forma parte del mismo brief, así que el estado plegado también está diseñado.
- Navegación sin fondo propio. Las etiquetas son lo bastante cortas para caber en una línea a 260px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
Rápido, pero deliberado
Aquí el movimiento se mide en milisegundos: 0.08s. 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. El easing se especifica junto a la duración (0.08s), así que una reconstrucción no puede colar otra sensación sin avisar.
Estático a propósito
Esta se entrega como composición estática en 640x470, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
Por qué esta composición funciona para SaaS
La afirmación se hace una sola vez, en tamaño de display. “We provide all-in-one AI automation services in one place” hace ese trabajo desde el primer fotograma. En esta clase de sección de funciones todo lo demás se ordena alrededor de esa línea: navegación, la fila de cifras y el clip de fondo, y ninguna segunda promesa compite por la primera lectura. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Leer Cognitra Feature 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: un tamaño de display fijo de 14px, secciones de 100vh, pasos de espaciado de 32px, transiciones de 0.08s y un breakpoint de 260px. Nada de este tipo de sección de funciones depende de un valor por defecto.
Qué cambiar primero en Cognitra Feature
Una línea, una fuente y un acento: esas tres sustituciones son las que más cambian el diseño. Los valores que no deberían moverse son estos: un tamaño de display fijo de 14px, secciones de 100vh, pasos de espaciado de 32px, transiciones de 0.08s y un breakpoint de 260px. La composición es la parte reutilizable, y sobrevive a una marca distinta.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Cognitra Feature?
El brief capturado ocupa 3.241 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.
¿Cuánto de Cognitra Feature depende de React y Tailwind CSS?
Cognitra Feature 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 quedarme con las transiciones de Cognitra Feature y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.08s. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
