Annotations guide
Annotations let you give feedback visually — click or draw on the live preview to highlight an element, then type a note. The agent receives both your note and the exact element you pointed at, so it knows precisely what to change.
When to use annotations vs. chat
Section titled “When to use annotations vs. chat”| Situation | Use |
|---|---|
| You know exactly which element needs a change | Annotation — point at it |
| You want a broad change across the page | Chat — describe it in words |
| You see a visual bug in a specific spot | Annotation — highlight it |
| You want to add a new section or component | Chat — describe what to add |
Annotations and chat work together. You can annotate an element and then send a follow-up chat message with more context. The agent sees both.
How to annotate
Section titled “How to annotate”- Open the live preview panel.
- Click the annotation tool in the preview toolbar.
- Click (or draw a box around) the element you want to comment on.
- Type your note — what should change and why.
- Submit. The agent receives the annotation and adjusts its work.
Tips for effective annotations
Section titled “Tips for effective annotations”Be specific about the change
Section titled “Be specific about the change”✓ “Change this button color to #22c55e”
✗ “Fix this”
One annotation per concern
Section titled “One annotation per concern”If you have feedback on the headline and the footer, make two separate annotations. This helps the agent address each one clearly.
Combine with context
Section titled “Combine with context”If the change needs explanation that’s hard to fit in a short note, annotate the element and then send a chat message:
Annotation: “This spacing is off”
Chat: “The card grid should have 24px gaps and the cards themselves need 16px internal padding. See the design system for reference.”
Point at the right element
Section titled “Point at the right element”Click the most specific element possible. Clicking a single button is more helpful than clicking the entire page section that contains it.
What the agent receives
Section titled “What the agent receives”When you submit an annotation, the agent gets:
- The element’s identity — its position in the DOM, its CSS classes, and surrounding context.
- Your note — exactly what you typed.
- A screenshot — a visual capture of what you were looking at.
This gives the agent enough context to make targeted changes without guessing which element you meant.