Building new product features is supposed to be a team sport, but in reality, it’s just herding cats through ten Slack threads, a few untitled Notion docs, and three microscopically different Figma mockups before anyone even sees a working screen.
AI prototyping tools promised to fix all that. “Just describe what you want and bam—a prototype you can send your exec or annoy your designers with.”
But reality sinks in fast. Your slick new demo uses the wrong button styles, doesn't know your brand yellow from Big Bird, and, as usual, is built from disposable code that devs will be rewriting entirely if the team green-lights it.
Here, we’ll demonstrate an AI prototyping process that works for competent teams at scale.
Here’s the checklist every team needs if you want prototypes that don’t wind up in the dumpster after demo day:
- Don’t rebuild from scratch every time: You’ve got perfectly good UI in production. Why copy-paste or recreate it for every single new feature prototype? Anyone should be able to instantly prompt anywhere in your product.
- Use real UI constraints: You want your team’s hard-earned design tokens, live components, and the actual code from your system. Not “sorta-close” knockoffs. Real branches in your real repo.
- Collaboration for grown-ups: Designers tweak visually, devs ship code, and PMs poke every edge case. All in one tool. Enough with the “your turn to prompt the bot.”
- Make it PR-ready: You need the output to be production-grade—functional, reviewable, and mergeable. Your prototype turns into the product without all the back and forth.
And—spoiler—our visual development platform, Fusion, does all of the above. Let’s see what that looks like in practice.
Let’s get hands-on with the setup. First, open Fusion and link your GitHub repo.
- If your design tokens and components live somewhere specific (like a
design-systempackage or inside/ui), you can point Fusion to those files. - Fusion can handle any type of design system, and you can easily use Storybook or a separate docs site to give the AI even better context.
- Fusion pulls in your tokens, all those lovingly named Button and ProductCard components, and learns how your product actually gets built.
For even more accuracy, especially for large projects, you can let Fusion explicitly index your design system, giving the agent optimized documentation for your unique code.
Now, you’re wired up and all set to build beyond just a sketch.
Now for the part where AI really pulls its weight.
In my ecommerce app, let’s say I’m a product manager who wants to see how it would feel to improve the quick “Add to Cart” button with the ability for the user to pick a size. I can prompt Fusion, like:
“Improve the Add to Cart button on each product in the grid, so users can pick a size as they add a product to their cart, without having to go to the PDP.”
Fusion maps that prompt to your actual components and design tokens, generating our new quick add menu inside every ProductCard.
You can now immediately use and test your new component in production conditions. Pick a size, add an item, and see that cart badge update. Full stateful UI, right in the browser.
This works for any new feature, component, or even entire new pages. You’re always one (prompted) step away from something you could PR.
A one-off prototype usually isn’t the end of the story, though. Team members need to iterate on features in different ways. Here’s how Fusion accommodates product managers, designers, and developers.
PMs can explore the prototype like an actual user, tabbing through the picker, spam-clicking “Add to Cart,” and discovering every little edge case before they turn into big bugs.
If they spot a gap or think of a new variant, they can prompt Fusion to tweak the feature, update copy, or add new experiment paths—right in the flow.
Designers can make visual tweaks directly in Fusion: update spacing, colors, button styles, and layouts using live design tokens and components—no back-and-forth, just drag, drop, and save.
Plus, for those moments when they need full control—all the anchors, plugins, or perfect pixel-nudging that only Figma delivers—they can export to Figma, make changes, and round-trip them right back into the codebase.
Developers can jump in on the same branch, using the Fusion VSCode extension (works with AI IDEs like Cursor or Windsurf), to edit real code.
They can tweak component logic, add feature flags, or wire up analytics as needed. All changes sync back to the UI preview in Fusion. They get to work in their native environment, and any edits they make are instantly reflected and ready for signoff.
Now, everyone’s iterating together—real UI, near-real time, and real code, all on the same branch. Think “the speed of a group chat,” only the output isn’t another link. It’s a prototype already halfway shipped.
You’ve built, refined, and tested this feature as a team. Here’s how it moves straight from prototype to production.
When you started prototyping, Fusion automatically created a new feature branch in your GitHub repo. All UI edits, design tweaks, and code changes are organized and versioned, so your team’s changes stay tidy and reviewable.
Every update spins up a fresh preview link. Share with the rest of your team or stakeholders for sign-off, gather feedback directly on what’s running, and iterate in real time. Don’t worry about all the hassle of setting up local environments.
When you’re happy with the result, Fusion opens a pull request with real code, using your design tokens and components. This isn’t a disposable mockup; it’s the exact UI ready for review and merge. All your team’s standard CI checks and code reviews happen on the branch as they always do.
With approvals in, your team can just merge. Your feature moves from prototype to live code with the same workflow your team already trusts.
That’s how production-grade AI prototyping works: ideas built out as real UI, using your own system, with everyone able to pitch in.
If you’re done with throwaway prototypes and want to see feature work flow straight from prompt to production, it’s worth giving Fusion a try.
Turns out, your next release really can start with a prototype that’s already halfway shipped.
