frame-relay

Frame-Relay

将你的 Figma 组件转化为 AI 编码 Agent 会遵循的设计套件。

刚开始使用？请按照面向设计师的分步设置指南操作。

状态：公开测试版。 以下命令会安装 CLI 的 beta 标签版本。功能可能还不完善， 欢迎通过测试版反馈表告诉我们你发现的问题。

Frame-Relay 面向已经使用 OpenCode 或 Antigravity 等 AI 编码工具的设计师，也适用于希望在 AI 编写 UI 时仍以 Figma 系统为准的小型团队。你继续在 Figma 中进行设计。你的 Agent 可以获得精确的组件、设计令牌和规则，而不是根据截图猜测。

工作原理

1. 在 Figma 中设计。 按照常规方式构建组件，并遵循命名约定， 让导出结果保持可预测。
2. 使用插件导出。 Frame-Relay 插件会将你的文件转化为一个套件：组件规格、 设计令牌、图标和截图，均以普通 JSON 和图像文件的形式保存。
3. 运行同步。 一条命令即可将 React + Tailwind 组件、令牌 CSS、供 AI 使用的规则文件 以及 MCP 客户端配置写入你的项目。
4. 使用 AI Agent 构建。 你的 Agent 通过 MCP 服务读取套件，然后构建 与设计一致的页面。规则文件会防止它擅自编造普通按钮或硬编码颜色。

实时模式是可选的第五步：将 Figma 与你的 Agent 配对，让它读取你当前 选中的图层。请参阅实时模式。即使不使用实时模式，导出模式也始终可用。

60 秒快速入门

# 1. Create a React + TypeScript app (Vite shown here; any React app works)
npm create vite@latest my-app -- --template react-ts
cd my-app

# 2. Add Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite
# Then add the tailwindcss() plugin to vite.config.ts and
# `@import "tailwindcss";` to src/index.css.

# 3. In Figma: run the Frame-Relay plugin, open the Export tab, click Export Kit (.zip)

# 4. Set up Frame-Relay and sync the kit
npx @frame-relay/cli@beta init --yes
npx @frame-relay/cli@beta sync --from ~/Downloads/frame-relay-kit-my-file.zip

# 5. Check the setup
npx @frame-relay/cli@beta doctor

在 OpenCode（或你的 AI 工具）中打开该文件夹，然后提出请求：“使用套件中的 组件构建一个设置页面。”Agent 会调用 MCP 服务获取组件列表、属性和设计令牌，然后进行构建。

获取 Figma 插件： Frame-Relay 即将上架 Figma 社区。在通过审核之前，请打开 Figma 桌面应用，前往 Plugins、Development、Import plugin from manifest，然后选择 此代码库中的 packages/plugin/manifest.json。

完整演练：开始使用。先了解理念： 概念。

面向设计师的设置指南

以下步骤适用于从未使用过终端的设计师。终端是一个窗口，你可以在其中向电脑输入简短命令。你的 AI 编码工具内置了终端。

第 1 部分：准备就绪（仅需一次）

步骤 1. 安装 Node.js。 前往 nodejs.org，下载 LTS 版本，并像安装其他应用一样完成安装。 原因： Frame-Relay 运行于 Node.js。没有它，你的电脑就无法运行以下命令。

步骤 2. 安装 AI 编码工具。 任选一种：Cursor、Antigravity、OpenCode 或 Claude Code。安装并登录。 原因： 这个 AI 会帮你构建应用。Frame-Relay 会教它使用你的设计。

步骤 3. 将 Frame-Relay 插件添加到 Figma。 打开 Figma，在社区插件中搜索“Frame-Relay”，然后点击 Install。在插件上架之前，请从最新的 GitHub 版本下载插件 zip，并按照这些导入步骤操作。 原因： 通过这个插件，你的设计才能离开 Figma 并交给 AI。

第 2 部分：在 Figma 中

步骤 4：设计组件。 将按钮、输入框和卡片构建为 Figma 组件。遵循命名规范中的简单命名规则，例如将变体命名为 "Size=Large" 或 "State=Hover"，并使用 Figma 变量设置颜色和间距。 原因： 清晰的名称有助于 Frame-Relay 理解你的设计。变量可以让它将准确的颜色和尺寸带入代码。

步骤 5：检查文件。 运行 Frame-Relay 插件并打开 Lint 标签页。点击 Check file。修复列出的问题，然后再次检查。 原因： 这就像设计文件的拼写检查。它能在问题变成混乱的代码之前发现它们。

步骤 6：导出工具包。 打开 Export 标签页并点击 Export kit。系统会下载一个 zip 文件。 原因： 这个 zip 文件将整个设计系统打包到一起：颜色、尺寸、组件以及每个组件的图片。

第 3 部分：设置应用

