Does this skill require a Figma account?

Yes, to use Figma URLs directly, you must have the Figma MCP configured with an access token. Otherwise, you can provide local screenshots of your designs.

How does the adaptive agent switching work?

If the primary UI Developer agent fails to make progress on a complex design after two attempts, the skill automatically switches to a specialized Codex agent for higher-level problem solving.

What tech stack does the UI Implementer use?

The skill is optimized for modern web development, specifically targeting React 19, TypeScript, and Tailwind CSS 4 for clean, utility-first styling.

Can it fix my existing UI components?

This skill is specifically designed for implementing UI from scratch based on a design reference. To fix existing components, use a standard developer agent or a dedicated debugger skill.

UI Implementer

Name: UI Implementer
Author: involvex

byinvolvex

0•

디자인 도구

Implements pixel-perfect UI components from Figma designs and screenshots using iterative validation and adaptive agent switching.

The UI Implementer skill automates the process of turning design mockups into production-ready frontend code by orchestrating specialized AI agents. It leverages a 'UI Developer' for initial coding and a 'Designer' agent for visual validation, ensuring high fidelity with original design references like Figma URLs or local screenshots. The skill features an intelligent feedback loop that compares the live implementation against the source design, performing multiple iterations to fix discrepancies in layout, typography, and spacing until a high design fidelity score is achieved.

주요 기능

01Direct Figma integration to fetch design specs and screenshots

020 GitHub stars

03Intelligent agent switching between standard UI Developer and specialized Codex models

04Iterative design-to-code validation loop with automated visual reviews

05Automated support for React 19, TypeScript, and Tailwind CSS 4

06Comprehensive quality reporting including accessibility and responsiveness scores

사용 사례

01Building complex UI components from scratch based on high-fidelity Figma files

02Ensuring exact design specifications are met through an automated visual feedback and fixing loop

03Converting static mockups or screenshots into responsive React codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add involvex/involvex-claude-marketplace ui-implementer

For use in Claude.ai and ChatGPT

Download Skill