github.com/ecomfe/tempad-dev @main

<img alt="展示扩展面板的截图。" src="https://github.com/ecomfe/tempad-dev/raw/main/packages/site/public/marketing/hero-light.svg" width="540" height="200">

Figma 上的开放交付工具

<img alt="展示扩展面板代码视图的截图。" src="https://github.com/ecomfe/tempad-dev/raw/main/packages/site/public/marketing/code-light.png" width="720">

---

主要功能

查看 CSS 代码

选择任意元素后，你可以在插件的 Code 面板中获取对应的 CSS 代码。除了标准的 CSS 代码之外，TemPad Dev 还会以 JavaScript 对象的形式提供样式，方便在 JSX 等场景中直接使用。

你可以配置 CSS 单位和根字体大小，将 CSS 中的 px 尺寸转换为 rem。同时也可以设置 scale 系数，根据实际交付需求对 px 数值进行缩放。

在偏好设置里使用 Variable display（Reference/Resolved/Both）来选择代码输出展示变量引用、解析后的值，或两者同时显示。

当 Figma 变量定义了 WEB codeSyntax 时，Code 面板会原样保留这段由设计文件提供的语法。MCP get_code 仍会输出规范化的 CSS 变量引用，让 Agent 获得稳定的中间表示。

[!WARNING] 切换单位只会影响 TemPad Dev 面板中的输出，不会影响 Figma 画布本身。

深度选择模式

在 Figma 的只读视图中，选择节点通常需要不断双击逐层下钻，才能选中最底层的节点。虽然 Figma 提供了 ⌘ + 单击 的快捷方式，但很多用户并不知道这一功能，每次都需要额外的键盘操作。为此，TemPad Dev 在偏好设置中提供了深度选择模式。

测量到选中项模式

在 Figma 的只读视图中，需要按住 ⌥ 并移动鼠标，才能显示其他节点与当前选中节点之间的间距。基于与深度选择模式类似的考虑，TemPad Dev 也在偏好设置中提供了测量到选中项模式。

将选中项滚动到视图中

当你在 TemPad Dev 的 Inspect 面板中将鼠标悬停在节点名称区域时，会出现一个按钮。点击后，当前选中的节点会被滚动到 Figma 视口的正中央。Figma 也提供了类似的 ⇧2 快捷键，但该操作会放大并填满视口，往往不符合实际需求。Figma 的插件 API 实际上提供了在保持 100% 缩放的情况下移动视图的接口，因此我们也将这一能力作为补充提供了出来。

---

插件

插件可以用来自定义内置的代码输出，或添加自定义的代码块。

一个 TemPad Dev 插件本质上是一个简单的 JavaScript 文件，通过 default 导出或名为 plugin 的命名导出暴露插件对象。要安装插件，只需将插件文件的 URL 粘贴到 Preferences > Plugins 中即可。一些内置插件也可以通过 @{name} 语法启用，例如 @foo，它对应的是我们 插件注册表 中的插件名称。

[!NOTE] 插件代码存储在浏览器的本地存储中，不支持版本管理或自动更新，需要你在 UI 中手动更新。

创建插件

使用 @tempad-dev/plugins 包中提供的、带完整类型定义的 definePlugin 函数，可以简化插件的创建过程。

npm install -D @tempad-dev/plugins # 或 pnpm add -D @tempad-dev/plugins

下面是一个简单的示例插件，它会覆盖内置的 CSS 代码块，并隐藏 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 // 隐藏内置的 JavaScript 代码块
  }
})

更完整的示例可以参考 Justineo/tempad-dev-plugin-kong。

[!NOTE] 插件文件必须是合法的 ES Module，并且需要通过 default 导出或 plugin 命名导出插件对象。

目前我们支持 4 种插件钩子：