步骤 7：创建项目文件夹。 在电脑上新建一个文件夹，例如 my-app。名称中使用连字符，不要使用空格。在 AI 工具中打开该文件夹。 原因： 应用代码需要一个存放位置。

步骤 8：让 AI 设置应用。 将以下内容粘贴到 AI 工具中：

Set up a Vite + React + TypeScript app in this folder, with Tailwind CSS v4 and the "@/" path alias pointing to src. Then run npm run build to confirm it works.

原因： 这会创建一个空应用，Frame-Relay 知道如何与之协作。

步骤 9：设置 Frame-Relay。 在 AI 工具中打开终端并输入：

npx @frame-relay/cli@beta init

对它提出的问题回答 yes。 原因： 它会检查你的应用，并让应用做好接收设计的准备。

步骤 10：导入设计。 输入以下内容，并在末尾留一个空格：

npx @frame-relay/cli@beta sync --from

然后将第 6 步中的 zip 文件拖入终端并按 Enter。 原因： 这会打开这个“盒子”。它会将 Figma 组件转换为实际代码，并编写规则告诉 AI：“始终使用这些组件。不要自行编造。”

步骤 11：运行健康检查。

npx @frame-relay/cli@beta doctor

你应该会看到绿色勾号。 原因： 这就像汽车上的警示灯。它会在你开始构建前确认一切都已连接。

第 4 部分：使用 AI 构建

步骤 12：让 AI 构建页面。 在 AI 工具中开始新聊天，并提出你的需求，例如：“使用我的设计工具包构建一个登录页面。” 原因： AI 现在会在构建前查找你的组件，因此它会使用你的按钮和输入框，而不是自行编造。

步骤 13：查看应用。 在终端中输入：

npm run dev

在浏览器中打开它显示的链接，通常是 http://localhost:5173。 原因： 你可以看到 AI 构建的页面，并将它与 Figma 设计进行比较。

步骤 14：检查 AI 的工作。

npx @frame-relay/cli@beta check

原因： 它会找出 AI 违反规则的地方，例如使用了随机颜色。如果发现问题，请让 AI：“修复 frame-relay check 发现的问题。”

第 5 部分：其他功能

步骤 15：使用实时模式（可选）。 让 AI：“启动 Frame-Relay 实时模式。”它会提供一个 6 位数代码。在 Figma 中打开插件的 Live 标签页，输入代码并点击 Connect。现在，在 Figma 中选择任意内容，然后让 AI：“构建与我在 Figma 中选中的内容相匹配的内容。” 原因： AI 可以立即看到你在 Figma 中选择的内容，因此你可以根据尚未导出的设计进行构建。

步骤 16：修改设计时。 重复步骤 5、6 和 10：再次检查、导出和同步。 原因： 你的代码会始终与最新的 Figma 设计保持一致。如果你手动编辑了生成的组件，Frame-Relay 会保留你的编辑，并将新版本保存在旁边，因此你不会丢失任何工作。

支持的 AI 工具

sync 会为找到的每个工具写入设置，让 Agent 可以立即开始使用该工具包。

工具	sync 写入的内容
Antigravity	.agents/mcp_config.json 和 .agents/rules/frame-relay.md
OpenCode	opencode.json（合并写入，保留其他键）和 AGENTS.md
Cursor	.cursor/mcp.json 和 .cursor/rules/frame-relay.mdc
Claude Code	.mcp.json 和 CLAUDE.md

在稳定版发布之前，该软件包仅以 beta 标签发布。最简单的设置方式是将它作为开发依赖安装一次：npm install -D @frame-relay/cli@beta。随后，Sync 会写入一条使用本地安装版本的命令，MCP 服务即可启动，无需任何更改。

文档

页面	内容
快速入门	从空文件夹开始，逐步创建一个由 AI 构建的页面。
概念	工具包、sync、规则文件、MCP、check、doctor 和实时模式。
CLI 命令	每条命令、对应的标志以及它写入的文件。
Figma 插件	Lint、Export 和 Live 选项卡，以及警告和图标规则。
实时模式	配对、Live 选项卡、实时工具、安全性和故障排除。
MCP 服务	Agent 调用的 10 个工具、资源和客户端设置。
工具包格式	文件夹布局，以及工具包 JSON 文件中的每个字段。
转换器	Figma 数据如何映射到工具包规范，包括所有警告代码。
Figma 命名规范	确保导出内容整洁的命名规则。
JSON 架构	清单、令牌和组件架构的稳定 URL。

相同的文档也发布在 **https://joseph-brendan.github.io/Frame-Relay/**。

参与贡献

设置、命令、分支命名和发布说明请参阅 CONTRIBUTING.md。 安全问题报告请参阅 SECURITY.md。我们收集的内容：无，详见 PRIVACY.md。

许可证

MIT，版权所有 (c) 2026 Joseph Brendan。