Diana's Diamonds

Building a prototype library to scale AI-driven design.

Role: Lead Designer
Design Engineer
Timeline: September–October 2026
Used by: Designers, PMs, Frontenders
Skills: Prototyping with AI
Design Ops
Developer handoff

prototypes in the first 6 weeks, and growing: 18
deploy pipeline instead of 18: 1
faster handoff to developers: 2x

Every company adopting AI runs into the same problem: prototypes get cheap to make, and just as easy to lose.

At Tactile I build prototypes on our real source code, so developers can ship them. They were becoming a team asset with nowhere to live, so I proposed one library and built it. Past work stays findable, PMs catch up in a minute, and developers start from the design, not from zero.

Problem

The question isn't how to make prototypes, it's where they live once the meeting is over.

Prototypes got lostLinks lived in Slack and tickets, and cleanups deleted past work.

Every prototype lives in one library, so nothing gets deleted to save space.

Nothing said what changedA prototype copies the real app, so the new design was hard to spot.

Each prototype walks you through what changed, step by step.

Handoff started from zeroFrontenders had to dig the design change out of a separate repo.

Prototypes use the real codebase and design system, so developers get the design as a diff.

# design-reviews142 replies

Where is the latest onboarding prototype?

Here:proto-onboarding-v3.app

Is this the one from the review? This link is dead.proto-onboarding-v2.app · 404

That one was cleaned up. Try v4:proto-onboarding-v4.app

What changed between v3 and v4?

And which repo is it in?

Before — Illustration: prototype links lost in chat threads.

Diana's DiamondsFieldGrid

Search by name or ticketAreaStatus

Not startedIn progressReady for review

After — Wireframe: every prototype in one grid, searchable by name or ticket.

The tool

Take the tour

Every prototype, one field.Every prototype as a diamond in one field.

1 / 8

It keeps itself up to date.

Every time a prototype changes, its ticket updates with the link on its own, and the diamond shows how far along it is.

Six Claude Code skills cover the whole loop, from setting up a laptop to building the design for real.

Not started
In progress
Ready for review

Fig. 2 — I designed the stones with Tactile's 3D artists, cut like a Swarovski crystal so they catch light the way a real one does.

“AI prototypes are worthless if they're not collected in one place.”

The idea the whole library is built on

Decisions

Claude in the terminal over an AI agent in the browser.I built a way to add and update prototypes straight from the hub, with an AI agent in the UI. Then I switched it off with our backend engineer: the tokens were too expensive, and at our team size a terminal workflow everyone already used beat a new UI.

The hub's Request a change form: Claude makes the change on a branch of its own — The in-browser agent, before it was retired.

A details page per prototype, not just a link.The brief was a list of links that redirect straight to each prototype. I pushed for a details page instead: what changed, its ticket and its status, so PMs and developers get the context before they click through. It turned out to be the part people didn't know they needed, especially the What's changed section and the ticket history.

A prototype's details page with What's new, its tickets and status — A prototype's details page: what changed, ticket history and status.

People merge, not AI.Claude can open a pull request, but it can never merge or push to main. Every change that reaches production is a person's click.

Guidelines that survive a handover.I tested them on the other designer at Tactile. He added prototypes on his own, just from the published guidelines, and PMs and other teams started using it too.

Impact

All 18 prototypes made it into the real product, and handoff to developers got 2x faster.

— Prototypes in the library, from its git history. Hover the line for each day.

What's next

Prototypes built with Claude are now Tactile's source of truth for design. The goal is for more designers to keep adding to the library after I leave, so it becomes what Figma is for static design, but for AI prototypes.

What I learned

Nobody asked me to build this. People started using it because it made their work easier, not just mine.

AI prototypes are worthless if they're not collected in one place. Scattered, they lose their meaning.

Next case studyDesigning a LiveOps alerting system to reduce production incidents