别再只盯着 AI 生成页面了 真正提升效率的是设计改完能不能直接落回

很多人看到 AI 做网页，第一反应都是快。可在真实项目里，最耗人的从来不是第一版，而是后面一轮又一轮的小改。标题颜色改一下，评价卡片删一项，间距再松一点。每个动作都不大，但只要设计和开发之间要反复传递，效率立刻掉下来。

Claude Code 和 Figma 这次最值得说的，就是把这条链路打通了。

流程并不复杂。先在终端里启动 Claude Code，然后把 Figma 的 MCP 接进去。命令是 claude mcp add --transport http figma https://mcp.figma.com/mcp。加完建议退出当前会话，再重新进入。接着打开

/mcp，找到 figma，完成认证。这里最容易踩坑的地方不是命令，而是账号。谁有多个 Figma 账号，谁就最容易在这里翻车。账号一旦选错，Claude 后面访问不到正确空间，前面等于白做。

认证完成后，还得安装插件。命令是 /plugin install figma@claude-plugins-official。很多人会把这一步看成附加项，其实不是。没有插件，后面的设计到代码、代码到设计，根本不完整。

真正进入实战以后，你就能感受到差别。可以直接让 Claude Code 先做一个 SaaS 落地页，比如安全服务 Roxy。提示词里放上 Figma 链接也没问题。即使 Figma 文件是空的，它提示当前没有选中内容，也不影响先把页面代码生成出来。浏览器预览一跑，第一版就出来了。

接着再让它把这个设计传进 Figma。到这里，Figma 不再是空白文件，而是有了一个真实可编辑的页面。别指望第一次就非常细。常见情况是间距有点乱，个别元素显示得不完整。但这不是致命问题，因为后面最关键的能力马上就来了。

你可以直接在 Figma 里改。比如把首屏标题从白色改成红色，再让 Claude 应用这次修改。它会先展示准备变动的代码，再完成更新。再比如你选中用户评价模块，在 Figma 里去掉评分、重新调节留白，再把对应链接发给 Claude，它就会按这个区域去回写代码，还会把前后变化整理出来。

这才是真正有价值的地方。不是做出一个漂亮首页，而是设计师在 Figma 中的改动，终于不必再经过层层翻译才能落到代码里。生成只是前菜，双向改稿才是主菜。