In einer Session gebaut: Vom leeren Repo zur deployten Präsentation

Die Fußzeile der Präsentation lautet: „Built in one session: human intent, AI hands, zero copy-paste.”

Diese Zeile stimmt — und ist trotzdem unvollständig. Hier ist die ganze Geschichte.

Die Aufgabe

Ich brauchte eine Mobile-First-Teaser-Präsentation für mein Agentic-Engineering-Training. Etwas, das ich per Handy teilen kann, das die Kernidee schnell rüberbringt, und das aussieht, als wäre es von jemandem gebaut worden, der mit Agenten wirklich umgehen kann.

Klare Anforderungen:

• Sieben Folien
• Mobile-First-Canvas: 390 px breit, 9:19,5 Seitenverhältnis (iPhone-Proportionen)
• Animierter Hero-Bereich mit einer Visualisierung laufender Agenten-Orchestrierung
• ASCII-Art-Progression der Entwicklerlevel
• Sprechblasen, Partikeleffekte, visueller Schliff
• WhatsApp-CTA-Button am Ende
• Auf GitHub Pages deployed, live URL, sofort teilbar

Das Tool: Slidev. Falls du es nicht kennst — Slidev ist ein Präsentationsframework, bei dem Folien in Markdown mit Vue-Komponenten geschrieben werden. Code-getrieben, Git-freundlich, als statische Seite deploybar. Die richtige Wahl — Agenten können Slidev-Folien genauso natürlich schreiben wie jeden anderen Code.

Ich habe mit einem leeren Git-Repository angefangen. Kein Scaffold, kein Starter-Template, nichts von einem alten Projekt kopiert. Blank.

Was wirklich passiert ist

Die Session war riesig. Über 300.000 Tokens über drei Kontextfenster. Das erste Mal für mich, dass ein einzelnes Projekt mehrere Kontextfenster-Resets gebraucht hat. Nicht weil der Kontext problematisch ans Limit gestoßen ist, sondern weil die Session lang und komplex genug war für bewusste Übergaben: Zustand zusammenfassen, frischen Kontext öffnen, weitermachen. (Zum Vergleich: Das war ein Bruchteil der 16-Stunden-Million-Token-Session, die ich für eine vollständige Web-Anwendung gemacht habe.)

Kontextfenster 1 hat die Grundlage gelegt: Projektstruktur, Slidev-Konfiguration, erster Durchgang aller sieben Folien, mobiles Layout, grundlegendes visuelles System. Das hat länger gedauert als erwartet, weil Mobile-First-Slidev wirklich ungewöhnlich ist — die meisten Slidev-Präsentationen sind Querformat, 16:9, für Beamer konzipiert. Die Canvas-Konfiguration auf Hochformat-Smartphone-Layout anzupassen hat einiges Hin-und-Her mit der Slidev-Dokumentation gebraucht.

Kontextfenster 2 war für die Visuals zuständig. Der animierte Hero. Die ASCII-Art-Progression (dazu gleich mehr). Die Partikeleffekte. Die Sprechblasen. Jedes davon war ein Mini-Projekt innerhalb der Session — spezifische Komponenten mit spezifischem Verhalten, so lange iteriert, bis sie auf einem echten Smartphone-Bildschirm stimmig aussahen.

Kontextfenster 3 hat das Deployment abgeschlossen: GitHub-Actions-Workflow, gh-pages-Branch-Setup, DNS-Verifizierung für die Subdomain, letzter Politurdurchgang und Copy-Review. Deployment war der am wenigsten kreative Teil — und hat trotzdem nicht trivial viel Zeit gebraucht, weil GitHub-Pages-Deployment einer Vite-gebauten Slidev-Präsentation genug Konfigurationsoberfläche hat, dass man mehrere Runden braucht, um es sauber hinzubekommen.

Der Teil, der mich überrascht hat

Die ASCII-Art.

Ich wollte eine Visualisierung der Entwicklerlevel-Progression — L0 bis L∞, das Kernkonzept des Agentic-Engineering-Trainings. Der Agent hat etwas in dieser Art produziert:

