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

ohmyharry 2026-09-29 18:06 1

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


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


工作链路


这个流程的几个特点:



  • 不用买 Figma 会员:官方 MCP 写入要 Full 席位(付费),这个工具开源免费,成本只有你自己 Agent 的 token

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

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


具体流程:


使用流程



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

  2. 把想探索的页面交给 Agent:"把这个页面转成 Figma 设计稿"

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

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


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


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

最新回复 (2)
  • rickye 09-29 20:42
    1楼
    我一般就让 claude 写一个 html ,并列对比两套 ui 组件,然后上传 claude artifacts ,在网页上直接给 feedback 。

    会有两个问题,一是没法直接手动去调整,任何小的改动都要让 ai 来改。

    另一个是 arifacts 只有 claude 有,chatgpt 有 sites 这个功能但是不能直接在网页上给 feedback 。我自己做了一个类似 claude artifacts 功能的软件,https://github.com/hyperlogue/r3 ,可以直接运行在本地给所有 agents 用。
  • ohmyharry 楼主 09-29 23:21
    2楼
    点选元素直接给 feedback 比在聊天框里掰扯位置靠谱多了,已 star ,现在就去试试🫨
* 帖子来源V2EX
返回