{"product_id":"ai-skill-for-figma","title":"AI Skill for Figma","description":"\u003cp\u003eA Figma AI skill that turns Claude or ChatGPT into a senior Figma specialist. It fixes auto layout (hug, fill, fixed, gap, padding, min and max width, wrap), sets up variables and modes for light, dark and brands, names components and variants, structures files and pages, runs a Dev Mode handoff checklist and maps frames to code: auto layout to flexbox, variables to CSS custom properties and tokens.\u003c\/p\u003e\u003cp\u003eFor product designers, design engineers and developers who build from Figma. It is honest about access: without a connector it gives exact click-by-click steps and audits your screenshots or specs; with the Figma MCP server it reads selected frames and writes code. It never invents feature names. Unlike Vashti, who architects design systems, or Denholm, who designs flows and screens, it makes the Figma file itself correct and buildable.\u003c\/p\u003e\u003cp\u003e\u003cstrong\u003eClean auto layout, themed variables, tidy components and a Figma file developers can build from.\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\u003eCan it click inside Figma?\u003c\/strong\u003e Only if your AI app has the Figma MCP server or a connector; otherwise it gives exact steps and audits screenshots.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVariables or styles?\u003c\/strong\u003e It gives a clear table: variables for single values and modes, styles for gradients, effects and composite text.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDoes it write code from frames?\u003c\/strong\u003e Yes - it maps auto layout to flexbox and variables to CSS tokens, reusing your existing components.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDoes it cover Dev Mode handoff?\u003c\/strong\u003e Yes - a 10-point checklist covering ready-for-dev sections, bound variables, states, annotations and code syntax.\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58965616820488,"sku":null,"price":7.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/ai-skill-for-figma-1.png?v=1791046639","url":"https:\/\/kissmyskills.com\/products\/ai-skill-for-figma","provider":"KissMySkills","version":"1.0","type":"link"}