Can I use it to fix existing UI components?

No, this skill is specifically designed for implementing components from scratch based on a design reference. For fixing existing code, a standard developer agent or debugger is recommended.

Does this skill support Figma links?

Yes, it can extract screenshots and design specifications directly from Figma URLs provided in the prompt.

What happens if the code doesn't match the design perfectly?

The skill enters an automated validation loop where a specialized designer agent identifies discrepancies and a fixing agent applies corrections until the fidelity score reaches a passing threshold.

What tech stack does the UI Implementer use?

It is optimized for React 19, TypeScript, and Tailwind CSS 4, following modern best practices like mobile-first responsive design.

Pixel-Perfect UI Implementer

Name: Pixel-Perfect UI Implementer
Author: tianzecn

bytianzecn

•

Design Tools

Transforms Figma designs, screenshots, and mockups into production-ready React components with automated design fidelity validation.

The UI Implementer skill automates the end-to-end process of frontend development by converting design references into high-quality code. By orchestrating specialized sub-agents, it handles initial implementation, visual validation, and adaptive fixing loops. It supports modern tech stacks including React 19 and Tailwind CSS 4, ensuring that every component matches design specifications while maintaining accessibility standards (WCAG 2.1 AA) and responsive best practices.

Key Features

01Screenshot-to-UI reconstruction using advanced visual analysis

02Adaptive agent switching between standard and expert coding models for complex fixes

03Automated design fidelity scoring and iterative validation loops

04Figma to Code conversion via direct URL integration and spec extraction

051 GitHub stars

06Modern stack implementation using React 19, TypeScript, and Tailwind CSS 4

Use Cases

01Building complex layout structures and dashboard components directly from Figma design files

02Ensuring pixel-perfect implementation through automated visual regression testing and iterative code corrections

03Recreating UI elements from legacy screenshots or mockups when source design files are unavailable

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode ui-implementer

For use in Claude.ai and ChatGPT

Download Skill