Was gebaut wurde
Eine vollständig responsive, produktionsreife Landing Page für den XALT Vibe Coding Workshop — einen interaktiven 4-stündigen Online-Workshop zum Thema KI-unterstützte Softwareentwicklung. Die Seite wurde von Grund auf gebaut, auf Vercel deployed und mit der benutzerdefinierten Domain xalt.de/ai verbunden.
Der gesamte Prozess — von der ersten Slack-Anfrage bis zur Live-Domain — wurde von einem KI-Agenten (OpenClaw) mit menschlicher Steuerung über Slack-Nachrichten abgewickelt. Es wurde kein Code manuell geschrieben.
Was Mark bereitgestellt hat
Das Projekt begann mit einer Reihe von Slack-Nachrichten in #vibe-coding-and-ai-learnings. Folgendes wurde als Input bereitgestellt:
Referenz-Design
Eine bestehende Landing Page unter xalt-web.vercel.app/xalt-cloudbound-landing.html — eine dunkel gestaltete Event-Seite für „XALT × Atlassian Connect: Cloud Bound München 2026". Dies diente als Design-Vorlage: gleiches CSS-Framework, gleiche Abschnittsstruktur, gleiche visuelle Sprache.
Inhaltsquelle (PDF)
A PDF flyer on Google Drive: "XALT Flyer EN Vibe Coding Workshop.pdf" mit allen Workshop-Details — Format (4 Std. online), Zielgruppe (CTOs, Engineers, Stakeholder), Lernergebnisse (6 Themenbereiche), Kontaktdaten (Daniel Gottschalk) und das Gesamtwertversprechen.
Deployment-Ziel
Push in das bestehende GitHub-Repository (larry-sebastian/xalt-web) und Deployment über Vercel. Später: Verbindung mit der benutzerdefinierten Domain xalt.de/ai.
Iterations-Feedback
Nachdem die erste Version live ging, bat Mark darum, „die Landing Page etwas detaillierter zu gestalten und mehr Text hinzuzufügen" — was einen zweiten Durchgang auslöste, bei dem alle Abschnitte mit deutlich mehr Inhalt erweitert wurden.
Technologie-Stack
Der Agent verwendete folgende Tools für den Build:
OpenClaw Agent Google Workspace CLI (gog) GitHub CLI (gh) Vercel CLI http.net DNS API PyMuPDF (PDF extraction) curl / shell tools
- gog drive search / download — PDF von Google Drive gefunden und heruntergeladen
- PyMuPDF (pymupdf) — Textinhalt aus dem PDF extrahiert (after pdftotext wasn't available)
- curl — Bestehende CloudBound Landing Page HTML als Design-Referenz abgerufen
- HTML/CSS — Die gesamte Seite als eigenständige HTML-Datei erstellt (keine Build-Tools, keine Frameworks)
- git + GitHub — Versionskontrolle und Push in das xalt-web Repository
- Vercel CLI — Auf Produktion deployed, Domains verwaltet, Rewrites/Redirects konfiguriert
- http.net DNS API — DNS-Einträge verifiziert (A record → 76.76.21.21, CNAME www → cname.vercel-dns.com)
Schritt-für-Schritt-Zeitstrahl
1. Referenz-Design abgerufen
Used curl to download the full HTML source of the existing CloudBound landing page from xalt-web.vercel.app. Extracted and analyzed the CSS (variables, section patterns, responsive breakpoints) and HTML structure (nav, hero, why-attend, XALT section, team, agenda, location, CTA, footer).
2. PDF gefunden und heruntergeladen
Searched Google Drive using gog drive search "Vibe Coding" and found the flyer PDF. Downloaded it locally. Also discovered a C-Level version in the same folder.
3. PDF-Inhalt extrahiert
Initially tried pdftotext (not installed), then used PyMuPDF (already available) to extract all text. Got the full content: workshop format, audience descriptions, 6 learning outcomes, contact details, and value proposition.
4. Landing Page erstellt
Created a single self-contained HTML file reusing the CloudBound page's CSS framework but with entirely new content. Adapted sections: Hero (workshop pitch + stats), What You'll Learn (6 cards), Who It's For (3 audience segments), Workshop Format (step-by-step agenda), Contact (Daniel Gottschalk), and CTA.
5. Auf GitHub gepusht & deployed
Committed xalt-vibe-coding-workshop.html to the larry-sebastian/xalt-web repository. Vercel auto-deployed from the GitHub push. Page live at xalt-web.vercel.app/xalt-vibe-coding-workshop.html.
6. Inhalte erweitert (Iteration)
After feedback to add more detail, expanded significantly: added a new "The Challenge" section (3 cards on why this matters), a "Why XALT" section (3 cards on credibility), and tripled the text in every existing card. Each learning outcome and audience segment got detailed descriptions. Workshop format got approximate timings and rich descriptions.
7. Benutzerdefinierte Domain verbunden
Domain xalt.de/ai was already registered with http.net nameservers and DNS pointed at Vercel (A record: 76.76.21.21). The domain was assigned to a different Vercel project (xalt-new), so removed it from there and added it to xalt-web. Configured vercel.json with redirect rules so xalt.de/ai serves the workshop page.
8. Redirect debuggt
Initial rewrite rules didn't work (Vercel serves static index.html before rewrites). Switched from rewrites to redirects with a 308 status code and host-based matching. Verified with curl that the redirect chain worked correctly.
Aufgetretene Probleme
PDF-Textextraktion
pdftotext (from poppler) wasn't installed on the system, and installing it via Homebrew was timing out. Solution: used PyMuPDF which was already installed — pymupdf extracted all text cleanly from the Canva-generated PDF.
Massives Inline-CSS
The reference CloudBound page had a 612KB CSS block — mostly base64-encoded images embedded directly in the stylesheet (hero background, client logos, team photo). Had to parse and strip these to understand the actual CSS patterns, then rebuild clean CSS for the new page.
Vercel Domain-Konflikt
The domain xalt.de/ai was already assigned to the xalt-new project on Vercel. Had to remove it from xalt-new first (which also removed 2 aliases), then re-add it to xalt-web.
Vercel Rewrites vs. statische Dateien
Vercel's rewrites with has: host conditions didn't override the static index.html file. The rewrite was silently ignored. Switched to redirects (HTTP 308), which correctly intercept the request before static file serving.
Finales Setup
Die Seite ist eine einzelne eigenständige HTML-Datei — kein Build-Schritt, kein JavaScript-Framework, kein externes CSS. Alles (Styles, Markup, SVG-Logos) ist inline. Das bedeutet null Abhängigkeiten, sofortiges Laden und einfache Wartung.
Dateien & Commits
- xalt-vibe-coding-workshop.html — Die Landing Page (~37KB, self-contained)
- vercel.json — Redirect-Konfiguration for xalt.de/ai
- how-we-built-it.html — Diese Dokumentationsseite
Repository: github.com/larry-sebastian/xalt-web
Wichtigste Erkenntnis: Die gesamte Landing Page — Design, Inhaltsextraktion, Programmierung, Deployment, Domain-Verbindung, Iteration und Debugging — wurde von einem KI-Agenten in etwa 45 Minuten fertiggestellt, gesteuert durch 5 Slack-Nachrichten. Es wurde kein Code manuell geschrieben. Der Agent nutzte bestehende Tools (Google Drive, GitHub, Vercel, http.net DNS), um von einem PDF-Flyer zu einer Live-Produktionsseite auf einer benutzerdefinierten Domain zu gelangen.