2026 年了，AI 已经能写业务代码、做单元测试，但设计还原环节依然是痛点：

• 设计师给的高保真稿，间距、阴影、字体权重差 0.5px 就要来回 battle

• 手动抠样式 + 写 Tailwind / CSS 耗时巨大，尤其是营销页、后台复杂组件

• 传统 Figma 插件生成的代码往往结构混乱、不可维护，基本只能当参考

CodeRio 的定位就是解决“高保真、结构可维护、生产可用”这三个核心诉求。它不是简单转 div，而是用多智能体 + 视觉闭环的方式，力求像素级接近原设计。

项目地址：https://github.com/MigoXLab/coderio/tree/main

---

一、CodeRio是什么

CodeRio 是一款 Figma-to-Code 自动化工具，专为追求高保真 UI 还原的前端开发者、团队和设计师设计。它不同于传统工具的“一锤子买卖”模式，而是采用多智能体系统（Multi-Agent System），通过多个 AI 代理协作，验证视觉准确度并迭代优化偏差，最终输出像素级接近原设计的代码。

为什么用多智能体？传统转换往往忽略视觉偏差，导致代码虽生成但需手动调整。多智能体通过分工（结构分析、代码生成、启动渲染、偏差判断、优化修复、可视化报告），形成闭环，确保还原精度。整个流程追求“高保真”，适用于精确还原设计的场景，如营销页、中后台 UI 等。

二、多智能体流水线整体架构

CodeRio 的工作原理基于一个复杂的多智能体流水线

Figma 设计 → 协议 → 代码 → 启动 → 验证 → 优化 → 报告
     ↓       ↓      ↓      ↓      ↓      ↓      ↓
  获取API  结构   初始   启动   判断   优化   可视化
          样式   智能体  智能体  智能体  智能体
          层级

这里，每个步骤对应一个或多个智能体，它们基于 LLM（如 Claude、GPT、Gemini）驱动，协作处理任务。流水线从 Figma 输入开始，到交互式报告输出结束，确保像素级还原。

• 获取 API 智能体：负责从 Figma API 拉取设计数据，包括节点树、样式和资源。

• 结构/样式/层级智能体：分析 Figma JSON，生成协议（中间表示层）。

• 初始智能体：基于协议生成初步代码。

• 启动智能体：初始化项目、安装依赖、启动服务器。

• 判断智能体：进行视觉对比，量化偏差。

• 优化智能体：迭代修复代码偏差。

• 可视化智能体：生成报告。

这种分工让系统更模块化：每个智能体专注单一职责，通过协议传递数据，实现高效协作。

三、效果展示

案例1：通过 CLI 执行 CodeRio

安装 CodeRio 后可以直接在 CLI 中执行命令使用，CodeRio 对于复杂样式的落地页有很好的还原能力，可以处理复杂的布局、多样化的图片资源识别和下载，以及组件结构封装，选择 “FULL” 模式，在生成结束后会生成还原度可视化评估报告，以标注和拓印两种模式展示设计稿和网页的偏差，给工程师进一步开发提供有效指引。

案例2：在 Cursor 中使用 CodeRio design-to-code skill

Coderio 也支持作为 SKILL 使用，在 Cursor 里可以输入 Prompt：“请帮我创建一个 React 工程，高保真还原设计稿”，并给定输出目录、设计稿链接、Figma Token即可跟随 Agent 的引导逐步生成网页，生成结束后即可安装依赖，部署本地服务，查看生成的网页结果。对于社区的 LandingPage 页面，可以达到高保真还原的标准，网页内的图片、样式均可还原，卡片等可复用组件做了封装，符合前端开发代码规范

四、工作步骤详解

步骤1：协议生成——多智能体构建语义化中间层

像素级还原的基础是准确理解设计稿。CodeRio 先用结构/样式/层级智能体从 Figma 提取一个智能设计协议（Protocol），这是一个结合组件结构、CSS 属性、静态资源的综合前端表示。

协议的核心作用：

• 组件层级识别：自动识别组件结构和数据状态，形成贴合前端开发习惯的组件层次骨架。

• 样式提取：将 Figma JSON 解译为 CSS 属性，包括颜色、间距、阴影、动画等。

• 资源优化：自动识别并处理图片节点。、

interface Protocol {
    id: string; // 组件标识符（如 "Header", "Hero"）data: {
        name: string; // 组件名称purpose: string; // 语义描述elements: FigmaFrameInfo[]; // 原始 Figma 节点数据
        layout?: LayoutInfo; // 位置、尺寸、间距、方向
        componentName?: string; // 可复用组件标识符
        props?: PropDefinition[]; // 组件 props 定义
        states?: StateData[]; // 组件状态变体
    };
    children?: Protocol[]; // 嵌套子组件
}

步骤2：代码生成——初始智能体输出 React 组件

基于协议，初始智能体生成React + TypeScript + Tailwind CSS 代码。文档强调，这不是简单映射，而是创建结构清晰、可维护的组件树。

• 组件拆分：根据协议的 children 和 componentName，自动生成嵌套组件（如 Header.tsx、Hero.tsx）。

• 样式应用：协议中的 layout 和 styles 转为 Tailwind 类名（e.g., flex flex-col gap-4 shadow-md）。

• 状态处理：states 字段映射到 React props 或 variant 支持。

• 资源集成：图片从协议的 assets 下载并导入。

