Do I need a design plan before using this skill?

Yes, this skill requires a pre-existing plan file located in the .claude/plans/design/ directory, typically created by the 'figma-plan' or 'figma-reference-plan' skills.

How does it ensure code quality and consistency?

The skill follows strict coding rules, including the prohibition of comments in TypeScript, specific Zod schema patterns, and mandatory use of project-specific design tokens.

Does it handle images and SVG assets?

Yes, it utilizes provided localhost URLs for images and SVGs and strictly avoids adding new icon packages or creating temporary placeholders.

Which styling libraries does it support?

While it can interpret Tailwind references from Figma, it is optimized to convert designs into Emotion CSS using separate 'style.ts' files to maintain strict project architecture.

Figma Design Implementer

Name: Figma Design Implementer
Author: window-ook

bywindow-ook

0•

Design Tools

Translates Figma design plans into production-ready frontend code following strict project-specific architectural conventions.

The Execute Figma Plan skill bridges the gap between design documentation and production code by systematically processing pre-defined UI implementation plans stored in your project. It automates the creation and modification of frontend files according to specific design tokens, component libraries, and coding standards—such as separating CSS into dedicated style files and adhering to precise TypeScript patterns. This skill ensures high visual fidelity by comparing implementations against design screenshots while maintaining codebase consistency through enforced project-specific rules.

Key Features

01Design token mapping for consistent typography and color systems

02Component reuse orchestration from existing project libraries

03Automatic conversion of UI layouts to Emotion CSS style files

040 GitHub stars

05Automated code generation from structured design plan files

06Visual verification against Figma screenshots for layout accuracy

Use Cases

01Standardizing UI implementation patterns across a distributed development team

02Building complex React components directly from Figma design specifications

03Accelerating frontend development by automating styling scaffolding and file creation

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

Key Features

01Design token mapping for consistent typography and color systems

02Component reuse orchestration from existing project libraries

03Automatic conversion of UI layouts to Emotion CSS style files

040 GitHub stars

05Automated code generation from structured design plan files

06Visual verification against Figma screenshots for layout accuracy

Use Cases

01Standardizing UI implementation patterns across a distributed development team

02Building complex React components directly from Figma design specifications

03Accelerating frontend development by automating styling scaffolding and file creation

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