What is the figma-design-sync skill?
Figma-design-sync is a skill in ratacat's skills repository. The agent pulls specs and a screenshot from a Figma node, screenshots your running page, compares layout, type, color and spacing, documents every difference with a severity, edits the CSS or Tailwind classes, and can be re-run until the two agree.
Figma-design-sync is a single SKILL.md written as an agent brief. Its job is narrow: once a component or page exists in code, find where it drifts from the Figma design, then change the code until the drift is gone.
The brief assumes a Tailwind project with templates such as ERB, and it tells the agent to follow the project's own coding standards file. It is a code fixer, not a design tool.
The six steps the agent follows
- Design capture. Use the Figma MCP on the given URL and node to read colors, typography, spacing, layout, shadows and borders, and take a screenshot.
- Implementation capture. Use the agent-browser CLI to open the page, take a snapshot and save a screenshot of the running implementation.
- Systematic comparison across layout, type, color, hierarchy, responsive behavior, interactive states, icons and max sizes.
- Difference log. Each discrepancy names the element, current state, expected state, severity and a fix with exact values.
- Precise implementation. Edit the CSS or Tailwind classes, props and layout structure.
- Verification. Check how the changed element sits in the rest of the page, then confirm with the phrase Yes, I did it. and a summary.
The code conventions it enforces
- Components stay full width with w-full and carry no max-width or outer horizontal padding.
- A wrapper in the parent template owns the width limit, centering and responsive padding, for example max-w-screen-xl mx-auto px-5 md:px-8 lg:px-[30px].
- Tailwind defaults win when they land within 2 to 4px of the Figma value: gap-10 over gap-[40px], w-14 h-14 over w-[56px] h-[56px].
- Layouts are mobile first, such as flex-col lg:flex-row, and overflow-hidden is removed from components.
When to reach for it
Best for
- Checking a freshly built hero section, card or form against its Figma frame.
- Fixing a mobile breakpoint that looks off compared with the mobile frame.
- Teams that want repeatable passes, with the agent re-run until the difference list is empty.
Not for
- Starting a page from nothing. It assumes the implementation already exists and runs at a URL.
- Projects without Tailwind or the two tools it names. Its conventions and capture steps are written around them.
- Building the Figma side. For a component library there, see figma-generate-library. For reading Figma data over MCP, see figma-mcp-console-mcp.
Use it with UiChemy
The skill edits code you already have in your project. If the goal is a WordPress site, UiChemy starts earlier: Figma to WordPress converts the design itself. Click Get Started on uichemy.com, then use this check for any hand-built sections. A related bridge is gethopp-figma-mcp-bridge.
How to install Figma Design Sync Skill: Match Code to Your Figma File
git clone https://github.com/ratacat/claude-skills.gitClone the repository
Run
git clone https://github.com/ratacat/claude-skills.git. The skill sits in the skills/figma-design-sync folder.Copy this one skill
The README shows copying individual skills with a command of the form
cp -r skills/<name> ~/.claude/skills/. Usecp -r skills/figma-design-sync ~/.claude/skills/to place this one in Claude Code.Check the two tools it needs
The agent calls the Figma MCP and the agent-browser CLI, which the skill shows as
agent-browser open [url],agent-browser snapshot -iandagent-browser screenshot. Set both up before the first run.Give it both addresses
Ask for a sync and pass the Figma URL with its node ID plus the local or deployed page URL. Without either one, the skill tells the agent to ask you.
Check that it loaded
Point the agent at one finished component, a Figma node and its page URL. It should return a difference log with severities, fix the code, and end with Yes, I did it. and a summary.
Key features
- Figma node as the source of truthThe agent reads the given Figma URL and node through the Figma MCP, extracts the visual properties and takes a design screenshot to compare against.
- Screenshot of the live pageThe agent-browser CLI opens the target URL, runs a snapshot and saves implementation.png, so the comparison uses what actually renders, not the source.
- Wide comparison checklistAlignment and spacing, font family, size, weight and line height, colors, hierarchy, breakpoints, hover and focus states, shadows, icon sizes and max sizes are all compared.
- Severity on every differenceEach log entry names the element and gives the current and expected state, marks it critical, moderate or minor, and proposes a fix with exact values.
- Tailwind defaults firstWhen a Figma value is within 2 to 4px of a Tailwind default, the default is used. Arbitrary values appear only when the exact pixel size is critical.
- Wrapper pattern for widthComponents stay w-full while the parent template owns max width, centering and responsive padding. This keeps sections flowing with their neighbors.
- Dark mode preservedThe brief lists preserving dark mode support among the code changes, so a spacing fix is not allowed to break the dark theme.
- Built for repeat runsFixes are designed so the agent can run again. After each pass it says whether another iteration is needed based on the differences that remain.
- Edge cases handled out loudA missing Figma URL or page URL is requested. Connection problems are reported, ambiguous differences prompt a question, and big refactors are described first.
- Explicit completion phraseA finished pass ends with Yes, I did it. followed by a summary of what changed, which makes a run easy to spot in a long session.
Frequently asked questions
What is the figma-design-sync skill?
It is a skill in ratacat's skills repository that has an AI agent compare a Figma node with a screenshot of your running page. It logs each visual difference with a severity, edits the CSS or Tailwind code, and is meant to be run again until the two match.
How do I install the figma-design-sync skill?
Clone ratacat/claude-skills and copy the skills/figma-design-sync folder into your agent's skills directory. The README shows copying one skill into ~/.claude/skills. You also need the Figma MCP and the agent-browser CLI available, since the skill names both.
Does it work in Claude Code or other agents?
The repository README describes its collection as skills for Claude Code, and the skill refers to the project's coding standards file. The README names no other agent, so treat other tools as untested unless they load the same SKILL.md format.
What does the figma-design-sync skill need to run?
It needs a Figma URL with a node ID, a local or deployed page URL, access to the Figma MCP, and the agent-browser CLI for screenshots. If a URL is missing, the skill tells the agent to ask for it.
Does it only work with Tailwind?
Its fix rules assume Tailwind and templates such as ERB, including mobile-first classes and wrapper divs. The comparison steps are generic, but the code changes follow those conventions, so a project with another styling approach will need to adapt them.
How is figma-design-sync different from a design token or library skill?
It compares pixels on a real page and edits code to close the gap. It does not build a component library or define tokens. For library work in Figma, see figma-generate-library, and for page layout rules see landing-page-design.
What license does the figma-design-sync skill use?
The GitHub license field for ratacat/claude-skills is empty, although the README ends with a license line that says MIT. Confirm the terms in the repository before you copy the skill folder into another product.