Skip to main content

​
Chat Context

Context helps AI understand your style, structure, and intent. The better the context, the better the generation.

​
What you can add as context

  • On‑canvas items: any shape already on the canvas (prototypes, components, inspiration screens, images)
  • Images via upload: screenshots or assets you attach in chat
  • @Codebase: files from your connected GitHub repository

​
Three ways to add context

1

Shift+Click (on canvas)

Hold Shift and click any shape to add/remove it from context. Selected context is highlighted.
2

Hover → Add as reference

Hover a non-active canvas item and click the floating “Add as reference” button.
3

Inline mentions with @

In the chat, type @ to open the inline menu. Start typing to search by name — the AI instantly searches through file names, frame names, prototypes, and references as you type.

​
Tips

Explore & Merge: Explore multiple prototypes, then add another prototype as context to merge the best parts into one result.
Assemble sections: Build sections/pages separately, then multi-select them and ask AI to assemble everything into a single cohesive component or layout.
Be explicit: When adding context, state exactly what to apply and from which reference (e.g., “Typography from Button A, spacing from Card B”).