L0  ░░░░░░░░░░░░░░░░░░░░  still googling "how to use AI"
L1  ████░░░░░░░░░░░░░░░░  copy-pasting from ChatGPT
L2  ████████░░░░░░░░░░░░  using Copilot, reviewing output
L3  ████████████░░░░░░░░  giving agents tasks, checking results
L4  ████████████████░░░░  orchestrating multi-agent workflows
L∞  ████████████████████  agents build agents

Dieses Format habe ich nicht vorgegeben. Ich habe das Konzept beschrieben — ein Fortschrittsbalken, der Entwicklerlevel mit dem Agentic-Engineering-Framing zeigt — und der Agent hat ASCII gewählt. Dann hat er es animiert: jeder Balken füllt sich der Reihe nach, mit Verzögerung, die zum Rhythmus der Folie passt.

Das war echtes kreatives Problemlösen. Nicht „hier ist, was du wolltest.” Eher: Hier ist eine Form, die deinen Inhalt besser transportiert als das, was du dir vermutlich vorgestellt hast.

Das habe ich schon öfter erlebt — Agenten liefern manchmal etwas Besseres als das, was man spezifiziert hat. Wenn das passiert, hält man inne und erkennt es an. Man überschreibt es nicht mit der ursprünglichen Idee, nur weil sie die eigene war.

Der Meta-Witz

Es gibt eine offensichtliche Meta-Ebene, die ich hier explizit benennen möchte: Das war eine Präsentation über KI-Agenten, komplett von KI-Agenten gebaut, um Training über KI-Agenten zu verkaufen. (Die Website, auf der du das gerade liest, wurde auf dieselbe Weise gebaut — die ganze Geschichte steht in KI hat diese Website gebaut.)

Die Fußzeile war kein cleveres Branding. Sie war Dokumentation.

Jede Folie kommt von mir — die Ideen, die Struktur, der narrative Bogen, die Punkte, die ich machen wollte. Den Code, der diese Folien zum Leben erweckt hat, haben Agenten geschrieben. Die Designentscheidungen — Farbpalette (Dark Mode, Smaragdakzente), Typografie (Monospace für Code-Elemente, saubere Sans-Serif für den Rest), Animations-Timing — haben Agenten nach meiner Vorgabe getroffen. Die Deployment-Pipeline haben Agenten aufgesetzt.

Ich habe keine einzige Zeile Code geschrieben. Kein einziges Snippet kopiert. Meine Hände haben die Tastatur nur zum Reviewen, Umleiten und Abnehmen berührt.

Und trotzdem ist die Präsentation unverkennbar meine. Die Stimme. Die Haltungen. Das Framing. Was sie sagt und in welcher Reihenfolge. Das ist nicht generiert — das wurde dirigiert.

„Human Intent, AI Hands” — Was das wirklich heißt

Diese Formulierung in der Fußzeile macht echte Arbeit, und ich möchte sie aufdröseln, weil man sie leicht falsch liest.

Es heißt nicht „die KI hatte gute Ideen und ich habe sie abgenickt.” Es heißt: Der Mensch hat die Absicht geliefert — Richtung, Vision, Urteilsentscheidungen — und die KI hat die Implementierung ausgeführt.

Was ich explizit entschieden habe:

• Sieben Folien, diese Reihenfolge, diese Progression
• Mobile-First, weil das meiste Teilen über Smartphones läuft
• WhatsApp als primärer CTA, weil das mein tatsächlicher Arbeitskanal ist
• Smaragdgrün, weil das die Markenfarbe in allen meinen Materialien ist
• Keine Bullet-Point-Folien — alles visuell, alles dynamisch

Was der Agent innerhalb dieser Grenzen entschieden hat:

• Die konkrete Slidev-Konfiguration für Hochformat-Mobile
• Welche Vue-Übergangseffekte für welche Folie
• Das genaue Animations-Timing der Hero-Orchestrierungs-Visualisierung
• Das ASCII-Art-Format für die Level-Progression
• Die konkreten GitHub-Actions-Workflow-Schritte

