Claude直接读Figma做代码，这个免费Skill让我少改了无数轮稿

设计师给了一个 Figma 链接，你却发现 AI 生成出来的界面跟原版差了十万八千里——padding 不对、圆角失踪、字体完全不是一个调性。

今天挖到一个让我眼前一亮的开源 Skill：claude-figma-skill。它解决的问题很直接——让 Claude 直接读 Figma 文件，把设计稿变成代码，而不是靠截图描述。

它能做什么？

安装之后，你只需要把 Figma 链接扔给 Claude Code，它就会自动：

• 通过 Figma REST API 读取文件结构和节点树
• 抓取 PNG 渲染图做视觉参考
• 把设计细节（布局模式、间距、填充、圆角、字体）翻译成代码
• 用 Auto Layout 映射，而不是粗暴的绝对定位

最香的是——免费计划就能用。不需要 Figma 桌面端，不需要 Dev Mode，也不需要跑什么 MCP 服务，一个 Personal Access Token 全搞定。

为什么我推荐它？

市面上的 Figma to Code 工具不少，但大多数对免费用户不友好——限流严、门槛高、调 API 还得折腾一堆配置。

这个 Skill 的思路很聪明：绕过高昂的 MCP 限流，用 REST API 直连。rate limit 宽裕，响应更快，而且它把 node ID 规范化、branch 文件处理、错误提示 这些坑都帮你填平了。

唯一需要配置的是设置一个环境变量 FIGMA_TOKEN，在 Figma 个人设置里生成一个，粘贴进去就完事。

安装方式

在 Claude Code 里直接用这条指令安装：

npx skills add steppp/claude-figma-skill

或者手动创建 Skill，把 GitHub 仓库里的 SKILL.md 内容复制进去就行。

适用场景

• 设计师给完稿，开发直接出代码——减少来回沟通
• 快速搭 UI 原型，用真实设计系统而不是 AI 随机生成
• 想把 Figma Design Token 自动转成代码变量

如果你经常在 Figma 和代码之间来回跳，这个 Skill 值得一试。

GitHub 仓库直达 →

GitHub: https://github.com/Stephpp/claude-figma-skill