Extract Figma design data and generate developer-ready artifacts via MCP.
npx skills add https://github.com/lunaticwithaduck/majstorbg --skill figma-lunaticwithaduck
Please help me install this Agent Skill. Skill: figma Source: https://github.com/lunaticwithaduck/majstorbg/tree/main/apps/web/.claude/skills/figma Command: npx skills add https://github.com/lunaticwithaduck/majstorbg --skill figma-lunaticwithaduck
Figma to code handoff often requires manual translation of designs and tokens into code. This skill automates extraction of layout, typography, color tokens, and component structures from Figma via the MCP, enabling faster and more accurate handoff to developers.
Connect to a Figma MCP channel, select a design, and trigger token extraction and code generation for developer handoff.
High-intent search queries and answers about installing and using this skill.
To convert Figma designs to React components and design tokens, this skill extracts layout, typography, and color data via MCP to generate developer-ready artifacts including React and Tailwind component scaffolds.
Automating Figma design-to-code handoff involves extracting design tokens and component structures via MCP, then generating structured data models, visual references, and developer annotations for rapid frontend integration.
Yes, you can extract typography and color tokens from Figma. The skill reads document and selection data via MCP, pulls styles and components, and translates them into frontend token formats for integration.
Figma MCP integration for code generation requires curl, bun, and git. These dependencies support the execution of scripts that extract design data and scaffold components for developer handoff.
To map Figma design tokens to Tailwind outputs, the skill translates extracted colors, typography, spacing, and radii into frontend token formats and generates corresponding React and Tailwind component scaffolds.
Limitations when extracting Figma component scaffolds via MCP depend on the structured data models available in the document. Complex visual references and channel-based collaboration require proper MCP connectivity to ensure accurate token mapping.
NagyViktTranslate Figma design nodes into framework-specific application code.
involvexScaffolds and bundles React/Tailwind/shadcn-ui projects into a single HTML file.
lastnight030506Guide users through structured frontend design discovery and generate code.
ivanyeorsTranslate UX wireframes into a token-driven frontend design system with handoff packages.
