Cover image 1 of 3
AI Assisted Design
This portfolio didn't exist three weeks ago — just a default framework starter page. Everything you're looking at, including this case study, came out of a close, conversational collaboration between me and an AI coding agent, where I directed every design decision and it handled the implementation.
This is the one case study here that isn't password protected. The other three are real client work shared with permission; this one is just me, in the open, for anyone curious how the process actually works.
Task
Design and build a full replacement for my portfolio site — home page, case studies, contact — starting from nothing, and do it by directing an AI coding agent rather than hand-coding every screen myself.
The real brief, though, was for me: figure out how much of a real design practice — taste, judgment, accessibility, knowing when something's actually done — survives when the typing is delegated. Spoiler: all of it. What changes is where your attention goes.
From a blank scaffold
A framework's default "hello world" screen — nothing else.
There was no redesign brief, no old site to iterate on — just the default starter screen a framework gives you the moment you scaffold a new project. Every section, every interaction, every accessibility pass on this entire site was built from that blank page.
Same scope, a fraction of the time
~10x faster: an estimated 10–14 weeks of solo design-and-build compressed into about two weeks.
For a site this size — a themed design system, five-plus homepage sections, four full case-study writeups, click-to-reveal anti-scraping gates, a dual light/dark theme, and a WCAG 2.1 AA accessibility pass — the traditional solo path is research, wireframes, high-fidelity comps, then hand-coding and QA-ing every screen in turn. By my own estimate, that's realistically 10–14 weeks of calendar time for one person.
Directing an agent instead of hand-coding every screen collapsed that into about two weeks — roughly a 10x reduction in time-to-ship, without skipping the design judgment or the accessibility bar that usually get the first cut when a timeline is squeezed.
Five phases become three loops
How the collaboration actually worked
In broad strokes: I'd point at a reference, a screenshot, or just describe what was wrong with the current result, and the agent would investigate the actual code and propose a fix. Every visual claim — is this balanced, does this fit, is this accessible — got checked against the real rendered page rather than assumed from reading code, which caught a surprising number of things that looked fine on paper and weren't.
The specifics of how that loop is structured — the prompting patterns, the verification habits, how to keep an agent from confidently guessing instead of checking — are the part I'm not laying out step by step here. That's the part of this workflow that's still genuinely new to most teams, and it's worth more as a skill I bring to a company than as a free how-to on my own site.
What I can say plainly: taste, prioritization, and knowing when a design is actually solved didn't get automated. If anything, directing rather than executing meant I spent more of my attention on those calls, not less.
Summary
A blank scaffold to a fully custom, accessible, dual-theme portfolio with live data pipelines — in about two weeks, one section at a time.