VicroCode
让代码创造价值
VicroCode是一个轻量级代码在线发布、交易平台,开箱即用,免部署、免服务器、免备案,支持接入智能体、通用管理系统、游戏等多种项目
稍候片刻,您可先学习AI编程手册
正在加载中...

市场信息

[分享创造] 不买 Figma 会员,也能给 vibe coding 作品配上设计流程:开源本地工具 local-figma

我用 vibe coding 做页面,一般是先让 Agent 写出一版能跑的。但接下来想探索几套不同的界面方案时,我希望有个地方能把现有页面摆进去,随手调整、并排比较——这个地方就是 Figma 。 local-figma 是我做的开源工具( Apache-2.0 ),做的就是这一步:把已经跑起来的页面,还原成 Figma 里原生可编辑的设计稿。

www.v2ex.com · 2026-09-29T10:06:34+00:00

我用 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: /ai-market-guide/ 详细介绍: /ai-market-guide/ 你们试多套界面方案的时候,都是怎么对比的?

欢迎试用,有问题直接在 GitHub 提 issue 。

返回 AI 市场导读

来源:v2ex.com