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