Challenge
Designers were stuck handing static Figma files to engineering and waiting to see their ideas come alive. There was no low-friction way to test a real, interactive idea, and no shared place to see what the rest of the team was exploring. I wanted designers and PMs building and shipping real prototypes with AI tools. But that needed a safe, shared home: somewhere your experiments couldn't break anyone else's work, and where anything you built was instantly shareable with stakeholders.
Solution
I built the sandbox with Next.js and Claude as a low-friction space to experiment. The whole thing is designed so the gallery maintains itself and a designer's only job is to build.
A gallery that updates itself
The Next.js App Router reads the frontmatter from every prototype's `prototype.md` at build time, so a new prototype shows up in the gallery automatically the moment it's merged to main. No manual list to maintain. It deploys on Vercel, with cards, tags, and filters so the team can browse by person or status.
The sandbox gallery — every prototype on the team in one place
One folder per person, zero collisions
Every team member gets their own folder under `prototypes/[name]/` with a `USER.md` defining their name, role, and tag color. Your work lives entirely in your folder and can't affect anyone else's. That isolation is the thing that makes the sandbox feel safe to experiment in — there's no way to break the shared space.
Claude Code does the scaffolding
A `CLAUDE.md` at the root encodes the rules Claude Code follows in the project, paired with a `savvy-shell.jsx` starter template. A designer launches Claude Code and says "Add a new prototype called X for [me]." Claude reads their `USER.md`, creates the folder, and scaffolds a starter component inside the Savvy shell with shadcn/ui components ready to go. They build from there — in real React, not a mockup.
Paired with a guide
The sandbox ships with a companion AI Prototyping Guide that teaches the workflow end to end, plus a "Get started" drawer inside the app itself covering the file structure and what's safe to touch. The goal was to make starting genuinely frictionless, even for designers who'd never opened a terminal.
Impact
The sandbox turned prototyping from an engineering dependency into something designers do themselves. The team now publishes interactive prototypes that stakeholders can click through directly, and every designer has their own folder of work in the gallery. The deeper win was cultural: it gave the team a reason and a safe space to start building in real code with AI, which is the shift I most wanted to drive. Design stopped stopping at the Figma file.
Reflections
This was a 'lead by doing' project. Rather than asking the team to adopt a new way of working in the abstract, I built the tool myself with Claude and made the first move easy — clone, type one sentence to Claude Code, and you have a running prototype.
The design that mattered most wasn't visual. It was the constraints: one folder per person, automatic publishing, a starter shell. Get those right and the tool teaches the workflow on its own. That's the kind of leverage I'm always looking for as a manager — make the right thing the easy thing.