feat: ai utilities for working with figma files

[c-lamoureux]

Description

AI Utilities for feature development. These are work in progress and will require ongoing improvements and testing.

• LLM workflow for converting Figma designs into Storybook stories.

• Spec diffing pipeline for validating new feature implementations.

  Claude Code skills (.claude/commands/):

  • figma-example-story — end-to-end orchestrator: analyze → generate → verify loop with up to 3 auto-fix iterations
  • analyze-chart-design — fetches Figma assets via MCP, extracts SVG structure, writes design-observation.json
  • generate-chart-story — reads the observation, runs a feasibility check against RSC types/docs, writes the S2 Storybook story and implementation-hypothesis.json
  • verify-chart-story — screenshots the story with Playwright, pixel-diffs against the Figma reference, classifies discrepancies by fix category (story fix / new prop / spec builder work
    / moonshot)
  • implement-feature (private) — guides new prop implementation with a before/after Vega spec diff to confirm the change

  Scripts (scripts/ai/):

  • playwright-screenshot.mjs — starts a Storybook dev server, screenshots the chart SVG, extracts inner plot bounds
  • diff-images.mjs — pixel diff between two PNGs with optional region cropping for plot-area comparison
  • extract-structure.mjs — parses SVG paths/lines/text into a normalized JSON schema for structural comparison
  • build-spec.mjs — builds a sorted Vega spec from a ChartOptions JSON file
  • spec-diff.mjs — LCS-based unified diff of two Vega spec files
  • compare-chart-options.mjs — pipeline wrapper: build both specs and diff in one command
  • fetch-figma.mjs — standalone Figma asset fetcher (FIGMA_TOKEN-based alternative to MCP)

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-757

📚 Docs -> https://opensource.adobe.com/react-spectrum-charts/PR-757-docs/