What Was Built
A fully responsive, production-ready landing page for the XALT Vibe Coding Workshop — an interactive 4-hour online workshop teaching AI-augmented software development. The page was built from scratch, deployed to Vercel, and connected to the custom domain xalt.de/ai.
The entire process — from initial Slack request to live domain — was handled by an AI agent (OpenClaw) with human direction via Slack messages. No code was written manually.
What Mark Provided
The project started with a series of Slack messages in #vibe-coding-and-ai-learnings. Here's what was given as input:
Reference Design
An existing landing page at xalt-web.vercel.app/xalt-cloudbound-landing.html — a dark-themed event page for "XALT × Atlassian Connect: Cloud Bound München 2026". This served as the design template: same CSS framework, same section structure, same visual language.
Content Source (PDF)
A PDF flyer on Google Drive: "XALT Flyer EN Vibe Coding Workshop.pdf" containing all the workshop details — format (4h online), audience (CTOs, engineers, stakeholders), learning outcomes (6 topic areas), contact info (Daniel Gottschalk), and the overall value proposition.
Deployment Target
Push to the existing GitHub repository (larry-sebastian/xalt-web) and deploy via Vercel. Later: connect to the custom domain xalt.de/ai.
Iteration Feedback
After the first version went live, Mark asked to "make the landing page a little bit more detailed and add more text" — which triggered a second pass expanding all sections with significantly more content.
Technology Stack
The agent used the following tools to complete the 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 — Found and downloaded the PDF from Google Drive
- PyMuPDF (pymupdf) — Extracted text content from the PDF (after pdftotext wasn't available)
- curl — Fetched the existing CloudBound landing page HTML to use as a design reference
- HTML/CSS — Built the entire page as a single self-contained HTML file (no build tools, no frameworks)
- git + GitHub — Version controlled and pushed to the xalt-web repository
- Vercel CLI — Deployed to production, managed domains, configured rewrites/redirects
- http.net DNS API — Verified DNS records (A record → 76.76.21.21, CNAME www → cname.vercel-dns.com)
Step-by-Step Timeline
1. Fetched the Reference Design
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. Found and Downloaded the PDF
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. Extracted PDF Content
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. Built the Landing Page
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. Pushed to GitHub & 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. Expanded Content (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. Connected Custom Domain
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. Debugged the Redirect
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.
Problems Encountered
PDF Text Extraction
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.
Massive 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 Conflict
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. Static Files
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.
Final Setup
The page is a single self-contained HTML file — no build step, no JavaScript framework, no external CSS. Everything (styles, markup, SVG logos) is inline. This means zero dependencies, instant loading, and easy maintenance.
Files & Commits
- xalt-vibe-coding-workshop.html — The landing page (~37KB, self-contained)
- vercel.json — Redirect configuration for xalt.de/ai
- how-we-built-it.html — This documentation page
Repository: github.com/larry-sebastian/xalt-web
Key insight: The entire landing page — design, content extraction, coding, deployment, domain connection, iteration, and debugging — was completed by an AI agent in about 45 minutes, directed by 5 Slack messages. No code was written manually. The agent used existing tools (Google Drive, GitHub, Vercel, http.net DNS) to go from a PDF flyer to a live production page on a custom domain.