Skills
.Work. You
Rest

figma-design-sync

Community

Pixel-perfect design-to-code sync.

Design & Creative#automation#figma#playwright#pixel-perfect#design-to-code#design-sync#visual-diff
Authori3ringit
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enables teams to automatically align a web implementation with its Figma design, detecting and fixing visual differences to ensure pixel-perfect accuracy across components and states.

Core Features & Use Cases

  • Design capture from the Figma design via MCP to extract typography, color tokens, spacing, and layout.
  • Implementation capture using Playwright MCP to render a live screenshot of the current UI.
  • Systematic visual diffs that compare layouts, typography, colors, borders, shadows, and states.
  • Diff reporting and guided, code-level fixes to bring implementation in line with the design.
  • Use Case: Iterate with designers to resolve discrepancies until the design matches the implementation.

Quick Start

Use the figma-design-sync agent to compare a Figma URL with a local web page URL and apply fixes to align visuals.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-design-sync
Download link: https://github.com/i3ringit/antigravity-cortex/archive/main.zip#figma-design-sync

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.