How does it handle existing design system components?

It leverages Figma's Code Connect feature to identify when a design element matches an existing component in your codebase, preferring those over-generating new code from scratch.

Can it extract design tokens like colors and spacing?

Yes, the skill analyzes Figma variables and styles to ensure that the generated code uses your project's design tokens for consistency.

Does this skill require the Figma Desktop app?

Yes, this skill utilizes the Figma Desktop MCP server, which requires the Figma desktop application to be running to access selected frames and design data.

Is the generated code accessible?

Absolutely. The skill is programmed to prioritize semantic HTML, proper heading hierarchies, and ARIA labels to ensure all generated components meet accessibility standards.

Which programming languages and frameworks are supported?

The skill can generate code for any modern frontend framework, including React, Vue, Svelte, and vanilla HTML/CSS, depending on your specific requirements.

Figma Component Generator

Name: Figma Component Generator
Author: TheBushidoCollective

byTheBushidoCollective

•

디자인 도구

Transforms Figma designs into semantic, production-ready code while maintaining design system integrity and accessibility standards.

The Figma Component Generator bridges the gap between design and development by allowing Claude to interface directly with Figma via the Desktop MCP server. It analyzes Figma frames, components, and variables to generate high-quality code in React, Vue, or HTML/CSS, prioritizing semantic structure and accessibility. By leveraging Code Connect mappings, the skill can intelligently swap raw design elements for your existing design system components, ensuring that generated code remains consistent with your established codebase and design tokens.

주요 기능

01Framework-agnostic generation supporting React, Vue, and standard HTML/CSS

02Accessibility-first code output using semantic HTML and ARIA best practices

03Direct integration with Figma Desktop MCP server for real-time frame analysis

04Automated extraction of design tokens, variables, and responsive layout properties

05Design system integration via Code Connect to map Figma nodes to existing components

0672 GitHub stars

사용 사례

01Syncing design system updates from Figma directly into a production-ready codebase

02Scaffolding accessible UI layouts with consistent styling based on design tokens

03Rapidly converting high-fidelity Figma mockups into functional frontend components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han figma-generate-component

For use in Claude.ai and ChatGPT

Download Skill