TemPad Dev

项目简介

TemPad Dev 是一个开源浏览器扩展，并通过 MCP 将 Figma 设计连接到开发者和编码代理。用户可在浏览器中检查 CSS、JavaScript 样式、变量、布局和测量信息；兼容的代理可读取设计、创建和编辑 Figma 原生图层，并在代码项目中实现界面。它还支持通过输出插件调整代码生成，以适配项目的语法。

核心功能

• 可检查所选 Figma 元素的 CSS 与 JavaScript 样式、变量引用、布局和测量信息。可配置 CSS 单位、根字体大小和缩放，并选择变量显示为引用、解析值或两者。在 Figma 只读视图中可使用深度选择、测量到选中项和将选中项滚动到视图内。可通过 MCP 连接兼容的编码代理，读取设计、创建或编辑 Figma 原生图层，并在项目中实现界面。可通过 JavaScript 输出插件自定义内置代码输出或添加代码块。MCP 工具支持代码、设计系统目录、截图、结构、画布应用和资产上传。

适用场景

• 无需配置代理即可检查 Figma 元素，读取 CSS、变量、布局和测量信息。可让已连接的编码代理使用现有组件和变量，在 Figma 中创建设置界面。可在目标代码项目中按项目的组件和样式约定实现当前 Figma 选中内容。可通过输出插件将生成的样式适配为 Tailwind CSS、UnoCSS、Sass、React Native 或设计系统组件。

快速开始

• 从 Chrome 应用商店安装 TemPad Dev 扩展并打开 Figma 设计文件。选择元素，在 TemPad Dev 面板中检查其代码、变量和布局；手动检查无需配置代理。若要使用编码代理，请启用 Preferences → Agent integration → MCP access，选择 Set up agents，并按所用客户端的说明操作。

部署与要求

• 代理连接需要 Node.js 22.x、24.x 或 26+。画布编辑需要 Figma 设计文件的编辑权限；只读文件和 Dev Mode 仍为只读。使用代理时，应保持 TemPad Dev 在目标 Figma 标签页中打开，并在提示时允许到 127.0.0.1 的环回连接。Pi 需要 0.99 或更高版本，并启用内置 MCP。

采用前须知

• 许可证：MIT。在使用、修改或分发项目前，请确认其具体条款。