> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-gtmbot-restructure-dark-mode-docs-v2.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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/prototype-mode/annotation-example.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=90f7582f54bd88f992cbe8ae30404d69" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/prototype-mode/annotation-as-code.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=a500943c75f6537590e147ff01b2e4cf" alt="Annotation persisted as code comment" width="493" height="76" data-path="images/prototype-mode/annotation-as-code.png" />
</Frame>
