TalkToFigma：让 AI 直接操作 Figma，设计稿秒变代码

TalkToFigma：让 AI 直接操作 Figma，设计稿秒变代码

如果你是前端工程师，或者经常跟设计师打交道，一定经历过这种场景：设计师丢给你一个 Figma 链接，你手动量间距、吸颜色、复制代码，折腾半天才把界面还原出来。

今天推荐的这个开源 Skill，直接把这段痛苦砍掉了。

它是什么？

TalkToFigma 是 Grab 开源的一个 MCP（Model Context Protocol）集成项目，让 AI Agent —— 比如 Claude Code、Cursor、Codex —— 直接跟 Figma 对话。

什么意思？就是你不用再手动导设计稿，让 AI 帮你读 Figma、改 Figma、甚至批量操作 Figma 里的元素。

为什么值得关注？

GitHub 已经拿了 6891 个 Star，而且还在持续更新。MIT 开源，Grab 出品，质量有保障。

最实用的几个功能：

• 批量文字替换：AI 一次把几十个文本节点全改了，不用逐个点
• 实例覆盖传播：一个组件实例的样式，批量同步到所有同类实例
• 读取设计：AI 直接获取 Figma 节点信息，自动生成代码
• 创建/修改节点：矩形、文本、Frame 都能用 AI 控制
• 注释标注：支持在 Figma 里批量写 Markdown 注释，方便团队协作

适合谁用？

• 前端工程师：设计稿进代码，效率直接翻倍
• 设计师：让 AI 帮你批量整理和整理 Figma 文件
• AI 编程玩家：在 Claude Code / Cursor 里玩转设计到代码的自动化流程

怎么上手？

依赖很轻：装个 Bun，跑一条 bun setup，启动 WebSocket 服务，再装个 Figma 插件，就能在 MCP 配置里用了。

整体流程一次配好，之后就能让 AI 按指令直接操作你的 Figma 文件了。

如果你在折腾 AI + 设计的 workflows，这个 Skill 值得加到工具箱里。

GitHub 地址：https://github.com/grab/cursor-talk-to-figma-mcp

—

**GitHub:** https://github.com/grab/cursor-talk-to-figma-mcp