figma-design-sync
95 / 100 · Low risk
Fine to try.
Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\n\n<example>\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\nuser: \"I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?nod…
What this skill can do
Runs commands on your computer
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'figma-design-sync' ] || [ -L ~/.agents/skills/'figma-design-sync' ]; then echo 'A skill folder named figma-design-sync already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/ratacat/claude-skills' "$d" && git -C "$d" checkout --quiet 'd4b471d05ddad5c69a8c0e1da69fd94e957f0a4b' -- 'skills/figma-design-sync' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/figma-design-sync' ~/.agents/skills/'figma-design-sync' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'figma-design-sync' ~/.claude/skills/'figma-design-sync' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
[](https://zalavijaysinh.github.io/skilltrust/repos/ratacat/claude-skills/)
Score history
| Date | Version | Score |
|---|---|---|
| 2026-11-09 | d4b471d | 95 |