Can it verify visual accuracy?

Yes, it uses the get_screenshot tool to compare the implementation against the original Figma design, checking layout, typography, colors, and spacing.

Does it support existing design systems?

Absolutely. It is designed to prioritize and reuse existing components from your project's common and design system directories.

What coding rules does it enforce?

It enforces specific rules like excluding comments from TypeScript, separating CSS into dedicated files, and following specific Promise and useEffect patterns.

What is required before using the Execute Figma Plan skill?

You must first generate a plan file using the 'figma-plan' or 'figma-reference-plan' skill, which is stored in the .claude/plans/design/ directory.

How does this skill handle styling?

It automatically converts styles (often provided as Tailwind in Figma) into Emotion CSS and moves them to a separate style.ts file to keep your components clean.

Figma Design Implementer

Name: Figma Design Implementer
Author: window-ook

bywindow-ook

0•

디자인 도구

Implements production-ready frontend code by following structured Figma design plans and project-specific styling conventions.

The Execute Figma Plan skill bridges the gap between design and development by automating the implementation of UI components based on pre-defined plans. It systematically reads implementation guides from the .claude/plans/design/ directory and converts Figma-based specifications into high-quality code. This skill is particularly powerful for projects requiring strict adherence to local conventions, such as migrating Tailwind styles to Emotion CSS, utilizing specific design system tokens, and maintaining clean architectural patterns like separating styles from logic.

주요 기능

01Seamless integration with existing design system components and tokens

02On-the-fly conversion of Tailwind CSS to Emotion CSS (style.ts)

030 GitHub stars

04Automated execution of structured Figma implementation plans

05Visual fidelity verification using Figma screenshots and layout comparison

06Strict adherence to project-specific TypeScript and React conventions

사용 사례

01Migrating design specifications into local CSS-in-JS architectures

02Standardizing UI development workflows based on pre-approved implementation plans

03Transforming detailed Figma mockups into production-grade React components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab execute-figma-plan

For use in Claude.ai and ChatGPT

주요 기능

01Seamless integration with existing design system components and tokens

02On-the-fly conversion of Tailwind CSS to Emotion CSS (style.ts)

030 GitHub stars

04Automated execution of structured Figma implementation plans

05Visual fidelity verification using Figma screenshots and layout comparison

06Strict adherence to project-specific TypeScript and React conventions

사용 사례

01Migrating design specifications into local CSS-in-JS architectures

02Standardizing UI development workflows based on pre-approved implementation plans

03Transforming detailed Figma mockups into production-grade React components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab execute-figma-plan

For use in Claude.ai and ChatGPT