Figma 设计稿直接出代码！这个 Claude Skill 让前端不要太好摸鱼

每次设计稿交付后，前端最头疼的就是「还原度」问题——Figma 里好好的间距、颜色、组件变体，到了代码里总是差点意思。现在有个叫 figma-to-code 的 Claude Code Skill，号称能把 Figma 设计直接转成生产级 React/Next.js 代码，实际体验下来确实有点东西。

它能做什么

这个 Skill 不是简单截图描述，而是真正调用 Figma MCP 工具链去读取设计文件。装上之后，你只要对 Claude 说「把这个 Figma 组件转成代码」，它就能自动：

• 识别组件结构、变体（variants）和属性映射
• 复用已有组件库而不是重复造轮子
• 区分前端/后端逻辑边界，防止把业务代码污染到 UI 层
• 加上 TypeScript 类型安全 + 无障碍（a11y）基础支持
• 自动生成 mock 数据，省去自己写假数据的功夫

适合谁用

如果你：正在用 Figma + React/Next.js 做项目，团队里设计师和前端经常因为「这个间距不对」「颜色偏差」反复沟通——这个 Skill 能显著减少这种来回。它不是要取代前端，而是把那些机械的「设计稿翻译成代码」过程自动化，让开发者把精力放在真正的业务逻辑上。

怎么装

前提：装好 Claude Code CLI 和 Figma MCP Server。然后：

• git clone https://github.com/scoobynko/claude-code-design-skills.git
• cp -r claude-to-code ~/.claude-code/skills/
• 重启 Claude Code，搞定

MIT 协议，39 Stars，算是设计转代码这个细分方向里比较实用的一个。

GitHub 仓库戳这里 →

GitHub: https://github.com/scoobynko/claude-code-design-skills