> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/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/rXK64HhL3P7RMdKN/images/prototype-mode/annotation-example.png?fit=max&auto=format&n=rXK64HhL3P7RMdKN&q=85&s=a54958878c454f14e50caa2a0d6caea5" 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/rXK64HhL3P7RMdKN/images/prototype-mode/annotation-as-code.png?fit=max&auto=format&n=rXK64HhL3P7RMdKN&q=85&s=9d84e1c9d08af209a1ca07304e108141" alt="Annotation persisted as code comment" width="493" height="76" data-path="images/prototype-mode/annotation-as-code.png" />
</Frame>
