argus_design_audit
Audits web page design fidelity against a Figma frame by detecting 13 mismatch types including CSS tokens, colors, typography, spacing, borders, shadows, opacity, and text content.
Instructions
Full design-to-implementation fidelity audit against a Figma frame. 13 mismatch finding types: CSS token values, component presence, fill/text color (RGB delta), typography (fontSize/fontWeight/lineHeight/fontFamily/letterSpacing), Auto Layout padding and gap, border-radius (per-corner), bounding-box overflow, absolute position drift (scroll-corrected x/y, 20px threshold), border stroke (color+weight), box-shadow (offset+blur+spread+color), opacity, and text content. Selector fallback: tries [data-testid], [aria-label], #id, .class per node. Requires FIGMA_API_TOKEN env var and Chrome on --remote-debugging-port=9222. Returns { findings, summary } where summary includes 13 mismatch-type counts.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Full URL of the page to audit (e.g. http://localhost:3000/dashboard). Must be reachable by the running Chrome instance. | |
| figmaFrameUrl | Yes | Figma frame URL to fetch design tokens from (e.g. https://www.figma.com/file/ABC123/Name?node-id=42%3A0). Must include the node-id query parameter pointing to the specific frame. |