design-compare

# Design Compare Compare Figma design screenshots against local preview screenshots, producing a structured visual review and an interactive HTML comparison page. Supports multiple screens in a single report. ## Setup `$SKILL_DIR` refers to the directory containing this SKILL.md file. Resolve it based on where the skill is installed (e.g. `.claude/skills/design-compare`, `.agents/skills/design-compare`, etc.). ## Prerequisites The export script requires a `FIGMA_ACCESS_TOKEN` env var. Store it in `.env` at the repo root: ``` FIGMA_ACCESS_TOKEN=figd_... ``` The script auto-loads `.env` from the repo root. Get a token from https://www.figma.com/developers/api#access-tokens **Important:** Ensure `.env` is listed in `.gitignore` to avoid committing tokens. ## Workflow ### Step 1: Obtain Images for Each Screen Repeat for each screen being compared. Use a slug (e.g. `empty-state`, `list-view`) to name files. Derive the report folder from the project or context name, e.g. `design-compare-reports/LayoutCheckExample/`. Within this folder, store images in per-view subfolders named after the source file (without extension), e.g. `ContentView/`, `SliderView/`. The report folder holds a single shared `config.js` and `report.html`. **Figma design image:** - Extract `fileKey` and `nodeId` from the Figma URL. - Call `mcp__figma__get_screenshot` with the extracted parameters. The screenshot is returned inline for visual comparison in Step 2. - To save it as a file for the HTML page...