figma-loop
CommunityPixel-perfect UI verification loop.
AuthorEtanHey
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the tedious process of ensuring UI implementations precisely match Figma designs, catching and fixing discrepancies iteratively until pixel-perfect accuracy is achieved.
Core Features & Use Cases
- Iterative Verification: Compares screenshots of Figma designs against live implementations, identifying and rectifying differences.
- 3-Check Rule: Enforces a rigorous standard where a component is only considered complete after three consecutive successful checks with no changes needed.
- Use Case: When a developer implements a new button component, they can use this Skill to compare it against the Figma design, fix any alignment, color, or spacing issues, and repeat the process until it's a perfect match.
Quick Start
Run the figma-loop skill to start an iterative verification process for your current UI implementation against a Figma design.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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-loop Download link: https://github.com/EtanHey/golems/archive/main.zip#figma-loop Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.