• transform：将样式对象或代码转换为字符串形式，用于代码块输出。适合用于 Tailwind CSS、UnoCSS 等自定义结构。
• transformVariable：将 CSS 变量转换为其他格式，例如转换为 Sass 变量以用于设计令牌。
• transformPx：将像素值转换为其他单位或按比例缩放。
• transformComponent：将设计组件对象转换为开发侧的组件对象或字符串，用于生成设计系统的组件代码。

[!TIP] 如果希望在生成的 CSS 中包含 JavaScript 变量，可以使用 \0 字符包裹变量名。这样会被转换为 JavaScript 的字符串插值。 例如返回 \0foo\0，则输入 calc(var(--foo) + 10px) 会被转换为 `calc(${foo} + 10px)`。

此外，你还可以为代码块指定自定义的 title 和 lang，或者将内置代码块设置为 false 以隐藏它。

完整的类型定义和辅助函数请参见 packages/plugins/src/index.ts。

部署插件

请确保你的插件可以通过支持跨域请求的 URL 访问，例如托管在 GitHub 仓库或 Gist 中。比如可以使用 raw 地址：

https://raw.githubusercontent.com/{username}/{repo}/refs/heads/{branch}/{filename}.js

[!NOTE] 插件 URL 必须使用 HTTPS 并支持跨域请求；本地开发仍可使用 loopback HTTP URL。GitHub 或 Gist 提供的 raw URL 通常可用。插件入口文件上限为 512 KiB，且必须是自包含 ES Module； 请在构建时打包依赖，不要在运行时加载。

在扩展能力边界上，插件代码按不可信代码处理。每次调用都会在 opaque-origin Chrome sandboxed extension page 内启动一个全新的 Worker，并在完成或五秒超时后强制终止。 沙箱不暴露扩展 API 或 DOM，阻断存储与已测试的网络通道，并对结构化输入输出做有界校验。 插件仍会看到传给其 hook 的设计数据，也完全控制自己返回的代码；浏览器引擎漏洞、侧信道、 蓄意内存压力以及不安全的生成内容不属于该边界。仍建议审查插件来源。准确保证与非目标见 威胁模型。

分享插件

你也可以将插件注册到我们的 插件注册表文件 中，这样就可以通过插件名直接安装。

欢迎来 添加你自己的精彩插件！

当前可用插件列表：

插件名称	描述	作者	仓库
@kong	Kong Design System	@Justineo	GitHub
@kong/advanced	Kong Design System（高级版）	@Justineo	GitHub
@fubukicss/unocss	FubukiCSS 的 UnoCSS	@zouhangwithsweet	GitHub
@nuxt	Nuxt UI	@Justineo	GitHub
@nuxt/pro	Nuxt UI Pro	@Justineo	GitHub
@baidu-health/wz-style	百度健康 wz-style 自定义样式	@KangXinzhi	GitHub
@baidu-health/med-style	百度健康 med-style 自定义样式	@KangXinzhi	GitHub
@tailwind	CSS 转 Tailwind CSS	@haydenull	GitHub
@react-native	CSS 转 React Native StyleSheet	@CANntyield	GitHub

Agent 集成

TemPad Dev 内置了面向编码 agent 和 IDE 的 Agent 集成。该集成包含：

• 一个 MCP 服务器，使 agent 可以直接从你在 Figma 中选中的节点拉取代码和上下文
• 一个 agent skill，用于指导 agent 在当前仓库中理解并使用这些证据

Figma 也提供官方的 remote 与 desktop MCP server，并建议大多数用户优先使用 remote server。TemPad Dev 的定位是一个开放、强调本地控制的补充方案，适合明确需要可审计的浏览器扩展链路、现有只读检查流程、可编程输出插件、规范化的 agent-facing 代码/token IR，以及显式上下文预算的团队。TemPad Dev 提供设计证据与代码起点；最终仍由 coding agent 结合目标仓库完成适配、验证和实现。

打开 TemPad Dev 面板并启用 MCP 后，MCP 服务器会暴露以下能力：

