awdr74100 /
figwright
做了个开源工具 Figwright,一个免费、双向的 Figma MCP server,想来分享一下,顺便听听大家的意见。 起因是这样:现在用 AI 把 Figma 设计稿转成代码已经很常见,但官方的 Figma Dev Mode MCP 要付费席位才能用,而且基本只能「读」——把设计稿吐成代码,单向的。我想要的是两件事:一是免费,二是反过来也能用,让 AI 直接在 Figma 画布上画东西,而不只是看它。 Figwright 由一个 …
关于
做了个开源工具 Figwright,一个免费、双向的 Figma MCP server,想来分享一下,顺便听听大家的意见。 起因是这样:现在用 AI 把 Figma 设计稿转成代码已经很常见,但官方的 Figma Dev Mode MCP 要付费席位才能用,而且基本只能「读」——把设计稿吐成代码,单向的。我想要的是两件事:一是免费,二是反过来也能用,让 AI 直接在 Figma 画布上画东西,而不只是看它。 Figwright 由一个 MCP server 和一个 Figma 插件组成,两者通过本机 WebSocket 通信,让 Claude Code、Cursor、Codex 等任何 MCP 客户端直接操作 Figma。全部跑在本机,不需要 Figma 付费席位。 它是真双向的: 读:把选中的设计稿转成贴合你现有技术栈的代码。它会先探测你项目真实的框架和样式方案(React / Vue / Svelte / Angular + Tailwind / CSS Modules 等),把 Figma 里的组件、设计变量、图标映射到你代码库里已有的东西上,让 AI 复用而不是重造一堆要你回头重写的通用代码。 写:反过来在画布上创建和修改——frame、自动布局、文字、组件、变量,甚至整屏页面。目前 112 个工具,读和写都覆盖。 几个我自己比较在意的点: 免费:官方 Dev Mode MCP 要付费席位,Figwright 走插件通道,免费账号就能用。 插件不是黑盒:插件面板能看到每一次工具调用及耗时、发给模型的原始 payload、连接健康状态,出问题时不用靠猜。 全本地、无遥测:设计数据只在插件、本机中继、你的 MCP 客户端之间流动,不上传到任何地方,也不需要 Figma Dev Mode 席位。 用起来就是在 MCP 客户端配置里加一段 npx 命令,再在 Figma 里打开插件,然后对 AI 说人话:「把选中的这块做成 React 组件」,或者反过来「按这个规格在 Figma 里画一个定价区块」。
收录记录
- HelloGitHub·用户投稿
- 阮一峰周刊·用户投稿
讨论这个产品