不买 Figma 会员，也能给 vibe coding 作品配上设计流程：开源本地工具 local-figma

我用 vibe coding 做页面，一般是先让 Agent 写出一版能跑的。但接下来想探索几套不同的界面方案时，我希望有个地方能把现有页面摆进去，随手调整、并排比较——这个地方就是 Figma 。

local-figma 是我做的开源工具（ Apache-2.0 ），做的就是这一步：把已经跑起来的页面，还原成 Figma 里原生可编辑的设计稿。进去之后复制几个 variant ，调布局、换配色，看中哪个方案，再决定要不要改回代码。

这个流程的几个特点：

- 不用买 Figma 会员：官方 MCP 写入要 Full 席位（付费），这个工具开源免费，成本只有你自己 Agent 的 token

- 完全本地：CLI + 桥接服务跑在本机，设计文件不经过第三方服务器

- 用自己的 Agent：Claude Code 、Codex 这类能执行命令、能看图的就行，prompt 和流程自己定

具体流程：

- 本地启动 bridge ，Figma 桌面端导入开发插件，显示"已连接"

- 把想探索的页面交给 Agent："把这个页面转成 Figma 设计稿"

- Agent 读取页面布局、文字和素材，在 Figma 里重建出可编辑的图层

- 在 Figma 里复制出几个方案，并排调整、比较；看中哪个，再决定是否改回代码

GitHub： https://github.com/denki-san/local-figma
详细介绍： https://denkisan.me/articles/local-figma-open-source-tool/

你们试多套界面方案的时候，都是怎么对比的？欢迎试用，有问题直接在 GitHub 提 issue 。