TemPad Dev 1.0 发布：用 Chrome 扩展和本地 MCP 把 Figma 接入 Coding Agent

完整中文导读

TemPad Dev 1.0 发布，通过 Chrome 扩展加本地 MCP 服务，让 Codex、Claude Code、Cursor 等 Coding Agent 读取 Figma 设计并实现为代码，也能在可编辑文件中新建和修改原生 Figma 图层。

中文整理

作者 / 来源：meng shao (@shao__meng) · 原文时间：2026年11月4日 21:18（北京时间）

原作者信息要点

TemPad Dev 1.0 发布，作者为 meng shao，引用 @_justineo 的发布帖。产品定位是用一个 Chrome 扩展加本地 MCP 服务，把 Figma 接入 Codex、Claude Code、Cursor 等 Coding Agent，使其能读取 Figma 设计并按项目规范实现为代码；在可编辑文件中还能新建和修改原生 Figma 图层。

两种用法：手动检查，安装扩展后打开 Figma 文件，选中元素即可查看 CSS、JS、变量和布局，无需配置 Agent，对只有查看权限、无法使用 Dev Mode 的开发者尤其有用；接入 Agent，在设置中开启 MCP 访问并按提示配置客户端，可用自然语言指令让 Agent 在 Figma 中制作页面或按项目组件与样式规范实现选中设计。两种流程共用同一条连接，分别配有 design-in-figma 和 figma-design-to-code 两个 skill，引导 Agent 先查资源、再动手、最后核对结果。

Agent 可调用的能力：读设计方面，get_code 默认输出 JSX/Vue + Tailwind 并附带素材和设计变量，get_structure 提供节点结构与几何信息，get_screenshot 提供渲染截图用于核对视觉效果，get_design_system 列出组件、变量、样式和字体；改画布方面，apply_canvas 负责新建、修改、删除页面和图层，扩展会先校验、比对差异，应用后再做结构核对，upload_asset 上传生成的图片；任务管理方面，manage_design_task、set_design_anchor 把一次修改绑定到固定区域，画布上有状态条可随时停止或标记完成，在 Codex App 里还能对元素写批注再成批发给 Agent。

接入范围：官方给出专门配置入口的客户端有 Codex、Claude Code、Cursor、VS Code、Gemini，以及 Qwen Code、Qoder、Kimi Code、Pi、Hermes Agent 等，其他兼容客户端可走通用 MCP 配置。需要 Node.js 22、24 或 26 以上；改画布要求对 Figma 文件有编辑权限，只读文件和 Dev Mode 下只能读。连接只走本机 127.0.0.1，同时打开多个 Figma 文件时，点哪个文件的标记，哪个文件就是当前上下文。

其他功能：单位换算支持 px 转 rem 及按比例缩放，变量可显示为引用、实际值或两者；交互补强包括一键选中最深层节点、测量到选中元素的间距、把选中元素滚动到视图中央；输出插件用 definePlugin 自定义代码输出，例如转成 Tailwind、UnoCSS、React Native 或团队自己的设计系统，社区已有 Kong、Nuxt UI、百度健康等插件，插件运行在隔离沙箱里，单次调用超过 5 秒会被终止。作者称产品免费且开源（MIT）。

本站整理与观察

本站观察：材料把 TemPad Dev 的核心价值描述为减少设计与开发之间的手工搬运，其技术路径是 Chrome 扩展负责与 Figma 画布交互，本地 MCP 服务负责向 Coding Agent 暴露读写能力，二者共用一条本机连接。

本站观察：材料强调改画布前的校验、差异比对和应用后的结构核对，以及沙箱与 5 秒超时限制，这些属于作者对安全与稳定性机制的说法，材料未提供独立验证或失败率数据。

本站观察：材料列出的客户端覆盖范围和 Node.js 版本要求来自作者说明，未给出各客户端实际兼容性测试结果；社区插件名单同样为作者陈述。

材料为作者发布说明与引用帖，未包含独立评测、性能数据或第三方验证；文中功能、兼容范围、开源许可与社区插件信息均依据作者陈述整理，本站观察仅为基于文本的推论。

上下文来源：1