夜雨聆风Claude Code + Claude官方插件，让 Figma 设计稿直接变成前端页面，从此告别手写样式。
🔗 上系列文章回顾：我用 4 篇文章系统介绍了"Claude Code 在企业级前端项目上的实践"（目录见文章底部的“cc文章合集”），涵盖了 Git Hooks、安全审查、CI/CD 集成等核心场景。但对于前端研发来说，还有一个绕不开的工作——"写页面"，也就是把 UI 出的 Figma 设计稿还原成代码。今天这篇文章就来聊聊这个。
没有 AI 之前，我们主要是手写 HTML 标签 + CSS 样式的方式来还原页面——高级一点的会用低代码平台，但效率依然低下，遇到复杂交互更是头疼。
有了 AI 之后，情况就完全不一样了。通过 Claude Code（以下简称 cc）+ Claude 官方插件（figma@claude-plugins-official） 的组合，可以直接从设计稿生成页面代码，前端不用再一行一行"写页面"了，效率提升非常明显。
以下是完整的操作指引，跟着走一遍就能上手。
一、【环境准备】安装 Claude 官方插件
打开 cc 对话框，根据需求选择安装方式：
claude plugin install --scope project figma@claude-plugins-official
claude plugin install --scope user figma@claude-plugins-official
命令执行完成后，建议检查插件安装记录索引文件，确认安装是否成功：
C:\Users\xxx\.claude\plugins\installed_plugins.json
插件文件实际存放位置：
C:\Users\xxx\.claude\plugins\cache\claude-plugins-official\figma
进入该目录就能看到已安装的插件版本。
二、【环境准备】验证插件 & 完成 OAuth 授权
步骤一：开启插件
首先需要在项目的 cc 设置文件 .claude/settings.json 中开启 figma 插件。
然后在 cc 对话框中输入 /plugin，切换到 "Installed" 标签页，查看插件是否已启用且可用。
步骤二：OAuth 2.0 授权登录
在 cc 对话框输入 /mcp，选择 "plugin:figma:figma"，
进入 Figma 的 OAuth 2.0 授权流程：
1.点击 Authenticate 进行授权（已授权过的会显示"再授权"）
2.如果浏览器没有自动打开授权链接，手动拷贝链接到浏览器打开
3.输入 Figma 账号和密码完成登录授权（已登录过的会跳过此步）
4.对话框显示"授权登录成功"即完成
✅ 插件安装 + 授权完成后，环境准备就绪。接下来进入核心流程。
三、【核心流程】创建 /figma-design-2-code 技能
这个技能的核心作用是：根据 Figma 设计稿链接，规范生成符合项目规范的页面代码。 整体流程拆分为 5 步：
1.解析 Figma 链接——从用户提供的 Figma 链接中提取关键信息：
fileKey：URL 中 /design/ 或 /file/ 后面的文件 ID
nodeId（可选）：URL 参数 ?node-id= 指定的节点 ID
2.确认代码目标（⚠️ 不得跳过此步骤）——向用户确认两个问题：
问题 1：本次是新增页面还是修改存量页面？
新增页面：从零创建新的页面文件
修改存量页面：在已有页面代码基础上调整
问题 2（根据问题 1 的答案追问）：
新增页面 → 请提供目标目录路径，如 src/views/order/detail/，技能将在此目录下创建 index.vue 和 entry.js（目录不存在则自动创建）
修改存量页面 → 请提供需要修改的文件路径（可多选），如 src/views/home/index.vue，技能将只修改这些已有文件
⚠️ 在用户明确回答上述问题之前，不允许继续执行后续步骤。
3.获取设计上下文——使用 Figma MCP 工具获取设计稿信息，优先使用 Figma 插件自带的技能：
获取设计稿内容时，调用 /figma-use 技能辅助获取设计上下文
实现设计时，调用 /figma-implement-design 技能辅助生成代码
4.分析设计稿结构——根据设计稿信息，梳理三个维度：
页面布局：Header、Body、Footer 区域划分
组件匹配：将设计稿元素映射到 Vant 组件（Button、Cell、Field、Tab、NavBar 等）
交互逻辑：点击事件、表单校验、列表滚动等
5.生成代码——按项目规范生成 Vue 组件代码
💡 技能文件 SKILL.md 就是按照以上 5 步的结构来组织的，建议在 cc 中直接创建，方便后续复用。
四、【实战演示】基于需求还原设计稿
一切准备就绪后，进入实际还原环节。以下是完整的操作流程：
1.在 cc 对话框中输入（示例）：
⚠️ 重要提示：每次对话最好只包含一张 Figma 页面的链接，多张可能会读取失败。
Figma 链接通过以下方式获取：在 Figma 中选中目标页面/组件 → 右键 → "Copy link to selection"。
2.cc 会自动创建提案（proposal），包含完整的任务分解和执行计划。
3.重点检查 tasks.md 文件，确保其中明确指定了调用 /figma-design-2-code 技能来还原代码。
4.提案确认无误后，cc 会按技能流程自动生成对应的 Vue 组件代码。
5.代码生成完毕后，运行项目即可看到还原后的页面效果。
最后的话
总体而言，在 cc 中还原 Figma 设计稿生成页面比想象中要简单得多。得益于 Claude 官方已经封装好了现成的插件（figma@claude-plugins-official），你最多再配合一个 /figma-design-2-code 技能，基本上就能很顺利地完成从设计稿到代码的全流程了。
对于前端同学来说，这不仅仅是"省力"的问题——它真正改变了我们和设计稿打交道的方式。以前是"看着图写代码"，现在是"让 AI 看图出代码，你来审核和调整"。效率的提升是数量级的。
如果你也在做 Figma 还原相关的工作，不妨试试这个方案。踩过坑的欢迎留言交流，我们一起把流程打磨得更好。
谢谢你看到这里~
如果对你有帮助，别忘了点赞 + 推荐，也欢迎关注我，我会持续分享更多 AI 工具实用技巧。
