figma_analyze_design
Inspect a Figma frame, compare it to your Design System, and propose non-destructive fixes: swap raw colors, spacing, text, and buttons for tokens, variables, styles, and DS instances.
Instructions
Mode B. Inspect the selected frame (or node id), compare it to the Design System, and propose NON-destructive transformations: custom buttons/inputs → DS instances, raw spacing/radius → tokens, raw colors → color variables, raw text → text styles, manual layout → Auto Layout. Returns an analysisId + grouped summary. Nothing is changed.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| mode | No | audit (default): exact matches only. sync: after an import (e.g. from HTML), match to the Design System like a designer: buttons and pills become DS components with the closest-looking variant, text gets the style with the same size and weight (even if the import used a stand-in font), colours get variables or colour styles. a11y: WCAG 2.2 checks (text contrast against its real background, touch target size, tiny text). critique: a11y plus consistency signals (spacing off the scale, font sizes, raw colours, near-miss alignment) for the visual critique loop | |
| target | No | 'selection' (default) or node id | |
| verbose | No | Include every transformation (default: summary + first 40) |