Loading... # TemPad Dev：Figma 代码检查面板插件技术分析 # 一、新闻概述 ## 1. 标题 TemPad Dev：为所有人提供的 Figma 代码检查面板 ## 2. 发布时间 2026 年 1 月 16 日（最新更新） ## 3. 来源 GitHub 仓库：ecomfe/tempad-dev # 二、核心内容 ## 1. 事件摘要 ### A. 主要内容 TemPad Dev 是一个开源的 Figma 浏览器插件，为设计师和开发者提供强大的代码检查面板功能。该插件支持从 Figma 设计文件中提取 CSS 代码，并提供 JavaScript 对象样式输出，适用于 JSX 等场景。 ### B. 核心亮点 - 支持 CSS 和 JavaScript 双格式代码输出 - 可配置 CSS 单位转换（px 到 rem） - 提供深度选择模式和测量选择模式 - 内置插件系统支持自定义代码生成 - 集成 MCP（Model Context Protocol）服务器支持 AI 智能体 ### C. 技术特点 - 基于 WXT 框架开发的浏览器扩展 - 使用 TypeScript 和 Vue 3 构建 - 支持 Chrome Web Store 安装 - 开源 MIT 许可证 ## 2. 关键信息 ### A. 版本信息 - 仓库地址：https://github.com/ecomfe/tempad-dev - Chrome Web Store：tempad-dev - 许可证：MIT - Stars：361 - Forks：28 ### B. 技术栈 - TypeScript 82.2% - Vue 14.8% - JavaScript 1.6% - CSS 1.4% # 三、详细报道 ## 1. 主要功能 ### A. 代码检查功能 ```mermaid graph LR A[Figma 设计节点] --> B[TemPad Dev 插件] B --> C[CSS 代码输出] B --> D[JavaScript 对象输出] C --> E[标准 CSS] C --> F[自定义单位转换] D --> G[JSX 样式对象] D --> H[Vue 样式对象] ```  TemPad Dev 支持以下代码输出功能： 1. **CSS 代码输出**：选择任意元素，通过插件的 Code 面板获取 CSS 代码 2. **JavaScript 对象样式**：提供 JavaScript 对象形式的样式，方便在 JSX 等场景使用 3. **单位转换**：可配置 CSS 单位和根字体大小，将 px 转换为 rem 4. **缩放因子**：可应用 scale 因子按交付需求缩放 px 值 ### B. 深度选择模式 在 Figma 只读视图中，选择节点需要双击深入，通常需要反复双击才能选择最底层节点。TemPad Dev 提供深度选择模式解决这个问题。 ### C. 测量选择模式 在 Figma 只读视图中，需要按住 Option 键并移动光标才能显示其他节点与选中节点的间距。TemPad Dev 提供测量选择模式简化此操作。 ### D. 滚动选择到视图 当鼠标悬停在 TemPad Dev 检查面板的节点名称区域时，会出现相应按钮。点击该按钮会将当前选择滚动到 Figma 视口中心。 ## 2. 插件系统 ### A. 插件架构 TemPad Dev 提供灵活的插件系统，允许用户自定义内置代码输出或添加自定义代码块。 ```mermaid graph TB A[插件入口] --> B[definePlugin] B --> C{插件钩子} C --> D[transform] C --> E[transformVariable] C --> F[transformPx] C --> G[transformComponent] D --> H[代码输出] E --> H F --> H G --> H ```  ### B. 插件开发 插件是一个简单的 JavaScript 文件，需要导出插件对象作为默认导出或 plugin 命名导出。 创建插件示例： ```javascript import { definePlugin } from '@tempad-dev/plugins' export default definePlugin({ name: 'My Plugin', code: { css: { title: 'Stylus', lang: 'stylus', transform({ style }) { return Object.entries(style) .map(([key, value]) => `${key}: ${value}`) .join('\\n') } }, js: false } }) ``` ### C. 插件钩子 目前支持 4 个插件钩子： 1. **transform**：将样式对象或代码转换为字符串格式 2. **transformVariable**：将 CSS 变量转换为其他格式 3. **transformPx**：将像素值转换为其他单位或缩放 4. **transformComponent**：将设计组件对象转换为开发组件对象 ### D. 内置插件 项目提供多个内置插件： | 插件名称 | 描述 | 作者 | |---------|------|------| | @kong | Kong Design System | @Justineo | | @kong/advanced | Kong Design System（高级版）| @Justineo | | @fubukicss/unocss | UnoCSS by FubukiCSS | @zouhangwithsweet | | @nuxt | Nuxt UI | @Justineo | | @nuxt/pro | Nuxt UI Pro | @Justineo | | @tailwind | CSS to Tailwind CSS | @haydenull | | @react-native | CSS to React Native StyleSheet | @CANntyield | ## 3. MCP 服务器 ### A. 功能概述 TemPad Dev 内置 MCP（Model Context Protocol）服务器，使智能体和 IDE 可以直接从用户在 Figma 中选择的节点提取代码和上下文。 ### B. 支持的工具 ```mermaid graph TB A[MCP 服务器] --> B[get_code] A --> C[get_structure] A --> D[get_screenshot] A --> E[tempad-assets] B --> F[JSX/Vue + TailwindCSS] C --> G[节点结构信息] D --> H[PNG 截图] E --> I[资源模板] ```  1. **get_code**：高保真 JSX/Vue + TailwindCSS 代码输出，附带资源和代码生成预设配置 2. **get_structure**：当前选择的结构大纲（ID、类型、几何信息） 3. **get_screenshot**：PNG 截图，包含 resourceUri 和直接 HTTP 下载 URL 4. **tempad-assets**：资源模板（asset://tempad/{hash}） ### C. 配置方法 在 TemPad Dev 中打开 Preferences → MCP server，然后启用 Enable MCP server。 手动添加到 MCP 客户端的 stdio 命令配置： ```json { "mcpServers": { "TemPad Dev": { "command": "npx", "args": ["-y", "@tempad-dev/mcp@latest"] } } } ``` ### D. 连接状态 MCP 启用后，TemPad Dev 面板标题栏会出现状态徽章： 1. **不可用（Unavailable）**：本地 MCP 服务器未配置或未运行 2. **非活动（Inactive）**：TemPad Dev 已连接到本地 MCP 服务器，但此标签页当前不活动 3. **活动（Active）**：MCP 服务器正在运行，此标签页活动并准备响应 MCP 工具调用 # 四、技术架构 ## 1. 技术栈 ### A. 前端框架 - WXT：浏览器扩展开发框架 - Vue 3：UI 框架 - TypeScript：主要开发语言 ### B. 构建工具 - pnpm：包管理器 - ESLint：代码检查 - Prettier/oxfmt：代码格式化 ## 2. 项目结构 ```mermaid graph TB A[根目录] --> B[packages] A --> C[skill] A --> D[docs] B --> E[extension] B --> F[plugins] B --> G[mcp] E --> H[浏览器扩展核心] F --> I[插件系统] G --> J[MCP 服务器] ```  ## 3. 部署方式 ### A. Chrome Web Store 可直接从 Chrome Web Store 安装发布版本 ### B. 开发模式 支持本地开发模式，使用 pnpm workspace 管理 monorepo ### C. 插件部署 插件文件必须是通过 URL 可访问的，且支持跨域请求（如 GitHub Raw URL） # 五、影响分析 ## 1. 对设计师的影响 - 提高设计交付效率 - 自动生成多种格式代码 - 支持自定义代码生成规则 ## 2. 对开发者的影响 - 减少手动编写样式代码的工作 - 直接获取设计规范和样式 - 通过 MCP 与 AI 智能体集成 ## 3. 行业影响 - 促进设计与开发协作 - 推动设计系统标准化 - 开启 AI 辅助设计开发新方向 # 六、相关链接 ## 1. 官方资源 - GitHub 仓库：https://github.com/ecomfe/tempad-dev - Chrome Web Store：https://chrome.google.com/webstore/detail/tempad-dev/lgoeakbaikpkihoiphamaeopmliaimpc - Discord 社区：https://discord.gg/MGTXwtkEck ## 2. 技术文档 - 插件开发文档：packages/plugins/src/index.ts - MCP 服务器配置：AGENTS.md - 变更日志：CHANGELOG.md ## 3. 参考项目 - figma-viewer-chrome-plugin - fubukicss-tool - figma-ui3 *** ## 参考资料 1. [TemPad Dev GitHub Repository](https://github.com/ecomfe/tempad-dev) 2. [Chrome Web Store - TemPad Dev](https://chrome.google.com/webstore/detail/tempad-dev/lgoeakbaikpkihoiphamaeopmliaimpc) 3. [Model Context Protocol](https://modelcontextprotocol.io/) 4. [WXT Framework](https://wxt.dev/) 最后修改：2026 年 01 月 17 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