MD412/agentic-build-intro

Introduction de construction agentique

Un écran de démarrage, un scan de la page réelle, puis une construction de la page réelle par des agents curseurs étiquetés. Aucun framework, aucune étape de build. Deux fichiers : assets/layers.js et assets/layers.css.

Fichiers

• assets/layers.js : le runtime. Lit la configuration, affiche la porte, exécute le scan et la construction.
• assets/layers.css : tous les styles, thématisés via les propriétés personnalisées --lx-*.
• assets/head-snippet.html : les trois balises dont chaque page a besoin dans son <head>.
• references/gate-design.html, references/scan-design.html : les designs autonomes originaux. Utilisez-les comme point de départ si le propriétaire souhaite un nouveau design de porte ou de scan.

Étapes

1. Sauvegardez le site. Copiez ensuite layers.js et layers.css dedans (chemins par défaut /js/layers.js et /css/layers.css ; ajustez l'extrait si le site utilise d'autres chemins).

2. Ajoutez les balises d'en-tête à chaque page. Collez assets/head-snippet.html dans le <head> de chaque page. Le script en ligne cache la page avant le rendu uniquement lorsque l'intro sera exécutée, et la réaffiche après 4s si le runtime ne se charge jamais.

3. Définissez le texte de la porte. Utilisez les attributs data-* sur la balise script ou un objet window.AgenticBuildIntro défini avant le chargement du script. L'objet prime sur les attributs.

   Clé	Attribut	Valeur par défaut
   name	data-name	document.title
   initials	data-initials	premières lettres de name
   title	data-title	masqué quand vide
   location	data-location	masqué quand vide
   timezone	data-timezone	heure locale du visiteur
   clock	data-clock	true
   cta	data-cta	Lancer la construction du portfolio
   skip	data-skip	Passer au site
   agents	data-agents	30 bureau, 14 téléphone
   colors	data-colors	palette intégrée (liste séparée par des virgules)

   Utilisez uniquement les faits que le propriétaire vous a donnés. N'inventez jamais un nom, un titre ou une localisation. Tout texte supplémentaire est un texte d'interface neutre.

4. Faites correspondre le système de design du site. Lisez les variables CSS et les polices du site, puis remplacez les jetons --lx-* sur :root dans la feuille de style du site : --lx-bg, --lx-surface, --lx-stroke, --lx-text, --lx-muted, --lx-soft, --lx-ink, --lx-accent-1 à --lx-accent-4, --lx-font-display, --lx-font-body. Le kit ne charge pas de polices. Conservez les couleurs du site et choisissez des couleurs d'agent vives qui se lisent sur son arrière-plan.

5. Ne modifiez pas le fonctionnement du scan. Les contours du scan proviennent de la même liste d'éléments que la construction, donc les contours se trouvent exactement là où le contenu réel atterrit et les agents de scan passent le relais aux agents de construction aux mêmes endroits, couleurs et étiquettes. Ne remplacez jamais par une maquette générique.

6. Conservez ces comportements.

   • Les boîtes sont traînées avec des poignées et des étiquettes L x H, le texte est tapé avec un curseur, des lignes de guidage clignotent pendant le travail des agents.
   • Les images se révèlent en environ 1,7 s avec un balayage progressif du haut vers le bas, une ligne de scan, de fines rayures et un passage du gris à la couleur.
   • Les vitesses par défaut sont fluides mais vives, avec une légère accélération/décélération : les curseurs se déplacent en 0,5 à 0,7 s, les boîtes sont traînées en 0,6 à 0,8 s, le texte est tapé à environ 15 ms par caractère avec des longs blocs plafonnés à près de 1,4 s, et chaque agent fait une pause d'environ 150 ms entre les tâches. La vitesse est définie à partir de la taille de la page au départ et s'accélère pendant la construction si elle prend du retard sur un objectif d'environ 23 secondes sur bureau et 20 sur téléphones, permettant aux agents de commencer plus bas dans la page si nécessaire. Les agents construisent toujours chaque élément jusqu'au pied de page. Une sécurité de 45 secondes est le seul arrêt brutal.
   • Le suivi est activé par défaut : lorsque la prochaine cible de construction se trouve en dessous d'environ 65% de la zone d'affichage, la page descend doucement en un seul mouvement lent pour que le travail se situe à environ 30% du haut. Elle ne remonte jamais en haut à la fin. Avec mouvement réduit, elle saute au lieu de glisser.
   • S'exécute une fois par session. ?build=1 rejoue, ?build=0 saute. Entrée démarre, Échap saute la porte ; molette, clic, toucher ou n'importe quelle touche saute une intro en cours.
   • Fonctionne jusqu'à 390 px de large avec moins d'agents sur téléphones. prefers-reduced-motion saute l'intro.

7. Règles de code. Pas de commentaires de code, pas de tirets cadratins dans le texte, pas de figures humaines générées par IA.

8. Vérifiez en enregistrant. Exécutez node --check sur le JS. Servez le site et enregistrez une vidéo Playwright à 1280x800 et 390x844 : ouvrez ?build=1, cliquez sur le bouton de démarrage, enregistrez 20 à 60 s. Extrayez des images pour la porte, le scan, le passage de relais, la construction et l'état final, vérifiez les erreurs de page, et corrigez ce que vous voyez. Confirmez que chaque page existante renvoie toujours un code 200.

9. Rapportez avec le lien en direct, une capture d'écran de la porte et l'enregistrement.