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 when you're serious about it.
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
All imagery and illustrations
What dogfooding actually taught me
The bottleneck was never the agent. It was the quality of my intent. Vague direction produced vague output. The more precisely I could describe what I wanted and why, the faster the work moved and the less rework there was. That's not an AI observation. That's a leadership observation.
The loop was fast enough that I stopped thinking of it as working with a tool. It felt more like a collaborator who executes immediately, never gets tired, and needs clear direction to do their best work.
The thing I kept noticing: the agents were better at catching their own mistakes when I gave them enough context to recognize what "right" looked like. Screenshots, references to other pages, explicit criteria. That's not how most people prompt. It's also not how most people lead.
This site is the artifact. The process is the point.