How does the design fidelity validation work?

The skill launches a Designer agent that captures a screenshot of your running application and compares it against the original design to identify discrepancies in layout, spacing, and typography.

What frontend stack does the UI Implementer use?

It defaults to modern best practices including React 19, TypeScript, and Tailwind CSS 4 for utility-first styling.

Can this skill handle private Figma links?

Yes, as long as you have the Figma MCP configured with the necessary access tokens, the skill can pull specifications directly from Figma designs.

What is 'Intelligent Agent Switching'?

If the standard UI Developer agent fails to fix a design issue after two attempts, the skill automatically switches to the UI Developer Codex, a more specialized agent, to solve the problem.

UI Implementer

Name: UI Implementer
Author: MadAppGang

byMadAppGang

•

177

•

デザインツール

Implements production-grade UI components directly from Figma designs and screenshots with automated design fidelity validation.

The UI Implementer skill automates the translation of visual designs into functional code by orchestrating specialized agents. It handles the entire development lifecycle, from analyzing Figma specifications and design screenshots to generating React and Tailwind CSS code. The skill features a unique validation loop where a 'Designer' agent audits the output, calculates a fidelity score, and triggers an adaptive fixing process—switching between standard and expert agents—to ensure the final implementation matches the source material with pixel-perfect precision.

主な機能

01Automates design fidelity validation using a dedicated Designer agent loop

02Generates comprehensive implementation reports with visual audit scores

03177 GitHub stars

04Ensures accessibility compliance (WCAG 2.1 AA) and mobile-first responsiveness

05Translates Figma URLs and image mockups into React 19 and Tailwind CSS 4 code

06Utilizes intelligent agent switching between standard and Codex models for complex tasks

ユースケース

01Building a production-ready component library directly from Figma design tokens

02Converting legacy design assets into modern, type-safe React components

03Rapidly prototyping web interfaces from high-fidelity mockup screenshots

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code ui-implementer

For use in Claude.ai and ChatGPT

主な機能

01Automates design fidelity validation using a dedicated Designer agent loop

02Generates comprehensive implementation reports with visual audit scores

03177 GitHub stars

04Ensures accessibility compliance (WCAG 2.1 AA) and mobile-first responsiveness

05Translates Figma URLs and image mockups into React 19 and Tailwind CSS 4 code

06Utilizes intelligent agent switching between standard and Codex models for complex tasks

ユースケース

01Building a production-ready component library directly from Figma design tokens

02Converting legacy design assets into modern, type-safe React components

03Rapidly prototyping web interfaces from high-fidelity mockup screenshots

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code ui-implementer

For use in Claude.ai and ChatGPT