Die Aufteilung: Was und Warum kommen vom Menschen. Wie und Womit kommen von der KI.

Das ist wichtig für alle, die Agentic Engineering als Fähigkeit entwickeln wollen. Die Fähigkeit ist nicht Prompting. Die Fähigkeit ist nicht „KI Dinge beschreiben.” Die Fähigkeit ist, eigene Vorstellungen klar genug zu haben, um einen Agenten so zu steuern, dass das Ergebnis noch deins ist — und nicht irgendwas Generisches.

Wer keine klaren Vorstellungen hat, bekommt generischen Output. Wer klare Vorstellungen hat, sie aber nicht kommunizieren kann, bekommt nah-dran-aber-falschen Output. Wer klare Vorstellungen hat und sie präzise kommunizieren kann, bekommt das Gewollte — schneller als man es selbst hätte bauen können.

Der dritte Fall ist das, was in dieser Session passiert ist.

Nach dem Deployment

Die Präsentation ist auf einer eigenen Subdomain live gegangen. Ich habe sie geteilt.

Die Reaktion kam sofort. Nicht weil die Präsentation technisch beeindruckend gewesen wäre — eine Sieben-Folien-Slidev-Site ist technisch nicht beeindruckend. Sondern weil sie genau das demonstriert hat, was sie beschrieben hat.

Jemand, der Agentic-Engineering-Training anbietet, hat seine eigene Marketing-Präsentation mit Agenten gebaut — in einer Session, mit eigener Domain deployed, dann als Beweis geteilt. Inhalt und Methode waren dasselbe. Diese Kohärenz landet anders als ein Foliensatz, den jemand in Keynote zusammengeklickt hat.

Einige haben gefragt: „Wie lange hat das gedauert?” Drei Kontextfenster. Vielleicht acht Stunden Wanduhrzeit. Vielleicht vier Stunden tatsächliche Agenten-Laufzeit. Für eine deployete, polierte, animierte Mobile-Präsentation, die ich einem Kunden zeigen kann.

Als ich die Session geöffnet habe, hatte ich ein leeres Repository. Als ich sie geschlossen habe, hatte ich eine URL.

Was das möglich gemacht hat

Ich möchte der Erzählung widerstehen, dass das einfach ist oder dass es jeder ohne Vorbereitung hinbekommt.

Die Session ist reibungslos gelaufen, weil ich monatelange Erfahrung damit hatte, Agenten bei kreativ-technischen Projekten zu steuern. Ich wusste, wann ich einem Output widersprechen sollte, wann ich das Urteil des Agenten über meine ursprüngliche Idee annehmen sollte, und wann ich präzise sein muss — versus wann ich dem Agenten Raum lassen soll, das Problem auf seine eigene Weise zu lösen.

Ich hatte ein klares Briefing. Keine vage Idee — eine konkrete Vision mit konkreten Einschränkungen. Agenten liefern bessere Arbeit, wenn das Problem gut definiert ist. Das Briefing für diese Präsentation war präzise genug, dass der Agent wusste, wie Erfolg aussieht.

Ich hatte die richtige Infrastruktur. Cairn — das System, das ich nutze — hat Kontextmanagement eingebaut, was die Drei-Fenster-Übergaben handhabbar statt mühsam gemacht hat. Ohne das wäre eine 300K-Token-Session schwerer zu navigieren gewesen.

Nichts davon macht das Ergebnis kleiner. Aber das Ergebnis passiert nicht ohne die Erfahrung dahinter.

Genau das ist der Punkt des Trainings, das ich anbiete: nicht „hier ist, wie man KI promptet”, sondern „hier ist, wie man das Urteilsvermögen entwickelt, Agenten gut zu steuern.” Die Fußzeile sagt „human intent.” Dieses Intent zu schärfen — klarer, konkreter, fundierter zu machen — das ist die eigentliche Arbeit.

Das leere Repository hat sich in einer Session gefüllt. Was es gefüllt hat, waren Monate des Lernens, wie man das Befüllen steuert.