figwright
连接AI与Figma，实现双向设计与代码生成
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figwright。 它的用途是：连接AI与Figma，实现双向设计与代码生成 完整的 Skill 内容见：https://321skill.com/skills/figwright/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请将Figma中选中的这个卡片组件转换成React + Tailwind代码。” 它会通过Figwright读取Figma中的设计细节，包括布局、间距、颜色变量和使用的组件，并生成与你项目框架匹配的高质量代码。或者，你可以说：“在Figma画布上创建一个登录页的框架，包含标题、输入框和按钮。” AI会直接操作Figma插件，在画布上生成对应的设计元素。
介绍
Figwright 解决了AI工具与Figma设计稿之间只能看不能改的痛点。它通过一个本地MCP服务器和Figma插件，在AI助手（如Claude Code、Cursor）与Figma之间建立了一座双向桥梁。
使用时，用户需要在Figma中安装插件，并在本地启动MCP服务器。AI助手通过标准的MCP协议与服务器通信，服务器通过WebSocket与Figma插件连接，从而实现AI对Figma文件的读取（如将设计转为代码）和写入（如在画布上直接创建、编辑设计元素）。
这个工具非常适合需要频繁在设计与代码之间切换的开发者、设计师和产品经理，尤其是那些希望用AI来加速UI实现或原型设计流程的团队。
需要注意的是，它依赖本地网络环境进行通信，且需要用户对MCP客户端有一定配置能力。其功能深度依赖于Figma插件的API，因此某些高级Figma功能可能暂时无法通过AI操作。
核心特点
与官方或其它只读的Figma MCP工具不同，Figwright是双向的，提供112个工具支持对Figma画布进行读写操作；同时它完全免费，无需Figma Dev Mode付费席位，并能根据用户真实的技术栈生成适配的代码，而非通用HTML。
注意事项
不适合仅需单向查看设计稿或没有本地开发/配置环境的纯设计场景。
常见问题
需要Figma付费账号吗？
不需要，免费Figma账号即可使用，无需Dev Mode。
支持哪些AI助手？
支持所有MCP客户端，如Claude Desktop、Cursor、Windsurf等。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figwright/raw/index.md 读取 figwright 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figwright/raw/index.md（查看排版版本）