analyze_design
Analyze Figma designs with AI vision to evaluate visual polish, check WCAG accessibility, or verify spec compliance before code generation.
Instructions
Capture a Figma node and analyze it with AI vision (Claude).
Prereq: bridge + plugin connected; ANTHROPIC_API_KEY set; spec-compliance mode needs the spec in the registry. Returns by mode — general: { summary, issues[], suggestions[], qualityScore }; accessibility: { summary, contrastIssues[], touchTargetIssues[], focusIssues[], wcagLevel }; spec-compliance: { summary, compliant, mismatches[], missingProps[], extraElements[] }. Errors: isError on missing key, no connection, bad node, or missing spec. Modes: general = visual polish; accessibility = WCAG checks of a frame; spec-compliance = rendered design vs saved spec before codegen. Core of the self-heal loop: create → capture_screenshot → analyze_design → fix → verify.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| mode | No | Analysis mode: 'general' for visual quality and polish, 'accessibility' for WCAG contrast/touch/focus checks, 'spec-compliance' to verify the design matches a saved spec (requires specName). | general |
| nodeId | No | Figma node ID to capture and analyze (e.g. '123:456'). Omit to capture the entire current page. Obtain IDs from get_selection or get_page_tree. | |
| specName | No | Name of the spec to compare against (required when mode='spec-compliance'). Use get_specs to list available spec names. |