生成的代码项目结构基于 Vite，开箱即用。这一步初步实现还原，但可能有偏差（如浏览器渲染差异），故需后续验证。

步骤3：启动与渲染——启动智能体准备验证环境

启动智能体负责：

• 安装依赖（pnpm install）。

• 启动开发服务器（pnpm dev）。

• 使用 headless 浏览器（如 Puppeteer）捕获渲染截图。

这一步桥接代码与视觉，确保后续判断基于真实渲染结果，而非理论样式。

步骤4-5：视觉验证与优化——判断与优化智能体实现像素级闭环

这是 CodeRio 实现“像素级还原”的核心，多智能体在这里发挥最大作用。通过自动化视觉测试，确保精度。

视觉验证过程（判断智能体）

• 位置校准：使用计算机视觉测量元素的精确定位（e.g., 边界框、间距）。

• 偏差量化：计算 MAE（Mean Absolute Error，平均绝对误差）等指标。

• 视觉差异报告：生成交互式 HTML 报告，包括：

  • 热力图叠加层（标注偏差区域）。

  • 并排对比（Figma 导出图 vs 渲染截图）。

  • 组件级准确度分析。

报告功能包括标注偏差的截图、像素差异热力图、组件级分析，帮助用户直观识别问题。

自动优化（优化智能体）

• 如果偏差超阈值，优化智能体介入：分析热力图和 MAE，生成代码修复（e.g., 调整 padding、shadow）。

• 迭代循环：修改代码 → 重新启动/渲染 → 再验证，直至达到准确度阈值。

• 这实现了“闭环优化”，多智能体协作让还原从“近似”到“像素级”。

通过这些，CodeRio 避免了人工干预，智能体自动逼近原设计。

步骤6：报告生成——可视化智能体输出最终产物

可视化智能体汇总结果，生成交互式验证报告（index.html），包含所有偏差分析和优化历史。用户可直接打开查看，方便与设计师沟通。

此外，CodeRio 内置了一套中断恢复系统（断点续传机制），能够在长流程中极大提升可靠性和用户体验：

它会在每个主要操作完成后自动创建检查点，完整保存当前任务状态（如已生成的协议、代码快照、迭代历史、视觉对比结果等）；

无论因为网络故障、API 超时、进程意外终止还是其他原因中断，用户只需重新执行相同命令，系统就能精确检测到上一次的进度并从对应检查点无缝恢复，继续执行后续步骤，而无需从头重跑整个流程。

五、快速上手

方式 1：命令行 CLI（推荐 👍🏻）

CodeRio 对 Node.js 版本有特定要求（>= 18.0.0 且 < 23.0.0）。配置好 Figma Token 和主流 LLM（如 Anthropic、OpenAI 或 Google）的 API Key 后，即可通过命令行使用。

1. 安装

# 全局安装（推荐）
npm install -g coderio

# 或使用 pnpm
pnpm add -g coderio

pnpm v9+ 用户注意：如果看到 "Ignored build scripts" 警告，请运行：

pnpm approve-builds

这将允许原生依赖（better-sqlite3）正确编译。

注意：playwright 和 sharp 仅在验证功能中需要。当您运行需要它们的命令（如 d2c --mode full）时，它们将被自动安装。

2. 配置

创建 ~/.coderio/config.yaml：

mkdir -p ~/.coderio
cat > ~/.coderio/config.yaml << 'EOF'
model:
  provider: openai          # anthropic | openai | google
  model: gemini-3-pro-preview
  baseUrl: https://api.anthropic.com
  apiKey: your-api-key-here

figma:
  token: your-figma-token-here

debug:
  enabled: false
EOF

3. 使用

# 将 Figma 设计转换为代码（默认模式：仅代码）
coderio d2c -s 'https://www.figma.com/design/your-file-id/...'

# 完整模式：生成代码 + 视觉验证 + 自动优化
coderio d2c -s 'https://www.figma.com/design/your-file-id/...' -m full

4. 运行项目

# 进入生成的项目目录
cd coderio/<设计文件名-页面节点编号>/my-app

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 🎉 打开 http://localhost:5173

5. 查看验证报告

# 在浏览器中打开验证报告
open coderio/<设计文件名-页面节点编号>/process/validation/index.html

方式 2：Skill（便携式嵌入工作流）

适用于需要 AI 辅助和更精准控制的场景。

前置准备： 将 Skill 文件拷贝到 Cursor 配置目录：

mkdir -p ~/.cursor/skills/design-to-code
cp docs/skills/SKILL.md ~/.cursor/skills/design-to-code/SKILL.md

Cursor 中使用：

1. 打开 Cursor Chat (Cmd + L)。
2. 输入："使用 design-to-code skill 帮我转换这个设计：[你的 Figma 链接]"
3. 智能体将引导你分步完成协议提取和代码生成。

Claude Code 中使用：

1. 启动 Claude Code。
2. 输入："阅读 docs/skills/SKILL.md 并执行设计转换任务：[你的 Figma 链接]"

如果你也认同“多智能体协作”是解决设计稿还原痛点的有效路径，或者希望在实际项目中尝试这种自动化的开发流，欢迎前往 GitHub 为 CodeRio 点上一颗 Star🌟。

项目地址：https://github.com/MigoXLab/coderio/tree/main

原文地址：https://mp.weixin.qq.com/s/xor_icFVM2-5B-BkK3syUQ