MD412/agentic-build-intro

Agentic Build Intro

Ein Startbildschirm, ein Scan der echten Seite, dann ein Aufbau der echten Seite durch beschriftete Cursor-Agenten. Kein Framework, kein Build-Schritt. Zwei Dateien: assets/layers.js und assets/layers.css.

Dateien

• assets/layers.js: die Laufzeit. Liest die Konfiguration aus, zeigt das Tor, führt den Scan und den Bau aus.
• assets/layers.css: alle Styles, thematisiert durch --lx-*-Custom-Properties.
• assets/head-snippet.html: die drei Tags, die jede Seite im <head> benötigt.
• references/gate-design.html, references/scan-design.html: die ursprünglichen eigenständigen Designs. Verwenden Sie sie als Ausgangspunkt, falls der Besitzer ein neues Tor- oder Scan-Design wünscht.

Schritte

1. Sichern Sie die Site. Kopieren Sie dann layers.js und layers.css in sie hinein (Standardpfade /js/layers.js und /css/layers.css; passen Sie das Snippet an, falls die Site andere Pfade verwendet).

2. Fügen Sie die Head-Tags auf jeder Seite hinzu. Fügen Sie assets/head-snippet.html in den <head> jeder Seite ein. Das Inline-Skript verbirgt die Seite vor dem Paint nur, wenn die Einführung ausgeführt wird, und zeigt sie nach 4 s wieder an, falls die Laufzeit nie geladen wird.

3. Setzen Sie den Tor-Text. Verwenden Sie data-*-Attribute auf dem Script-Tag oder ein window.AgenticBuildIntro-Objekt, das vor dem Laden des Skripts gesetzt wird. Das Objekt gewinnt gegenüber Attributen.

   Schlüssel	Attribut	Standard
   name	data-name	document.title
   initials	data-initials	erste Buchstaben von name
   title	data-title	ausgeblendet, wenn leer
   location	data-location	ausgeblendet, wenn leer
   timezone	data-timezone	lokale Zeit des Besuchers
   clock	data-clock	true
   cta	data-cta	Portfolio-Aufbau starten
   skip	data-skip	Zur Seite springen
   agents	data-agents	30 Desktop, 14 Telefon
   colors	data-colors	integrierte Palette (Komma-Liste)

   Verwenden Sie nur Fakten, die der Besitzer Ihnen gegeben hat. Erfinden Sie niemals einen Namen, Titel oder Standort. Jeder zusätzliche Text ist neutraler UI-Text.

4. Passen Sie das Designsystem der Site an. Lesen Sie die CSS-Variablen und Schriftarten der Site und überschreiben Sie dann die --lx-*-Tokens auf :root im eigenen Stylesheet der Site: --lx-bg, --lx-surface, --lx-stroke, --lx-text, --lx-muted, --lx-soft, --lx-ink, --lx-accent-1 bis --lx-accent-4, --lx-font-display, --lx-font-body. Das Kit lädt keine Schriftarten. Behalten Sie die eigenen Farben der Site und wählen Sie kräftige Agentenfarben, die auf dem Hintergrund lesbar sind.

5. Ändern Sie nicht, wie der Scan funktioniert. Die Scan-Umrisse stammen aus derselben Elementliste, die der Bau verwendet, sodass die Umrisse genau dort sitzen, wo die tatsächlichen Inhalte landen, und die Scan-Agenten die Bau-Agenten an denselben Stellen, Farben und Beschriftungen übergeben. Ersetzen Sie niemals durch ein generisches Wireframe.

6. Behalten Sie diese Verhaltensweisen bei.

   • Boxen werden mit Griffen und B×H-Beschriftungen herausgezogen, Text wird mit einem Cursor getippt, Hilfslinien blinken während der Arbeit der Agenten.
   • Bilder werden über etwa 1,7 s mit einem gestuften Top-Down-Wipe, Scanlinie, schwachen Streifen und einem Graustufen-zu-Farb-Übergang eingeblendet.
   • Das Tempo ist standardmäßig flüssig, aber zügig, alles mit sanftem Ease-In-Out: Cursor bewegen sich in 0,5 bis 0,7 s, Boxen werden in 0,6 bis 0,8 s herausgezogen, Text wird mit etwa 15 ms pro Zeichen getippt (lange Blöcke auf ca. 1,4 s begrenzt), und jeder Agent pausiert etwa 150 ms zwischen Aufgaben. Die Geschwindigkeit wird von der Seitengröße vorab eingestellt und während des Baus erhöht, wenn er hinter einem Ziel von etwa 23 s auf dem Desktop und 20 s auf Telefonen zurückbleibt, sodass Agenten bei Bedarf weiter unter dem Falz starten können. Agenten bauen immer jedes Element bis zum Footer auf. Eine 45-Sekunden-Sicherung ist der einzige harte Stopp.
   • Follow ist standardmäßig aktiviert: Wenn das nächste Bauziel unter etwa 65 % des Viewports fällt, scrollt die Seite langsam nach unten, sodass die Arbeit etwa 30 % vom oberen Rand entfernt sitzt. Am Ende wird nicht zum Anfang zurückgescrollt. Bei reduzierter Bewegung wird gesprungen statt gescrollt.
   • Läuft einmal pro Sitzung. ?build=1 wiederholt, ?build=0 überspringt. Eingabe startet, Esc überspringt das Tor; Rad, Klick, Touch oder eine beliebige Taste überspringt eine laufende Einführung.
   • Funktioniert bis zu 390 px Breite mit weniger Agenten auf Telefonen. prefers-reduced-motion überspringt die Einführung.

7. Code-Regeln. Keine Code-Kommentare, keine langen Gedankenstriche im Text, keine KI-generierten menschlichen Figuren.

8. Überprüfen Sie durch Aufzeichnung. Führen Sie node --check auf dem JS aus. Servieren Sie die Site und zeichnen Sie Playwright-Video bei 1280×800 und 390×844 auf: Öffnen Sie ?build=1, klicken Sie auf den Start-Button, zeichnen Sie 20 bis 60 s auf. Extrahieren Sie Frames für das Tor, den Scan, die Übergabe, den Bau und den Endzustand, prüfen Sie auf Seitenfehler und beheben Sie, was Sie sehen. Bestätigen Sie, dass jede vorhandene Seite noch 200 zurückgibt.

9. Berichten Sie mit dem Live-Link, einem Tor-Screenshot und der Aufzeichnung.