Skip to content

Prototypes as the spec

Case study · Personal · 2025–2026
AIWorkflowDesktopDesigner + builder

How working prototypes replaced Figma as the engineering handoff spec — and closed deals along the way.

~50Working prototypes shipped
8 PRsProduction slice from one prototype
24 hrsCEO demo, 400-hotel chain
This siteBuilt the same way

Overview

In February 2026, the CEO asked for a demo for B&B Hôtels — a 400-hotel French chain. The sales call was in 24 hours. I shipped a working prototype that night: a QR → Google review → tipping flow, in French, in their brand. The next morning I iterated the payment and review routing while the sales cycle ran.

That turnaround isn't a party trick — it's how I work. Over the past year at Canary I shipped roughly 50 working prototypes on a personal hub, and they repeatedly replaced Figma as the engineering handoff spec. This page is the receipts.

Shipped from the Prototype

In July 2026, the Upsell Segments redesign shipped to production as an 8-PR vertical slice built directly from my prototype. The PM linked the prototype as engineering's source of truth — at one point unblocking engineers mid-build by sharing the live prototype URL while I was on a plane.

No redlines, no spec doc, no handoff meeting. The engineers built what the prototype had already proved: real interactions, real edge cases, real copy. When the spec is something you can click, the ambiguity that normally fills a sprint of back-and-forth just isn't there.

The Code Is the Design

When Eurostars, a 270-property European chain, named a HubOS integration their #1 deal-blocking feature — internally the line was “no HubOS integration = no deal” — I designed the guest service-request flow as working code instead of static mocks: a 5-step wizard engineers built production from directly.

The design brief shipped with evidence tables and a funnel-completion target above 60%, but the artifact that mattered was the running flow. The pattern extended again in July 2026 to HotSOS service requests, covering a meaningfully larger share of the ticketing base.

Scaling the Practice

The prototypes live on one Next.js hub — a searchable landing grid across 19 feature areas, automated thumbnails, shared CanaryUI components, and per-feature decision logs. Sales pulled demos from it. Marketing pulled screenshots. PMs linked it in tickets.

In February 2026 I wrote the org's “Prototyping with Claude” playbook — repo architecture, prompting principles, guardrails, and the MCP toolchain — so the practice wouldn't stay a one-person trick. Exec leadership named me ahead of the org's adoption curve at the March 2026 EPD All Hands, and I mentored designers, PMs, and marketing designers on the workflow.

The Practice Underneath

None of this is a magic prompt — it's an environment. Claude Code runs in the terminal next to my editor, with persistent per-project memory: every project carries a CLAUDE.md with its conventions, gotchas, and current state, so each session picks up where the last one left off.

MCP integrations connect it to my actual tools — Linear, Slack, Notion, Figma, Todoist, Gmail — so morning triage happens in one conversation instead of six tabs. And a running lessons.md turns every mistake into a one-line rule tied to a specific failure, so errors don't repeat across sessions. It compounds.

This portfolio is the same practice pointed at a personal project — the scroll animations, the theme system, the chat bar you might be using right now. I design every decision; AI removes the distance between the idea and the working thing.

What I've Learned

Where AI helps most

Scaffolding and boilerplate, debugging and tracing errors, exploring unfamiliar codebases, translating design decisions into code, automating repetitive workflows, and maintaining context across long-running projects.

Where human judgment is irreplaceable

Taste, prioritization, knowing what to cut, understanding user psychology, navigating ambiguity, making tradeoffs between competing goals, and deciding when something is good enough to ship.

The compound effect

The biggest value isn't any single interaction — it's the accumulation. Persistent context means each session builds on the last. Logged lessons mean the same mistakes don't repeat. Connected tools mean less time gathering context and more time making decisions. It's a practice, not a prompt.