TemPad Dev：把 Figma 接进 Coding Agent，既能读设计写代码，也能直接改画布 一个 Chrome 扩展加本地 MCP 服务，它让 … · @shao__meng · TwKit

@shao__meng

TemPad Dev：把 Figma 接进 Coding Agent，既能读设计写代码，也能直接改画布 一个 Chrome 扩展加本地 MCP 服务，它让 Codex、Claude Code、Cursor 这类 Coding Agent 能读取 Figma 设计，按项目规范实现成代码；在可编辑的文件里，还能直接新建和修改原生 Figma 图层。设计和开发之间少了一道手工搬运。 https://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 秒会被终止。

曝光 140 · 评论 1 · 点赞 2 · 书签 0