skills.rest
pattobrien
pattobrienCOMMUNITY
Explore all skills by this author →
GitHub

figma-diff

Compare Figma designs to iOS Simulator screenshots using ImageMagick diff pipelines.

2|Updated Oct 16, 2021
Search Tags:#figma#imagemagick#screenshot comparison#ios simulator#visual diff#pixel diff#design qa
One-click install
npx skills add https://github.com/pattobrien/dotfiles --skill figma-diff-pattobrien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-diff
Source: https://github.com/pattobrien/dotfiles/tree/main/claude/skills/figma-diff
Command: npx skills add https://github.com/pattobrien/dotfiles --skill figma-diff-pattobrien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Verifying that an iOS app matches its Figma design normally requires tedious manual side-by-side inspection, and subtle layout or color deviations are easy to miss. This Skill automates visual QA by capturing both the Figma frame and the simulator screen, then producing quantitative diff images that pinpoint every difference. ## Core Features & Use Cases - Figma Frame Capture: Uses the Figma MCP server (Dev Mode) to fetch page metadata, search frames by name, and screenshot target nodes, with a Python script to extract base64 images from the session JSONL. - Three Diff Modes: Generates a layout diff (structural changes highlighted in red), a color heatmap (magnitude of every color delta), and a directional diff (green = Figma-only pixels, blue = simulator-only pixels) using ImageMagick. - Triptych Composite: Stitches Figma, directional diff, and simulator images side by side so the agent can review everything in one image. - Use Case: After implementing a new SwiftUI screen, capture the simulator output and the corresponding Figma frame, then run the diff pipeline to confirm pixel-level design fidelity before shipping. ## Quick Start Compare my Figma design frame to the currently running iOS Simulator screen and show me a diff highlighting every layout and color difference.

Frequently Asked Questions about figma-diff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare a Figma design to an iOS Simulator screenshot?▼

Capture the Figma frame via the Figma MCP server's get_screenshot tool, screenshot the simulator with xcrun simctl io booted screenshot, resize the simulator image to match Figma's 1x dimensions, then run ImageMagick compare to generate a diff image.

How to extract Figma MCP screenshots from a Claude Code session?▼

Use the extract-figma-screenshots.py script with the session JSONL path, a starting line number, and an output directory. It decodes base64 images from get_screenshot tool results and saves them as named PNGs.

What ImageMagick commands create a visual diff between two images?▼

Use magick compare with -metric AE and -fuzz 10% for a structural layout diff, magick composite with -compose Difference plus a color lookup table for a heatmap, and a Mathematics compose pipeline for a directional diff showing which image sourced each change.

Does Figma screenshot capture require the desktop app?▼

Yes, the Figma desktop app must be open with the target file as the active tab, and Dev Mode must be enabled so the MCP server runs on 127.0.0.1:3845. The iOS Simulator must also be running with the target screen visible.

Why do Figma and simulator screenshots have different sizes?▼

Figma exports frames at 1x resolution (e.g. 393x852) while the iOS Simulator captures at 3x retina (e.g. 1206x2622). Resize the simulator image down with magick -resize before comparing so pixel coordinates align.

Related Skills

Explore More Design & Creative Skills→
satanyakivsatanyakiv
11

figma-handoff

Translate Figma frames into Compose Multiplatform UI code.

Community
Advanced
keturkketurk
2

Self-Correcting Codegen Fix Loop

Automate iterative code generation fix loops by applying template changes and running tests.

Community
Advanced
Sir-chawakornSir-chawakorn
9

implement-from-design

Translate Figma designs into React and Tailwind CSS components with visual-diff verification.

Community
Advanced
onejsonejs
4.5k

ios-simulator-skill

Automate iOS simulator testing, building, and UI interaction using accessibility-driven scripts.

Official
Advanced