Agentic Build Intro / Presentación de construcción agente

Introducción de Construcción Agente (Agentic Build Intro)

Una pantalla de inicio, un escaneo de la página real y luego una construcción de la página real realizada por agentes cursor etiquetados. Sin framework, sin paso de compilación. Dos archivos: assets/layers.js y assets/layers.css.

Archivos

• assets/layers.js: el runtime. Lee la configuración, muestra la puerta (gate), ejecuta el escaneo y la construcción.
• assets/layers.css: todos los estilos, tematizados a través de propiedades personalizadas --lx-*.
• assets/head-snippet.html: las tres etiquetas que cada página necesita en su <head>.
• references/gate-design.html, references/scan-design.html: los diseños originales independientes. Úsalos como punto de partida si el propietario desea un nuevo diseño de puerta o escaneo.

Pasos

1. Haz una copia de seguridad del sitio. Luego copia layers.js y layers.css en él (rutas predeterminadas /js/layers.js y /css/layers.css; ajusta el fragmento si el sitio usa otras).

2. Agrega las etiquetas del head a cada página. Pega assets/head-snippet.html en el <head> de cada página. El script inline oculta la página antes de pintar solo cuando se ejecutará la intro, y la muestra de nuevo después de 4s si el runtime nunca carga.

3. Configura el texto de la puerta (gate). Usa atributos data-* en la etiqueta script o un objeto window.AgenticBuildIntro definido antes de que cargue el script. El objeto tiene prioridad sobre los atributos.

   Clave	Atributo	Valor por defecto
   name	data-name	document.title
   initials	data-initials	primeras letras de name
   title	data-title	oculto cuando está vacío
   location	data-location	oculto cuando está vacío
   timezone	data-timezone	hora local del visitante
   clock	data-clock	true
   cta	data-cta	Iniciar construcción del portafolio
   skip	data-skip	Saltar al sitio
   agents	data-agents	30 escritorio, 14 teléfono
   colors	data-colors	paleta incorporada (lista separada por comas)

   Usa solo los hechos que el propietario te haya proporcionado. Nunca inventes un nombre, título o ubicación. Cualquier texto adicional es texto de interfaz neutral.

4. Haz coincidir el sistema de diseño del sitio. Lee las variables CSS y fuentes del sitio, luego sobrescribe los tokens --lx-* en :root dentro de la hoja de estilos del propio sitio: --lx-bg, --lx-surface, --lx-stroke, --lx-text, --lx-muted, --lx-soft, --lx-ink, --lx-accent-1 a --lx-accent-4, --lx-font-display, --lx-font-body. El kit no carga fuentes. Mantén los colores propios del sitio y elige colores vibrantes para los agentes que se lean sobre su fondo.

5. No cambies cómo funciona el escaneo. Los contornos del escaneo provienen de la misma lista de elementos que usa la construcción, por lo que los contornos se sitúan exactamente donde aterriza el contenido real y los agentes de escaneo transfieren a los agentes de construcción en los mismos puntos, colores y etiquetas. Nunca reemplaces con un wireframe genérico.

6. Mantén estos comportamientos.

   • Las cajas se arrastran con manijas y etiquetas de An x Al, el texto se escribe con un cursor, las líneas guía parpadean mientras los agentes trabajan.
   • Las imágenes se revelan en aproximadamente 1.7s con una barrido escalonado de arriba a abajo, línea de escaneo, rayas tenues y una transición de escala de grises a color.
   • Los tiempos predeterminados son suaves pero dinámicos, todos con un "ease-in-out" suave: los cursores viajan de 0.5 a 0.7s, las cajas se arrastran durante 0.6 a 0.8s, el texto se escribe a aproximadamente 15ms por carácter con bloques largos limitados a cerca de 1.4s, y cada agente hace una pausa de aproximadamente 150ms entre tareas. La velocidad se establece desde el tamaño de la página al inicio y se acelera durante la construcción si se retrasa respecto a un objetivo de unos 23 segundos en escritorio y 20 en teléfonos, permitiendo que los agentes comiencen más abajo del pliegue cuando sea necesario. Los agentes siempre construyen cada elemento hasta el pie de página. Un límite de seguridad de 45 segundos es la única parada forzada.
   • El modo "follow" está activado por defecto: cuando el siguiente objetivo de construcción cae por debajo de aproximadamente el 65% de la ventana gráfica, la página se desplaza hacia abajo en un movimiento lento para que el trabajo se sitúe aproximadamente al 30% desde la parte superior. Nunca se desplaza de vuelta al principio al final. Con movimiento reducido, salta en lugar de deslizarse.
   • Se ejecuta una vez por sesión. ?build=1 lo repite, ?build=0 lo salta. Enter inicia, Esc salta la puerta; la rueda, clic, toque o cualquier tecla saltan una intro en curso.
   • Funciona hasta 390px de ancho con menos agentes en teléfonos. prefers-reduced-motion salta la intro.

7. Reglas de código. Sin comentarios de código, sin guiones largos (em dash) en el texto, sin figuras humanas generadas por IA.

8. Verifica grabando. Ejecuta node --check en el JS. Sirve el sitio y graba un video de Playwright a 1280x800 y 390x844: abre ?build=1, haz clic en el botón de inicio, graba de 20 a 60s. Extrae fotogramas de la puerta, escaneo, transferencia, construcción y estado final, verifica errores de página y corrige lo que veas. Confirma que cada página existente aún devuelva 200.

9. Reporta con el enlace en vivo, una captura de pantalla de la puerta y la grabación.