Skip to main content
Turn your design into a working prototype you can use and share, like a prototype mode, but wired up for real.

​
On this page

​
Overview

Build behavior yourself or ask the AI to build it, navigate between screens, edit text, or create something more complex. Because the prototype uses real components, it behaves like the product you built. A text editor is a working text editor. A game is a playable game. Share a link, and anyone can try it in a browser. Update it anytime without having to change the link, so recipients always see the latest version.

​
What is a prototype?

A prototype is a functional version of your design. It can include simple navigation, a working text editor, a clickable game, or anything in between. Features that need live infrastructure have limits. Real user accounts, server-side data storage, and email delivery need a backend. Everything else runs for real, both when you test it yourself and when someone opens the shared link.

​
Video walkthrough

​
Create and share a prototype

  1. Design the screens. Build them on the canvas like you normally would, using your existing components and design system. A prototype usually strings several screens together, so lay out the flow you want people to walk through.
  2. Build the behavior. Add interactions yourself, or press Cmd + L to reference your designs in the chat and describe the behavior you want.
  3. Try the prototype. Click through the result on the canvas. You can use Edit component to refine any part of it, then ask the AI for further changes.
  4. Share the link. When you’re ready, hit the play button in the top right to get a shareable link. Send it to anyone and they can open the prototype and interact with it in a browser.