• get_code：默认输出高保真的 JSX/Vue + TailwindCSS 代码，同时包含相关资源以及使用的 codegen 预设和配置。
• get_structure：当前选中节点的结构信息（id、类型、几何数据）。
• 二进制资源会通过工具响应中的元数据 + HTTP 下载地址（asset.url）提供；MCP 不再暴露 asset 资源模板。

配置指南

1. 安装 Node.js 18.20.0 或更高版本并确保 npx 可用。在希望 agent 检查的 Figma 标签页中保持 TemPad Dev 打开，然后启用 Preferences → Agent integration → MCP access。出现提示时，请允许连接到 loopback 地址 127.0.0.1。
2. 点击 Set up agents，选择 Codex、Cursor、Claude Code、Gemini、VS Code、OpenCode 或 TRAE，然后按界面显示的路径配置。其它兼容客户端请选择 Other。这里的选择只会切换说明，不会绑定或激活 agent。
3. 如果界面提供直接操作，请优先使用。所有备用命令和 config 都会完整显示，便于检查和复制。Codex 与 Claude Code 的 plugin 同时包含 MCP 和 figma-design-to-code skill；其它路径会分别展示两个必要步骤。

使用期间请保持 TemPad Dev 打开并启用 MCP。如果连接了多个 Figma 文件，请点击目标文件面板中的 MCP 徽标；该文件会成为 agent 当前访问的上下文。

MCP 连接状态

启用 MCP 服务器后，TemPad Dev 面板标题栏中会显示一个徽标，表示当前的连接状态：

• Unavailable：本地 MCP 服务器未配置或未运行。

  

• Inactive：TemPad Dev 已连接到本地 MCP 服务器，但由于打开了多个 Figma 标签页，此标签页当前未激活。点击徽标即可为当前标签页激活 MCP（同时会停用其他标签页的 MCP）。

  

• Active：MCP 服务器正在运行，并且当前标签页已激活，可随时响应 MCP 工具调用。

  

配置项

@tempad-dev/mcp 的环境变量配置请参见 packages/mcp-server/README.zh-Hans.md。

查看 TemPad 组件代码

该功能仅适用于由 TemPad Figma 插件生成的节点，而该插件目前仅在 百度 内部可用。

目前此功能仅支持 Light Design 组件。

如果画布中存在由 TemPad Figma 插件生成的组件，TemPad Dev 可以在 Code 面板中直接输出该组件的调用代码。你也可以快速跳转到 TemPad Playground，对可运行的代码进行预览和调试。

Quirks 模式

[!CAUTION] 自 2025.04.01 起，Quirks 模式已不可用。Figma 移除了用于提取样式数据的 window.DebuggingHelpers.logSelected API。

[!NOTE] TemPad Dev v0.1.0 新增

Quirks 模式是在 TemPad Dev v0.1.0 中引入的，当 window.figma 不可用时，你仍然可以使用该工具。该模式通过解析 Figma 的调试日志来提取样式数据，从而生成基础样式代码，但会存在一定限制。

当前已知无法生成或存在差异的功能包括：

• Effects 中添加的样式，对应的 CSS 属性如 box-shadow、filter: blur()、backdrop-filter: blur()。
• 渐变填充样式。TemPad Dev 只能检测到渐变的存在，并输出为 linear-gradient(<color-stops>)。
• 填充样式的混合模式，对应 CSS 的 background-blend-mode。
• 文本节点的 font-family，该值通过启发式方式获取，可能不准确。
• 除数字样式之外的高级 OpenType 配置，通常在实际中较少使用。
• “将选中项滚动到视图中” 功能在该模式下不可用。

除上述限制外，其余功能与标准模式基本一致。如果 Quirks 模式能够满足你的使用场景，就可以避免复制到草稿文件等繁琐操作，直接在只读视图中使用。但需要注意的是，该模式同样依赖于 Figma 全局暴露的调试接口，无法保证长期可用性。如果 Figma 再次移除相关接口，该模式也会随之失效。

兼容性更新