​
How Subframe prototyping works

Subframe follows a design-first workflow: create your designs for pages in a flow, then bring them to life with a real interactive prototype. There are two main ways to prompt your prototype with AI:
  1. Annotations: Add comments to your designs to explain how they should function.
  2. Chat with AI: Prompt your prototype by asking AI to make changes.
Both annotations and chat prompts help AI generate code for your functional prototype that matches your designs exactly.
Tip: use annotations for hand-off – they appear as inline comments in exported code for developer.

​
Creating a prototype

  1. Create a page in Design mode.
  2. Switch to Prototype mode using the toggle in the top-right corner.
  3. Add annotations to describe the functionality for specific elements.
  4. Click the Apply button to create the first version of your prototype.
Note: Every prototype is part of a flow that contains the pages included in the prototype. Create a new flow and add pages to it to create more prototypes.

​
Updating a prototype

Every time you apply design changes, modify annotations, or send a prompt, Subframe creates a new version of your prototype.

​
Making design changes

  1. Switch to Design mode to make updates to your pages.
  2. Add additional pages to a flow to add them to your prototype.
  3. Switch to Prototype mode.
  4. Click Apply to update your prototype with new designs.

​
Updating annotations

  1. Click the Annotate button in the top nav or in the prototype chat bar.
  2. Edit existing annotations or add new ones across any page in the flow.
  3. Click Apply to update your prototype with new annotations.

​
Prompting via chat

  1. Switch to Prototype mode to view the conversation history for the prototype.
  2. In the prototype chat bar, add a prompt to make changes to your prototype.
  3. Click send to update your prototype.
If your prototype gets stuck or needs a fresh start, click Start over to rebuild your prototype from your designs and annotations.