Margo
An agent that reads a coded prototype and places interaction notes beside the corresponding Figma mockups.
A prototype shows how something behaves. A mockup shows how it looks. The rules between the two were getting lost or being typed out by hand. I built Margo to turn the prototype logic into short notes, placed beside the screen where someone needs them.
Margo reads the prototype, writes interaction notes, and places them as reusable annotation cards next to the right artboards. When the source is inaccessible, it provides an extraction prompt to run inside that environment. Optional companions capture flow states with notes and flag design-system components that are not yet implemented.
A handoff you can actually read.
Toggle the notes, select a card, and see the behavior beside its screen. This is an interactive handoff diagram using the portfolio.
Less handoff guesswork.
The name comes from marginalia: notes in the margins. Margo packages the core annotation workflow and optional flow-screenshot and component-gap checks as skills. This diagram uses portfolio screens and illustrative notes. It is not a live Figma file, and the sample gap is not an audit finding about this website.