Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code.
Quickly install figma-mcp AI skill to your development environment via command line
Source: tdimino/claude-code-minoan.
This skill enables accurate design-to-code conversion by leveraging Figma's MCP (Model Context Protocol) server to access structured design data directly from Figma files. Unlike screenshot-based approaches, the Figma MCP provides semantic information about every design element including exact spacing, colors, typography, component hierarchy, and design system tokens, resulting in significantly more accurate code...
When a user provides a Figma URL or requests design implementation:
Use the available Figma MCP tools to retrieve structured design data:
Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code. Source: tdimino/claude-code-minoan.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/tdimino/claude-code-minoan --skill figma-mcpConvert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code. Source: tdimino/claude-code-minoan.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/tdimino/claude-code-minoan --skill figma-mcp Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/tdimino/claude-code-minoan