- CASE NO.
- 01 / 05
- BASED
- DEN · REMOTE
- ROLE
- DESIGN & BUILD
- REV.
- v2026.04
01 · BRIEF · CASE 01 OF 05
I built this portfolio with AI, and kept the decisions human.
Six weeks with Cursor, Claude, and Vercel, documenting how human taste still sets the ceiling when AI raises the floor.
- DRAWING NO.
- 02 / 06
- RUNTIME
- 06 WK
- SHIPPED
- APR 21, 2026
- LAST REV.
- 04/26
LIVE · NOW
Hero readout
6wks
Brief to shipped
Five case studies · three interactive artifacts
Commits
130
Cumulative
Deploys
34
Instant preview every push
Case studies
5
Each with a hero artifact
no designW2Tokens + grid
stand upW3Hero scatter
addedW4Impact console
shipsW5Claude Design
arrivesW6Critique
+ case studiesNOWShipped
Apr 21
A production-grade portfolio, two reusable workflows, and one clear boundary between AI generation and human judgment.
↓ METHOD · HOW THE WORK SPLIT
- DRAWING NO.
- 03 / 06
- FRAMEWORK
- CENTAUR (MOLLICK)
- SPLIT
- HUMAN ↔ AI
- LAST REV.
- 04/26
03 · METHOD · CENTAUR, NOT CYBORG
Human in the saddle. Always.
Ethan Mollick's framework draws a line between Centaurs and Cyborgs. A Centaur divides tasks with AI and keeps steering. A Cyborg fuses with it completely.
I'm a Centaur. The structure of every page, the positioning decisions, the copy that sounds like me — those were mine. AI produced faster drafts, better variations, sharper critique than I could generate alone. The decisions were mine.
AI GENERATEDREF · 03-A
"Matt Stangl is a strategic design leader who transforms complex enterprise challenges into measurable business outcomes through human-centered methodologies and systems thinking."
SOURCE · LLM DRAFT · COMPREHENSIVE PRESET
I CHANGED IT TOREF · 03-B
"I rebuild fragmented enterprise experience as one operating model that actually ships."
SOURCE · MATT · POSITIONING PASS · 04/12
The hardest version of this lesson came in week four. I let AI write three case study pages end to end. The output was fluent, professional, and completely generic — the same portfolio language on a hundred other sites. I tore it down and rebuilt from what actually happened: the real pivots, the real numbers. That version is what you're reading now.
↓ ARTIFACTS · PROOF FOLLOWS
- DRAWING NO.
- 04 / 06
- RECORDS
- 03 · TAP / DRAG / TAP
- STATUS
- 03 LIVE
- LAST REV.
- 04/26
04 · SERVICE RECORDS
Three artifacts. Three interactions.
A service record is what a mechanic logs when work is done — what changed, who did it, when, and why. Tap, drag, tap.
Design Review Terminal
Two critique passes, thirteen findings — tap a pill to narrow the log.
CLICK PILLS TO FILTER
Each finding is a real critique I made of my own work, with the decision and reversal logged. Reversals are when AI was right and I was wrong, or vice versa.
Deployment Diff — Home Hero
Commit 4a3f2c → 9e1ab7 · two weeks apart
DRAG SLIDERCOMPARE V1 → V2 · TWO WEEKS APART
v1 was my best work without Claude Design. v2 is what happens when AI extends the design system rather than just executes the spec.
Signal Telemetry
TAP A ROW
IA · No design
"What pages, what hierarchy, what each section has to say."
Cursor as structural partner. No visual decisions yet. 4 prompts to a confirmed sitemap. The site exists as a folder of empty HTML files with semantic structure and zero opinions about how it looks.
Tokens + grid
Dark theme. Teal accent. Monospace labels.
Token pass in Claude, implemented in Cursor. First time the site feels like itself. The dark/teal/mono triad becomes the visual DNA every later page inherits.
Hero scatter added
Particle bloom lands on the hero.
First moment the site has a strong first impression. Accident that became a decision — a Claude experiment I almost didn't keep. The fiche grammar reframed it later as a deliberate signal element.
Impact Console ships
The strongest page on the site ships.
Three tabs, three engagements, per-tier revenue attribution. Two days of focused build. The week the portfolio went from "promising" to "shippable" — and the week I let AI write three case study pages I'd later tear down.
Claude Design arrives
Apr 17. The tool I needed six weeks ago, six weeks later.
Cursor becomes the implementer. The double-diamond on About is designed here, shipped in a day. The boundary between "design" and "build" gets clearer because each tool now has a lane.
Critique + case studies
Two critique passes. Five case studies. One lesson.
The site looks done. The case studies make it true. This is week six — the week the portfolio earns the right to exist by documenting the work behind the work. Shipped Apr 21.
↓ BULLETIN · WHERE I PAID
- DRAWING NO.
- 05 / 06
- BULLETIN NO.
- SB-2026-04
- SEVERITY
- FIELD ADVISORY
- LAST REV.
- 04/26
05 · SERVICE BULLETIN · WHAT I GOT WRONG
I skipped the brief twice. I paid for it twice.
I skipped the brief twice. Both times the failure mode was the same: asking for output without specifying what mattered most.
Asked Cursor to "design the impact dashboard."
No hierarchy, no metric priority, no interaction logic. Output was technically correct and visually incoherent — every element equally weighted because I hadn't said what mattered most. Two hours fixing what a 15-minute brief would have prevented.
Let AI write three case studies end to end.
Same root cause. Same generic result. The fix was never less AI. It was more specificity. The version you're reading is the rebuild.
↓ HANDOFF · THE LARGER STORY