{"product_id":"figma-mcp-skill","title":"Figma MCP Skill for Claude - Design to Code","description":"\u003cp\u003eA Figma MCP skill that teaches Claude to work through Figma's official MCP server. It sets up the remote or desktop server in Claude Code, Claude Desktop or claude.ai, then turns real frames into code with get_design_context, get_metadata, get_screenshot and get_variable_defs. Output reuses your components and tokens, maps variables to CSS, uses Code Connect, writes a design system rules file and checks the result against a screenshot of the design.\u003c\/p\u003e\u003cp\u003eFor developers and design engineers who build from Figma. It never claims to have read a frame without a tool call and asks before any write to your file. Unlike our AI Skill for Figma, a general Figma specialist that works mostly without a connector, and our AI UI Design Prompt Generator, which writes prompts for Stitch, v0 and Figma Make, this skill is MCP design-to-code. MCP Server Builder and Xanthe build MCP servers; this one uses Figma's official server.\u003c\/p\u003e\u003cp\u003e\u003cstrong\u003eReal Figma frames turned into code that reuses your components and tokens, checked against the design.\u003c\/strong\u003e\u003c\/p\u003e\u003cp\u003e\u003cstrong\u003eCompatible with:\u003c\/strong\u003e Claude, Claude Code, ChatGPT, Gemini and Copilot. Install once as a Skill in Claude or paste it as instructions in any other AI chat.\u003c\/p\u003e\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eWhich Figma MCP server does it use?\u003c\/strong\u003e Figma's official server: the remote one at mcp.figma.com or the desktop one in the Figma app.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDoes it work in Claude Code?\u003c\/strong\u003e Yes - it includes the claude mcp add command, the plugin route, authentication and connection checks.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eWill it change my Figma file?\u003c\/strong\u003e Not by default. It reads only and asks for your yes before any write tool such as use_figma.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eWhat about big screens?\u003c\/strong\u003e It reads the outline with get_metadata first, then builds and verifies one section at a time.\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":59028706558216,"sku":null,"price":19.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/figma-mcp-skill-1.png?v=1791446548","url":"https:\/\/kissmyskills.com\/products\/figma-mcp-skill","provider":"KissMySkills","version":"1.0","type":"link"}