TemPad Dev 1.0 发布：通过 MCP 把 Figma 接入 Coding Agent 读设计、改画布
这个工具让 Codex、Claude Code 直接连 Figma，能读设计稿写代码，还能反过来在画布上建图层，免手工搬运，开源免费。
Justineo 发布 TemPad Dev 1.0，由 Chrome 扩展加本地 MCP 服务组成，让 Codex、Claude Code、Cursor 等客户端读取 Figma 设计并生成代码，get_code 默认输出 JSX/Vue + Tailwind。在可编辑文件里，apply_canvas 能新建和修改原生 Figma 图层，配套 manage_design_task 绑定修改区域。项目提供 design-in-figma 和 figma-design-to-code 两个 skill，支持用 definePlugin 自定义输出，社区已有 Kong、Nuxt UI、百度健康等插件。工具免费开源（MIT 协议），要求 Node.js 22 以上，连接只走本机 127.0.0.1。
TemPad Dev：把 Figma 接进 Coding Agent，既能读设计写代码，也能直接改画布 一个 Chrome 扩展加本地 MCP 服务，它让 Codex、Claude Code、Cursor 这类 Coding Agent 能读取 Figma 设计，按项目规范实现成代码；在可编辑的文件里，还能直接新建和修改原生 Figma 图层。设计和开发之间少了一道手工搬运。 tempad.dev 两种用法 · 手动检查： 装上扩展，打开 Figma 文件，选中元素就能看到 CSS、JS、变量和布局，不需要配置 Agent。这对只有查看权限、用不了 Dev Mode 的开发者尤其有用。 · 接 Agent： 在设置里打开 MCP 访问，按提示配置你的客户端。配好后可以直接说「用现有组件在 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，也能按比例缩放；变量可以显示为引用、实际值或两者都显示。 · 交互补强：有一键选中最深层节点、测量到选中元素的间距、把选中元素滚动到视图中央等功能，补上了 Figma 只读视图里操作别扭的地方。 · 输出插件：用 definePlugin 自定义代码输出，比如转成 Tailwind、UnoCSS、React Native 或者团队自己的设计系统。社区已经有 Kong、Nuxt UI、百度健康等插件。插件运行在隔离沙箱里，单次调用超过 5 秒会被终止。 Justineo @_justineo I'm happy to announce TemPad Dev 1.0 ⧉ Connect Figma to Codex, Claude & other coding agents. AI creates editable designs with Auto Layout, variables & components, then turns them into code. Bring your own agent. Free & open source (MIT). https://t.co/ladjxJnare Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 8 🔄 0 ❤️ 5 👀 521 📊 7 ⚡
