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. 代码检查功能

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 提供灵活的插件系统，允许用户自定义内置代码输出或添加自定义代码块。

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 命名导出。

创建插件示例：

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. 内置插件

项目提供多个内置插件：

3. MCP 服务器

A. 功能概述

TemPad Dev 内置 MCP（Model Context Protocol）服务器，使智能体和 IDE 可以直接从用户在 Figma 中选择的节点提取代码和上下文。

B. 支持的工具

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 命令配置：

{
  "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. 项目结构

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
2. Chrome Web Store - TemPad Dev
3. Model Context Protocol
4. WXT Framework