> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-claude-pensive-edison-vkext.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Annotations

> Add implementation notes to guide AI prototype generation.

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-claude-pensive-edison-vkext/-x3cEgbkuFm67xsT/images/prototype-mode/annotation-example.png?fit=max&auto=format&n=-x3cEgbkuFm67xsT&q=85&s=dd6fd4afcca6cfa360591ec585f5907b" alt="Example of an annotation on an element" width="712" height="469" data-path="images/prototype-mode/annotation-example.png" />
</Frame>

Annotations let you add implementation notes to your design. They are used by prototype mode to instruct AI how your designs should behave.

## Adding annotations

1. Click **Annotate** in navbar
2. Click on an element in canvas
3. Type the annotation
4. Press <kbd>Cmd</kbd> + <kbd>Enter</kbd> to save

You should see blue dots on elements for each annotation.

## Exporting to code

Annotations are also useful for documenting your design for handoff. Any annotation will be exported as comments in code:

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-claude-pensive-edison-vkext/-x3cEgbkuFm67xsT/images/prototype-mode/annotation-as-code.png?fit=max&auto=format&n=-x3cEgbkuFm67xsT&q=85&s=e21a9c681fee12954c038403dfc929a4" alt="Annotation persisted as code comment" width="493" height="76" data-path="images/prototype-mode/annotation-as-code.png" />
</Frame>
