Build prototypes

Transform your ideas into testable prototypes — collaboratively, intuitively, and on-brand.

Selection mode

Annotate elements directly on your prototype to prompt targeted AI changes.

What is selection mode?

Selection mode allows you to click directly on any element in your prototype and attach an annotation describing the change you want. When you send, the AI receives the exact element (its position in the component hierarchy, its code, and its path) alongside your instruction, so it knows precisely what to modify without any guesswork.

Selection mode is available on the latest iteration of any thread, both in the main chat and in individual threads. It is not available when viewing previous iterations.


Activate selection mode

To enter selection mode:

  1. In the prompt window, click the Selection mode button, or press ⌥S.
  2. The prototype canvas switches to a focused state — elements are no longer clickable for navigation, but you can still scroll and resize the preview.

To exit selection mode, click the Selection mode button again or press ⌥S.


Place an annotation

  1. Hover over an element to see its full path hierarchy highlighted.
  2. Click the element to open the annotation input.
  3. Type your instruction and save the annotation.

Once saved, the annotation appears as a numbered bubble on the prototype canvas and a matching numbered pill in the prompt input.

Select multiple elements

To annotate more than one element, click and drag to select multiple elements at once. Each selected element gets its own annotation and numbered pill.

Edit an annotation

To change an annotation after placing it, click its bubble on the canvas or its pill in the prompt input. Edit the text and save.

Delete an annotation

To delete an annotation after placing it, click its bubble on the canvas or its pill in the prompt input. Click on the delete button in the annotation bubble or delete all text in the annotation and save it.


Submit annotations to the AI

Once your annotations are placed, you can send them in two ways:

  • From the prompt window: add any additional context alongside your annotation pills and press ⌘ Enter or click Send.
  • From the prototype canvas: use the quick action button in the prototyping area to send all annotations directly without going to the prompt window.

You can send annotations with or without additional prompt text. After submitting, annotations and any accompanying prompt are visible together in the chat history.


Annotations and iterations

Annotations are tied to the thread and persist across page reloads and sessions. The following behaviors apply when iterations change:

  • When a new iteration is generated (by someone else) while you have annotations placed: Supernova automatically switches to the latest iteration and carries your annotations forward, remapping them to the same elements where they still exist.
  • When you switch to a previous iteration: selection mode and annotations is disabled. Switching back to the latest iteration enables them again.
  • When selection mode is not available: the selection mode button is disabled in the prompt window.

On this page:

  • What is selection mode?
  • Activate selection mode
  • Place an annotation
  • Select multiple elements
  • Edit an annotation
  • Send annotations to the AI
  • Annotations and iterations