Sobre esta plantilla
AI Workflow Agents muestra una forma de construir este tipo de página de portafolio para un producto de IA o SaaS y publica las instrucciones que lo generaron. El titular de la propia página dice “Axon — Digital Workers for Mundane Workflows”, y la composición se construye alrededor de esas palabras exactas. El color se limita a blanco #E8E6F1 de base, índigo intenso #1B133C para la tipografía y magenta #7A4064 para los acentos y la página se compone en Instrument Serif. El montaje es un único componente; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El brief gasta su presupuesto de movimiento en un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de página de portafolio en un producto de IA o SaaS, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Los desarrolladores front-end que tengan que llevarlo a producción sin más ayuda usarán un único componente como implementación de referencia.
- Equipos externos que se hacen cargo de su página de portafolio y necesitan fijar un marco de 1444x1080 en el repositorio antes del primer commit.
- Escribe tu propio titular y luego rehace este diseño de página de portafolio en un único componente con las medidas intactas.
Qué incluye
- Enlaces antes de la acción. La fila gasta el contraste en un solo punto: la acción #7A4064, con la marca y los enlaces retenidos sobre el color del texto. Los enlaces se componen a un tamaño menor que la marca, y la acción en #7A4064 es el único elemento de la barra con peso.
- Valores que puedes comprobar. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh y el montaje tiene que dar esos valores. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- El bucle es el fondo. Un único clip silenciado y en bucle llena el marco a 1444x1080 y 6,9s, recortado para cubrir, con el texto apilado encima. El brief mantiene las superposiciones fuera del vídeo para que nada le reste color. Un fotograma de póster a 1444x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- La barra sigue la cuadrícula. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador.
Movimiento e interacción
Hover, pero con moderación
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas. Los estados están nombrados en el brief, así que la página no depende de ninguna librería de efectos hover. Mantén pequeña la capa interactiva.
Movimiento ambiente sin librería de scroll
Un clip de 6,9s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco. Graba o exporta a 1444x1080 o más ancho.
El reflujo de página de portafolio
En ancho, la composición es densa; en estrecho, la sección se mantiene a 100vh. Los dos estados están descritos en el brief. Los dos estados están descritos en el mismo brief.
Qué se mueve en AI Workflow Agents
Traslada el movimiento al final. El brief lo fija como estados hover y pulsados y un bucle de 6,9s, y eso es más fácil de igualar cuando la maquetación ya está en su sitio. Nada se anima por gusto en este tipo de página de portafolio.
Qué cambiar primero en AI Workflow Agents
Empieza por la promesa, no por el adorno. Reescribe “Axon — Digital Workers for Mundane Workflows” como una sola frase que diga a qué te dedicas y compónla en Instrument Serif al tamaño de display que usa el brief. Sustituye magenta #7A4064 por tu acento de marca y compáralo con blanco #E8E6F1 antes de tocar nada más. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de AI Workflow Agents?
El brief capturado ocupa 3.215 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 AI Workflow Agents depende de un único componente?
No. El brief es una especificación, no una lista de dependencias. Se escribió para un único componente, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
¿El brief de AI Workflow Agents es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 3.215 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
