I Let AI Build This Website — Here's What Actually Happened

The website you’re reading right now was built by AI agents. Not “AI-assisted” in the vague marketing sense where someone used Copilot to autocomplete a few lines. The actual code, the blog system, the SVG illustrations, the SEO infrastructure, the sitemap generation — agents wrote it while I made decisions.

This is the story of how that actually went. Including the parts that broke. And since every commit was made by agents, the git history is the literal receipt.

The Git Log: 37 Commits Tell the Story

Before we dive in, here’s the actual commit history — chronological, unedited. This is what building a site with AI agents looks like from git log:

ad1a7bc feat: initial project setup with CLAUDE.md
1c57962 simplify: remove backend, go fully static
562d2cd update: align CLAUDE.md with final architecture
84c09e5 feat: scaffold complete website from mobile teaser
3ce1584 fix: navbar links now work from subpages
1f42183 fix: make each section full viewport height
cb67e08 style: add section dividers and emerald CTA section
a7a2a73 feat: add HeroOrchestrator animation to Levels section
1fb408c fix: improve CTA section contrast
6a025f5 fix: make CTA button white for maximum contrast
aa1b909 feat: add Impressum and Datenschutz pages
764c7b4 feat: design CWA logo with code brackets and agent dots
e55408f feat: add full CodeWithAgents logo to Levels section
a3c8906 feat: show CodeWithAgents text next to logo on desktop
3c74f7d style: use full logo in navbar
cd620cf feat: add square logo variant — stacked Code/With/Agents
10f0be4 style: replace jarring emerald bg with subtle glow
cd07206 content: add real contact data to Impressum and Datenschutz
7d8485e style: switch from dark theme to clean white/light theme
8ee6490 feat: redesign logo with bracket-glasses nerd face character
f76d0c8 chore: add logo reference image and project TODO
d191168 style: desktop layout overhaul — grids, section backgrounds
d8240d9 feat: add blog system, services page, and contact page
7529137 content: new blog post, fix image system, add SVG skill
1ce3802 content: add SVG illustrations to AI slop blog post
96bb3db chore: add anti-slop quality checklist to blog-write skill
9b0e0ce docs: update CLAUDE.md with bilingual policy and current pages
1c48526 feat: rework Services and Contact pages with richer layout
e833c5d feat: add i18n routing infrastructure with /de/ routes
28eb17f feat: add German translations for all pages
15594af feat: add SEO infrastructure — Open Graph, hreflang, robots.txt
21a7d49 feat: auto-generate sitemap.xml at build time
d76b1e7 feat: add JSON-LD structured data
a871d56 fix: add /de/impressum and /de/datenschutz routes
dc79e9a fix: update favicon to match bracket-eyes nerd face logo
86cde4e feat: replace journey link with language switcher hint
63cdb16 fix: remove fake online indicator and enlarge profile photo

Read that top to bottom and you see the whole arc: setup → scaffold → visual polish → logo iterations → theme change → blog system → content → i18n → SEO → fixes. Every commit was made by an agent. Every commit message was written by an agent. The human (me) decided what to build. The agents decided how to describe what they built.

A few things jump out:

The logo went through four iterations — code brackets, text variants, and finally the bracket-glasses nerd face. That’s not failure; that’s design exploration done at machine speed. Each iteration took minutes, not days.

The theme switched from dark to light mid-build (7d8485e). A full redesign. In a traditional project, that’s a painful day of work. Here it was one agent session.

The fix commits tell honest stories. fix: make CTA button white for maximum contrast — that’s a human looking at the screen and saying “I can’t read this.” fix: remove fake online indicator — that’s a human calling out a dishonest design choice. The AI doesn’t self-correct on visual or ethical issues. That’s the human’s job.

The Setup

I didn’t start from scratch with a blank canvas and “build me a consulting website.” I had a clear vision before a single line of code was written.

