ecomfe/tempad-dev

TemPad Dev – 简介

TemPad Dev 是一款开源 Chrome 扩展，连接 Figma 设计文件 与 编码代理（基于 LLM 的代码助手）以及开发者的 IDE。它允许你检查设计的 CSS/JS、获取布局数据，甚至让 AI 代理创建或编辑 Figma 画布，并直接从所选设计生成实现代码。

核心功能

领域	你可以做什么	工作原理
设计检查	选择 Figma 文件中的任意元素，立即查看其 CSS、Tailwind 风格对象、变量以及 JSX/Vue 片段。	扩展调用本地 MCP（多客户端协议）服务器，该服务器通过其插件 API 查询 Figma，并返回 `get_code`、`get_structure` 等。
深度选择 / 测量 / 滚动	无需快捷键即可深入嵌套图层、测量间距，并将节点滚动到视图中。	面板内置的 UI 辅助工具；它们在后台调用相同的 Figma API。
代理驱动的画布编辑	让 LLM（例如 Claude、Qwen Code、Cursor、VS Code 代理）创建屏幕、调整间距或修改排版。	扩展暴露 MCP 工具（`apply_canvas`、`upload_asset` 等），代理调用这些工具来读取/写入 Figma 文档。
设计到代码	提示代理在你的代码库中实现所选 Figma 组件，并遵循你的组件库和样式约定。	`figma-design-to-code` 技能提供布局、资源和设计系统元数据；代理随后编写起始代码。
插件系统	编写小型 JavaScript 插件来转换生成的代码（例如，输出 Stylus、将 CSS 变量转换为 Sass、应用自定义缩放）。	插件是从 URL 加载的 ES 模块，存储在浏览器的本地存储中。

如何开始

从 Chrome 网上应用店安装扩展。
打开 Figma 文件，选择一个元素，在侧面板中查看其代码 – 无需 AI。
要启用 AI 代理，打开 偏好设置 → 代理集成 → MCP 访问，点击 设置代理，并按照所选客户端（Claude、Codex、Cursor、VS Code 等）的屏幕说明操作。
确保你已安装 Node 22/24/26+；MCP 服务器（@tempad-dev/mcp@latest）在本地运行，并通过 127.0.0.1 与扩展通信。
（可选）安装或编写 输出插件 来自定义代码块。

你可能关心的技术细节

MCP 服务器 – 一个微型 Node 服务（@tempad-dev/mcp），将扩展的请求转换为 Figma 插件 API 调用。一起使用的版本：扩展 0.23.1、MCP 0.11.0、代理插件 0.5.0。
技能 – 预打包的命令集（design-in-figma、figma-design-to-code），代理可以调用。它们处理资源发现、画布差异和验证。
支持的代理 – Qwen Code、Qoder、ZCode、Kimi Code、Pi、Hermes，以及通用的“其他代理”。集成主要是 UI 驱动的；扩展不锁定特定模型。
资源处理 – 生成的 PNG/JPEG/GIF 资源上传到本地 Hub；MCP 响应包含一个 assetHash，可在画布编辑中引用。
配置 – 可选的环境变量记录在 packages/mcp-server/README.md 中；UI 偏好设置允许你切换 CSS 单位、变量显示模式、深度选择等。

谁可能觉得有用？

前端工程师，希望从 Figma 快速可靠地复制精确的 CSS/JS，而无需手动转换 token。
产品团队，使用基于 LLM 的编码助手，需要与设计系统的稳定桥梁。
设计系统维护者，希望代理读取设计目录（get_design_system）并保持代码同步。
工具构建者，寻找本地协议（MCP）的参考实现，该协议同时与浏览器扩展和外部 AI 客户端通信。

了解更多

Chrome 网上应用店页面 – 一键安装。
Discord 社区 – 实时帮助和功能讨论。
代理插件 README – 每个支持客户端的详细设置。
源代码 – 仓库包含扩展、MCP 服务器和插件注册表。

TL;DR

TemPad Dev 是一款 Chrome 扩展，允许你检查 Figma 设计、运行 AI 代理编辑画布，并生成起始 UI 代码。它通过本地 MCP 服务器工作，该服务器暴露一组工具（get_code、apply_canvas 等），代理可以调用。你可以使用小型 JavaScript 插件自定义输出，整个栈是开源的，面向希望更紧密设计到代码循环的开发者。