Generate Annotated Callout Screenshots for Doc Steps

Turns plain screen captures into polished, annotated walkthrough images. For each step in a documented procedure, it shoots the live UI, then generates an overlay with numbered markers, highlight boxes, and a clean caption, producing the kind of annotated screenshot that takes a designer an afternoon to build by hand.

Use it for onboarding guides, how-to articles, and tutorials where readers need visual cues pointing at the exact element to click. Ideal when you regenerate these guides often and re-annotating each screenshot manually is the bottleneck.

1. 1A schedule or manual run kicks off for a chosen doc guide.
2. 2The flow reads the guide's step definitions and target UI selectors from ReadMe.
3. 3Browserbase navigates to each step's screen and captures a base screenshot plus the bounding box of the highlighted element.
4. 4An image generation step composes the annotated version — numbered callout, highlight ring, and caption — from the base capture and coordinates.
5. 5The annotated images are uploaded back to the matching ReadMe page, replacing the prior versions.