analyze_design
Capture a Figma node screenshot and analyze it with AI vision to review visual quality, accessibility, or spec compliance.
Instructions
Capture a Figma node as a screenshot and analyze it with AI vision (Claude).
Prerequisites: Requires Figma bridge running and plugin connected. Also requires ANTHROPIC_API_KEY to be set in the environment — returns isError if the key is missing. For spec-compliance mode, the spec must exist in the registry.
Returns on success: Analysis object — shape varies by mode:
general: { summary: string, issues: [], suggestions: [], qualityScore: number }
accessibility: { summary: string, contrastIssues: [], touchTargetIssues: [], focusIssues: [], wcagLevel: "A"|"AA"|"AAA"|"fail" }
spec-compliance: { summary: string, compliant: boolean, mismatches: [], missingProps: [], extraElements: [] }
Error behavior: Returns isError if ANTHROPIC_API_KEY is not set, if Figma is not connected, if the node ID is invalid, or if specName is missing/not found when using spec-compliance mode.
Mode selection guide:
"general" — visual polish review: spacing consistency, color harmony, typography hierarchy, alignment. Use after creating or modifying a design to catch obvious quality issues.
"accessibility" — contrast ratio checks, touch target sizes, focus indicator visibility, text readability. Use when validating WCAG compliance of a specific frame or component.
"spec-compliance" — compares the rendered design against a saved spec's props, variants, and layout rules. Use to verify that what's in Figma matches what's in the spec before generating code.
This tool is best used as part of the self-heal loop: create → capture_screenshot → analyze_design → fix → verify.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| 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. | |
| 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 |
| specName | No | Name of the spec to compare against (required when mode='spec-compliance'). Use get_specs to list available spec names. |