diff_reference
Compare component render against a reference image to detect visual differences. Returns pixel diff percentage and pass/fail for design QA.
Instructions
Compare rendered component output against a reference image (e.g. from Figma export or previous snapshot). Returns pixel diff percentage and pass/fail status. Use this for design QA — verify your component matches the design.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Component code to render and compare | |
| framework | No | Framework: html, react, vue, or svelte | react |
| referenceImage | Yes | Reference image as base64-encoded PNG | |
| width | No | Viewport width (px) | |
| height | No | Viewport height (px) | |
| threshold | No | Pixel matching threshold (0-1). Lower = stricter. Default 0.1. | |
| darkMode | No | Render with dark mode | |
| tailwindVersion | No | Tailwind CSS version (3 or 4) | 3 |