Define a visual reference with a bounded purpose
This workflow serves frontend developers and product designers preparing one static screen for implementation discussion. The result is a reviewed component inventory, visual tree and notes, not a cloned application or recovered source code. Agree which viewport and state the screenshot represents and who can approve it. Record capture date, source and intended use; a screenshot cannot establish unseen states.
Use an authorized existing screenshot when the real state requires login or interaction. Website Screenshot is an optional public-page source, not a way to reproduce a private session. Check the returned capture for consent banners, loading placeholders and missing resources. Image metadata helps establish technical dimensions and orientation, but does not establish permission or completeness.
Prepare the image before any disclosure
Review privacy before sending files even to preparation tools, which may process them on a server. Remove sensitive pixels locally or use the structure tool's pre-upload mask before analysis. Inspect metadata, filenames and context as well; a visual mask does not sanitize all surrounding data. Keep restricted originals separate and only share the approved analysis copy. Provider retention policies apply; consent is not a zero-retention guarantee.
The structure tool accepts PNG, JPEG or WebP within 10 MB, 16 MP and 8192 pixels per side and bounds output to 240 nodes. If a dense screen needs a crop, preserve the crop offset and remaining dimensions. Cropping changes the coordinate frame: exported boxes refer to the analyzed image, not automatically to the uncropped source, CSS pixels or a different viewport. Review any manual coordinate mapping explicitly. Cropping is framing, not secure redaction of material still present elsewhere.
Review the extraction, not the confidence score
Quick mode uses one AI request. Precise mode adds at most two crop reviews; invalid patches are discarded and marked partial. It does not guarantee complete detection. Local English OCR may refine nearby boxes for high-confidence exact text matches, but ambiguous and unmatched boxes remain estimates, and absent OCR does not stop analysis. The offline demo is synthetic and cannot validate your screenshot.
Inspect overlays against the exact analysis image. Prioritize visible labels, component type, containment and parent relationships, box boundaries and repeated items. A visual rectangle is not proof of a button element, a click handler or keyboard semantics. Correct what the image supports and list clipped, missing or ambiguous regions instead of inventing them. Model confidence is not an accuracy measurement.
Keep the initial JSON before editing. Correct text, type, parents and boxes in the result, and attach requested redesigns separately from observed evidence. Download JSON and Markdown after local corrections; those exports include review status and usage but not the image itself. Preserve the approved analysis image separately and check that the two exports describe the same revision.
Check a contract and explain each revision
Agree a schema based on the actual export rather than assuming an internal format is stable. Use supported constraints to check required fields and types, then query representative component nodes and review paths in the full JSON. Schema validation cannot establish unique semantic identities, valid cross-references or containment unless those rules are explicitly checked elsewhere. Manually inspect parent references, impossible dimensions and boxes outside the analysis image.
Compare the initial export with the corrected JSON. Explain changed text, moved boxes, reassigned parents and removed hallucinated nodes. Array order or regenerated identifiers can create noisy differences; reconcile them by visible context rather than treating every changed path as a real UI change. Preserve uncertainty and partial status instead of changing labels merely to make a report pass.
Deliver a reference that developers can challenge
Deliver the approved analysis image, corrected JSON, Markdown, crop mapping, agreed schema, review decisions and remaining questions with matching revision names. Verify the package contains no restricted originals, secrets or overlooked private text. Hash final local files with SHA-256 after the last change; a digest identifies copies, not correctness or ownership. Temporary URLs are not a durable package.
The developer should treat inferred styles as proposals and implement a testable page. Verify actual behavior, responsive breakpoints, keyboard access and accessibility separately. This workflow ends at a reviewed visual reference. Use the style-inventory workflow for computed style observations and token proposals, responsive comparison for real rendered changes, or screenshot-guide authoring for procedural instructions rather than mixing those deliverables into this handoff.