The content came from a mobile presentation I’d already built — a teaser deck called PowerBen with seven slides covering my approach to agentic engineering. Seven slides became seven scroll sections. Same content, same visual language, ported to native scrolling. I wasn’t asking the agent to invent anything conceptually; I was asking it to execute a specific translation from presentation to web.

Tech choices were deliberate and mine: React 19 + Vite 6 + Tailwind CSS v4 for a fast, modern frontend. GitHub Pages for zero infrastructure. No backend, no CMS, no database. Static SPA, deployed on every push to main. The agent didn’t pick the stack — I did. The agent built with it.

The actual question was never “can AI build a website.” That was answered before I started — I’d already built a full presentation in one session. The question was: can AI build the website I actually want? That’s a harder question, and the answer is more complicated than “yes.”

What Worked Immediately

The initial landing page came together fast. Hero section, navigation, services cards, about section — the agent nailed the layout structure in one pass. It matched the design system I described (dark background, emerald accents, Inter font) and the component structure was clean from the start. No major reworks needed.

The blog system was built in a single session. Content loader, markdown rendering, routing, blog listing page, post detail page — all of it. The agent chose gray-matter for frontmatter parsing and react-markdown for rendering, set up the content directory structure, and wired everything together with React Router. Functional end-to-end in one go.

German translations of entire pages happened in parallel. Three agents translating Home, Services, and Contact simultaneously, working from the English source. What would have been a tedious sequential task — translate, review, format, commit — became a parallel operation.

Code splitting happened proactively. The agent noticed the main bundle was 510KB and suggested adding React.lazy() and Suspense for route-level splitting before I asked. Bundle dropped to 291KB. That kind of unsolicited optimization is the part that genuinely surprises people who haven’t worked with capable agents.

What Broke (And How We Fixed It)

gray-matter uses Node.js’s Buffer internally. Works fine in Node. Crashes in the browser with “ReferenceError: Buffer is not defined.” The agent didn’t anticipate the browser vs. Node compatibility boundary — it picked a library that was perfectly correct for a Node environment and wrong for a Vite browser build.

The fix was replacing gray-matter with a custom lightweight frontmatter parser that uses plain string splitting — no Node built-ins, no environment assumptions. Straightforward once diagnosed. But the diagnostic step required a human who understood why “Buffer is not defined” pointed to a Node.js API bleeding into browser code, not to a configuration problem.

Tailwind CSS v4 changed plugin syntax. The agent used v3’s @import approach. The fix was a one-line change to use @plugin. Small thing, but it’s a good illustration of where AI knowledge has edges: the model was trained on v3 patterns that were correct when it learned them and wrong for the version we were actually using.

SVG illustrations were structurally valid and visually poor. Wrong proportions, fonts that rendered tiny, too much whitespace, compositions that looked sensible in the code but off on screen. AI can generate SVG that passes validation. It cannot see the result. Every illustration needed human review — “the text in the top-left quadrant is too small, the spacing between elements is uneven, the overall proportions make this look like a poster not an inline graphic” — and iterating against a design skill I’d written specifically for the agent. The skill helped. It didn’t eliminate the back-and-forth.

Image paths took three attempts to get right. First iteration: assets co-located with markdown in src/content/, imported at build time. Problem: the blog content loader ran in the browser and couldn’t use build-time imports dynamically. Second iteration: import.meta.glob with ?url suffix to generate a static map of resolved paths. Problem: worked in dev, broke in production builds due to glob pattern matching nuances. Third iteration: assets in public/blog/{slug}/, referenced with relative ./ paths in markdown, rewritten to absolute /blog/{slug}/ paths at render time by the content loader. That one worked everywhere. Three attempts, two dead ends, one working pattern.

What Surprised Me

Speed. Not “faster than typing” speed — “faster than thinking” speed. While I was deciding what to build next, the agent had already built the previous thing. The bottleneck shifted from implementation to decision-making in a way I didn’t fully anticipate until it was happening.

