Visual Verification

ptb verify catches visual drift between your code and the Figma design by comparing a screenshot of your running component against the thumbnail captured during ptb scan. No live Figma connection required at verify time.

How it Works

1. Scan captures a reference. ptb scan saves a thumbnail for each component to .ptb/thumbnails/. This is the ground truth.
2. Verify screenshots your implementation. With Storybook running locally, ptb verify uses Playwright to capture the component at its default variant.
3. Pixel diff. The two images are compared and a similarity score (0.0–1.0) is returned. A score ≥ 0.90 passes. An annotated diff image highlights exactly where the discrepancy is.

CLI Usage

ptb verify component Button         # verify a single component
ptb verify component .              # verify all implemented components
ptb verify component Button --story Primary  # target a specific Storybook story
ptb verify component Button --fresh-figma    # re-fetch screenshot live from Figma

Storybook must be running on localhost:6006 (or the port configured in ptb.config.json) for the CLI verify to work.

MCP Usage

From your AI IDE chat:

run_verify({ name: "Button" })
run_verify({ name: "Button", story: "Primary" })

The AI can read the diff image and adjust styles to fix failing areas without you describing what's wrong.

Interpreting Results

The annotated diff image is saved to .ptb/verify/<component-name>.diff.png after each run.

Tips

• Run ptb scan again if the Figma design has changed since you last scanned — the thumbnail needs to be fresh.
• Storybook stories generated by ptb generate-components are pre-wired to match the Figma default variant, making verification accurate out of the box.
• Use ptb verify component . after bulk implementing all components to catch regressions before stamping.

Next Steps

Once implementation passes verification, stamp it with State & Freshness Commands.