Production Prototypes: skip the mockup, get a live preview of your real product

Emma BurrowsEmma BurrowsJuly 3, 20265 min read
Production Prototypes: skip the mockup, get a live preview of your real product

Your coding agent now builds the working demo directly on your production frontend — real components, backend mocked — and hands you a live preview link instead of a separate prototype to reconcile later.

The gap between "looks right" and "is right"

We've written before about prototype-first development — building a rough working version of a feature before writing the spec, so a team can react to something real instead of debating a document. It works. But the standard way teams do it has a catch: the prototype is usually built somewhere else, in Lovable, v0, or Replit, using its own components and its own idea of what your design system looks like.

That means someone still has to do the handoff. Take the prototype, figure out what it was really proposing, and rewrite it — or a spec describing it — in a way that fits the actual codebase. Teams we've talked to put this at a few hours of reconciliation work for every thirty minutes spent building the prototype. The prototype was never the bottleneck. The translation was.

What we built

Production Prototypes closes that gap by building the demo on your real repository, not a scratch one. Ask for a prototype — from chat, from an idea, or from a task — and Rezonant's coding agent builds a deployable UI preview on top of your existing frontend, with backend dependencies mocked. Same components, same design system, same codebase your engineers will eventually ship from. There's no separate tool and no reconciliation step, because there was never a second copy of the product to reconcile.

You pick the repository (Rezonant checks which of your connected repos can actually support a prototype and shows those first), review and edit a short title and description of what's being built, and hit Build prototype. A real task gets created, the agent starts a run against it, and you can follow progress in the Agent tab.

When the build finishes, Rezonant looks for the preview link your own deploy provider already generated — decoding Vercel's PR metadata, checking the GitHub Deployments API, reading workflow output, scanning PR comments — and surfaces an Open preview button as soon as one shows up. If your setup produces more than one deploy candidate, Rezonant picks the one that best matches what actually changed and marks it "Recommended." Open the link, and the prototype itself makes sure nobody's confused about what they're looking at: a first-load banner explains it's a prototype, summarizes what was built, and points to where to try it, with a small persistent indicator afterward.

Why it's built this way

The core idea is that a prototype only saves time if nobody has to translate it afterward. Building on the real frontend means the components, styling, and structure a stakeholder clicks through are the same ones that ship. There's no "does this look right in our actual app" question to answer later, because they're looking at the actual app.

We also didn't want Rezonant deploying anything on your behalf — that's your CI's job, and you've probably already got it configured. Instead, Production Prototypes reads whatever your existing pipeline already posts to GitHub and finds the link for you, so getting from "build started" to "here's something to click on" doesn't involve anyone hunting through workflow logs.

Where it doesn't help yet

Production Prototypes needs a frontend framework it can detect in the repo — React, Next.js, Vite, Vue, or Angular — and it works best when a preview-deploy provider is already wired up. If we can't find deployment history for a repo, we'll flag it "Uncertain" rather than block you: the build will still run, but the preview link might not show up until a provider like Vercel is connected. Backend-only repos aren't eligible, and each prototype targets exactly one repository.

Get started

Production Prototypes is rolling out now. Connect a repo with prototyping enabled in Settings → Repositories, then just ask for a prototype from chat, or offer it up the next time someone asks "can we just see it working?"

Ready to try it with your product?