skills.rest
iclinic
iclinicOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-component

Convert a Figma component into production code with validation and Storybook generation.

9|2|Updated Mar 12, 2026
Search Tags:#automation#figma#mcp#component#storybook#design-to-code#code-generation
One-click install
npx skills add https://github.com/iclinic/afyapowers --skill figma-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-component
Source: https://github.com/iclinic/afyapowers/tree/main/src/skills/figma-component
Command: npx skills add https://github.com/iclinic/afyapowers --skill figma-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Develop Figma components into production-ready code with a standalone, deterministic workflow that enforces strict validation and Code Connect dedup.

Core Features & Use Cases

  • Standalone Figma-to-code implementation: translates a single Figma component into production code independent of the 5-phase workflow.
  • Deterministic task orchestration: validates dependencies, fetches design context, and ensures faithful implementation from Figma to code.
  • Storybook support: optionally generates Storybook stories to illustrate variants and states.

Quick Start

Run /afyapowers:figma-component to implement a Figma component from design to production code.

Frequently Asked Questions about figma-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs to production components?▼

To convert Figma designs to production components, the Skill orchestrates a deterministic workflow that fetches design context via MCP calls and translates a single Figma component into production-ready code with strict validation.

Can I generate Storybook stories from a Figma component set?▼

Yes, you can generate Storybook stories from a Figma component set. The workflow optionally produces Storybook stories to illustrate component variants and states alongside the production code output.

Does the Figma to code workflow require Code Connect dedup?▼

The Figma to code workflow enforces Code Connect dedup to ensure faithful implementation. It fetches code-connect information through MCP calls to prevent duplicate component generation and maintain Figma as the source of truth.

What is the best way to automate single Figma component implementation?▼

The best way to automate single Figma component implementation is using a standalone workflow independent of standard phase sequences. It executes a fixed task sequence with phase gates to validate dependencies and ensure deterministic code generation.

Do I need to use the standard 5-phase workflow to generate code from Figma?▼

No, you do not need the standard 5-phase workflow to generate code from Figma. This Skill operates as a standalone, deterministic process that translates individual Figma components into production code independently.

Related Skills

Explore More Software Engineering Skills→
amijadoamijadoamijadoamijado

implement-design

Translate Figma designs into UI components with design-token mapping.

Community
Advanced
parhummparhumm
25

frontend-component-fix

Diagnose frontend UI bugs and generate patch artifacts for React-like components.

Community
Advanced
rakibulismrakibulism
2

figma-generate-library

Generate Figma design systems from code with token analysis and component validation.

Community
Advanced
LAF-USLAF-US

figma-generate-library

Analyze codebases to generate Figma design-system tokens, components, and documentation.

Official
Advanced