Every page.
Every image.
Every line.
Built with AI.
This site isn't just about building AI products. It was built with them. Every page, every piece of copy, every responsive breakpoint, every image prompt was handled by an AI agent directed by a single human in the loop.
That's not a footnote. It's the point. I talk about agentic building professionally. I wanted to know what it actually felt like to do it on something I owned completely.
This is what dogfooding looks like.
Three agents. One workflow.
Each tool played a distinct role. The work didn't happen inside any one of them. It happened in the hand-offs between them.
Brief
Scaffold
Review
How it actually worked
Not sequential. Not clean. A tight loop of intent, execution, observation, and correction, running at machine speed with a human setting the direction at every turn.
What it looked like
These are representative examples from the actual build sessions. The kinds of exchanges that produced every page on this site.
> create a leadership page matching the design system in index.html. The page should cover philosophy, posture, and practice. Three core principles I hold regardless of context. A parallax quote section. Work with me section at the bottom.
Reading index.html to extract design tokens...
Writing leadership.html
✓ Hero section with two-column grid
✓ Values grid: 3 cards with border treatment
✓ Parallax section with quote
✓ Work with me: column layout
✓ Footer matching index.html
Preview available at localhost:3456/leadership.html
Reading index.html @media block...
Current: padding-top:5rem on .hero
Adding: .hero{"{"}padding-top:40px{"}"} at mobile breakpoint
Adding: .hero-art{"{"}display:none{"}"} at mobile breakpoint
Edit index.html:183
- .hero{"{"}padding-top:40px;padding-bottom:1.25rem{"}"}
+ .hero{"{"}padding-top:40px;padding-bottom:1.25rem{"}"}
+ .hero-art{"{"}display:none{"}"}
--cyan for the tag accent on AI items, --magenta for leadership. The filter tabs can use your existing subnav pattern so it's zero extra JS.system: "You are building a portfolio site for a Director of Product Design. Use semantic HTML5. Inline CSS only, no frameworks. Design tokens via CSS custom properties. All layout via CSS Grid. No dependencies."
user: "Create the work case study page template. Sections: hero with metrics, image gallery grid (2x2 with gap), impact section (two col), manager quote block (grid with quotemark left), prev/next nav. Match the token system below."
.hero{display:grid;grid-template-columns:2fr 3fr;gap:4rem}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
.imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.qt{display:grid;grid-template-columns:44px 1fr;gap:1.25rem}
.pnav{display:flex;justify-content:space-between}
✓ Pattern used across all 4 work pages
What dogfooding actually taught me
The bottleneck was never the agent. It was how precisely I could say what I wanted. Vague direction produced vague output every time. The clearer the intent, the less rework. That's not a finding about AI. That's a finding about direction.
Context is everything. The annotate feature in Claude Code and Codex was one of the biggest unlocks on this build. Pinning context directly to a file kept conversations focused and edits constrained to what actually needed to change. Without it, the AI is working from a blurrier picture and the drift shows up in the output.
There is also a real ceiling on how much you can hand off at once. A long list of updates sounds efficient. It isn't. The AI starts combining tasks it sees as related, and after a while it quietly loses track of the individual asks. Smaller, tighter prompts with clear scope consistently outperformed the big batch approach.
The loop moved fast enough that the mental model shifted. It stopped feeling like using a tool. You still have to lead it. That part doesn't go away.