Orchestration quality. The system I use — Cairn — delegates to specialized agents: a typescript-implementer for frontend code, a git-agent for commits and branches, a github-pr-handler for PRs, a code-reviewer for quality checks. Having specialized agents is genuinely better than one agent doing everything. Token costs drop because each agent only loads context relevant to its domain. Quality goes up because each agent has depth in its area. The first time the code-reviewer caught a pattern mismatch that the typescript-implementer introduced, I understood why specialization matters.

Consistency. Session 1 to session N, same quality, same energy. No Friday afternoon slump. No “we’ll fix that later” drift. The agent that wrote the 40th component applied the same care as the 1st. This sounds like a small thing. It isn’t. Human consistency degrades in ways we don’t always notice until we’re reviewing code from six months ago.

Persistent memory works. The agent system uses CLAUDE.md files and STATUS.md for cross-session context. When I came back to the project after a gap, the agent knew the tech stack, the design system tokens, the component patterns, and what had been built already. Not from my explanation — from structured files that persisted between sessions. This is the unsexy infrastructure that makes agentic development actually practical over weeks and months, not just for a single afternoon.

The Phase 1 Foundation

What’s live today: a fully bilingual (English and German) site with a blog, services page, contact page, legal pages, SEO infrastructure including JSON-LD structured data, and an auto-generated sitemap built by a script the agent wrote.

The blog system has frontmatter-driven metadata, category and tag support, featured post pinning, draft mode, and a build-time index script that validates every post’s frontmatter before deploy.

But the meta-layer is what makes it sustainable. The agent system includes skills — structured instruction files that teach agents how to perform specific tasks. The /blog-write skill contains the frontmatter schema, folder conventions, image placement rules, and — critically — an anti-slop quality checklist. Before any post gets published, it must answer “yes” to four questions:

• Does it draw on specific experience?
• Does it contain a genuine opinion?
• Could anyone have written this? (If yes, don’t publish.)
• Will the reader learn something new?

If any answer is wrong, the post gets rewritten or deleted. That checklist exists because I wrote a blog post about AI slop and realized the filters I described for readers should also apply to my own agents. So I taught them.

There’s also an /svg-create skill with design rules for illustrations — compact viewBox, minimum font sizes, emerald color palette — because the first SVGs were technically valid and visually terrible. The skill encodes the learnings so the same mistakes don’t repeat.

This is phase 1. The foundation. It’s not impressive as a technical achievement — it’s a static site. What it demonstrates is a working workflow for building and maintaining a project through an agent system over multiple sessions, with persistent context, specialized agents, and a quality bar enforced through code review.

The blog posts? Written with AI assistance, reviewed by me. The SVGs? Generated by agents following a design skill. The sitemap? Auto-generated at build time. Every piece has the same pattern: I decide what, AI executes how, I verify the result.

The Takeaway

Building with AI agents isn’t magic. It’s a different kind of work.

You stop writing code and start making decisions. You stop debugging syntax and start debugging architecture. You stop typing and start thinking — actually thinking, not just translating thoughts into keystrokes.

Is it faster? Yes, dramatically. The gap between “I want a feature” and “the feature exists” compressed from hours to minutes for most things. Is it better? Sometimes. The agent produces consistent, well-structured code. It also produces SVGs that look technically correct and visually terrible. It picks the right library for the wrong environment. It uses the previous major version’s API syntax.

The real skill isn’t prompting. Everyone focuses on prompting. The actual leverage is elsewhere: knowing what to build, recognizing when the output is wrong, having the judgment to iterate, and building the right infrastructure for the agent to operate in. A well-written SKILL.md or CLAUDE.md is worth more than any prompt trick.

This site is proof that the model works. Not because it’s perfect — it isn’t. But because it exists, it works, and it was built in a fraction of the time it would have taken me alone. Phase 1 is done.

Now it gets interesting. (The first architectural problem the agents shipped — a 97% bundle reduction after a human caught a scaling time bomb — is in The 97% Bundle Cut.)