figma-design-sync_skill

This skill synchronizes web implementations with Figma designs by detecting visual differences and applying precise, iterative fixes for pixel-perfect results.

Python

24

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill ratacat/claude-skills --skill figma-design-sync

SKILL.md8.8 KB

Overview

This skill synchronizes a web implementation with its Figma design by automatically detecting visual differences and producing precise fixes. It focuses on pixel-accurate comparison, documentation of discrepancies, and targeted CSS/Tailwind adjustments. Use it iteratively until the implementation matches the Figma design across breakpoints and states.

How this skill works

The agent captures the Figma node (styles, metrics, and a design screenshot) and takes a high-quality screenshot of the implementation. It performs a systematic visual and spec comparison (layout, typography, color, spacing, shadows, icons, responsive behavior). For each difference it creates a severity-ranked report and applies precise code changes (Tailwind/CSS, layout structure, component props) and then re-verifies the result.

When to use it

After implementing a new component to ensure it matches Figma pixel-for-pixel
When a section looks off at a specific breakpoint (mobile, tablet, desktop)
Before a visual QA sign-off or release to catch subtle regressions
When migrating designs to Tailwind and you need consistent responsive patterns
If interactive states (hover/focus) or shadows and spacing differ from design

Best practices

Capture both Figma specs and implementation screenshots before making changes
Prefer Tailwind default values when within 2–4px of Figma; use arbitrary values only if exact match is critical
Keep components w-full and move max-width/padding to parent wrapper divs
Follow mobile-first patterns (flex-col lg:flex-row, responsive gap/text utilities) and preserve dark mode
Document each discrepancy with element, current vs expected state, severity, and exact recommended fix

Example use cases

Compare and fix a hero section so headings, spacing, and call-to-action align with Figma
Adjust a navigation bar across breakpoints to match Figma spacing, font sizes, and icon placement
Resolve typography mismatches: font family, size, weight, line-height, and letter-spacing
Fix color, shadow, and border differences on cards or modal components
Verify and tune responsive behavior for a feature grid to match Figma at mobile and desktop

FAQ

Provide the Figma file URL (and node ID if possible) and the local or deployed page URL to compare.

Will this change my global styles or only component files?

The agent targets component templates and related CSS/Tailwind; it recommends and documents any wider refactors before applying breaking changes.