A few months ago, I went down a rabbit hole looking for a faster way to prototype ideas in code that actually feel like Buffer.

For a while, I had my own separate prototyping app, a small Next.js app.

It worked, but before I could explore an idea, I had to recreate enough of Buffer to make the prototype feel real.

And as Buffer evolved, my little prototype slowly became a different product.

So I tried the opposite: prototyping directly in our codebase.

Everything was there. Everything was up to date.

But now a quick prototype came with the entire production codebase: backend logic, legacy code, setup, and PRs landing in the main codebase with the risk of breaking things.

Neither felt right.

So I tried something in between.

I asked Claude to look at our actual codebase and rebuild Buffer as a frontend-only app.

Keep the UI.
Use our real design system.
Leave behind the backend and database.
Swap in simple JSON data.

To my surprise, it didn’t take long to get the first version working.

That became Proto 🛝
A prototype playground that feels like Buffer, where I can quickly explore ideas in code and share them with the team.

Later, I built templates for different parts of Buffer, so anyone on the team could jump into the part of the product they wanted to explore instead of starting from a blank page.

I also added resync scripts, so when the real product changes, we can pull those changes from production and rebuild the relevant parts in Proto.

And over time, it stopped being just my prototyping tool.

Designers, PMs, and engineers started using it too.

Proto is becoming our prototyping playground, and a place where we can see everything being explored across the team.

And we’re still improving it as we learn.

One thing we recently added is commenting and sharing feedback directly inside Proto, something we really missed from Figma. Big thanks to Sofia Toso for making the feature possible 👏