AIAI 工具图鉴
← 返回全部文章
·约 12 分钟

Huolala Figma MCP

Agent编程开发图像设计
本文目录
  1. 🚀 什么是 Huolala Figma MCP？
  2. ✨ 核心功能一览
  3. 🎯 高保真 UI 代码生成
  4. 🔧 智能列表识别与布局
  5. 📸 自动切图与 Icon 识别
  6. 📊 与竞品对比
  7. 💡 适用场景
  8. 功能演示 1：高效 UI 生成
  9. 功能演示 2：多语言代码转码
  10. 用户群体总结
  11. 🛠️ 快速上手：5 分钟跑通示例
  12. 安装
  13. Figma API Token 配置
  14. 核心使用示例
  15. 💰 定价方案
  16. 🎯 总结

📌 核心价值：将 Figma 设计稿自动转换为高保真 UI 代码，还原度远超开源方案

货拉拉自研 MCP 服务，独家图层清洗 + VLM 列表识别 + YOLO 红点检测，2 分钟完成以往需 12 小时的 UI 开发。

封面图

🚀 什么是 Huolala Figma MCP？

Huolala Figma MCP（huolala-figma-mcp）是货拉拉（Huolala）内部自研的 模型上下文协议（MCP）服务，核心功能是将 Figma 设计稿自动转换为高保真度 UI 代码。

GitHub stars GitHub forks

核心定位：不是简单的规则转码，而是融合多模态大模型（VLM）、独家算法（YOLO 检测、图层清洗）和 DSL 处理器注册机制的企业级 Figma-to-Code 方案。

传统 UI 开发中，设计师在 Figma 中完成设计稿后，前端工程师需要手动编写 HTML/CSS/React/Vue 代码，这个过程耗时且容易存在视觉偏差。Huolala Figma MCP 通过 AI 客户端（如 Cursor、Qoder）调用后，可直接返回包含 index.html、切图、字体等资源包的 ZIP 文件，再由 LLM 进一步转码为目标平台代码（React、Vue、Swift、Kotlin 等）。

✨ 核心功能一览

Huolala Figma MCP 核心功能

🎯 高保真 UI 代码生成

多模态大模型识别设计稿结构

核心能力：通过 Figma REST API 获取节点、图层、样式等原始数据，利用 多模态大模型（VLM） 对设计稿进行语义理解，输出包含 x、y、width、height、type、text 等字段的 JSON 结构描述。

输入要求：Figma 设计稿 URL + AI 客户端（Cursor/Qoder）

输出效果：精确还原的设计稿 HTML 页面 + 语义化命名的切图资源

适用场景：企业级后台管理系统、移动端 UI、电商页面

🔧 智能列表识别与布局

Figma Context MCP 转换流程对比

技术亮点：

  • 采用 VLM + SKILLS 联合方案识别横向列表、纵向列表和网格列表
  • 横向列表处理交错列表和带分割线列表
  • 纵向列表自动包裹未包裹的局部纵向列表
  • 网格列表优先判断表格结构（间距小、列宽同），否则使用 flex-wrap 折行布局

SKILLS 处理逻辑示例（YAML 格式）：

---
name: adjust-list-layout
description: 根据 vlm_result.json 识别列表控件并调整 HTML 布局
---
## 判断逻辑
- **横向列表**: 子元素 y 和 height 一致，或交错排列
- **纵向列表**: 子元素 width 和 x 坐标一致
- **网格列表**: 子元素 height 相同，存在多行，同行 y 坐标相同

📸 自动切图与 Icon 识别

Figma 官方 MCP 对比

独家切图算法：

  • 自研 Icon 识别算法，支持同时导出 2x、3x 多倍率切图
  • 像素级相似度检测，自动去重重复图标
  • 语义化命名（如 home_icon_2x.png），便于前端直接使用

对比优势：开源 Figma Context MCP 在复杂图层切图上存在大小不对问题，官方 Figma MCP 在部分 case 下切图也不准确，而 Huolala 方案通过独家算法解决了这一痛点。

📊 与竞品对比

Huolala Figma MCP vs 竞品对比

方案 UI 还原度 自动切图 缺点/不足
多模态大模型（图片输入） 低 不可用 无法精确还原属性，还原度最差
开源 Figma Context MCP 高 复杂图层不对 未融合多模态，循环组件处理不佳
Figma 官方 MCP 高 部分 case 不对 复杂页面还原度差
Huolala Figma MCP 高 2x/3x 支持 独家算法解决上述痛点，还原度最高

注意：百度自研的 F2C 还原度也极高且支持切图，但未对外开放，故未列入直接开源对比。

💡 适用场景

功能演示 1：高效 UI 生成

货拉拉 MCP 完整流程

功能说明：使用 figma_to_code_package 工具，输入 Figma 设计稿 URL，AI 客户端自动获取包含 HTML、切图、字体、多模态数据的 ZIP 包。

输入要求：Figma 设计稿 URL

输出效果：ZIP 包包含 index.html（精确还原页面）、vlm_result.json（VLM 理解结果）、images_2/images_3（2x/3x 切图）、fonts（字体文件）

适用场景：

  • 新页面开发：从 0.5 天缩短到 2 分钟
  • 新增卡片样式：从 30 分钟缩短到 2 分钟
  • 新增按钮：从 10 分钟缩短到 1 分钟

功能演示 2：多语言代码转码

功能说明：生成的 HTML 可作为参考基准，再通过 LLM 进一步转码为目标平台代码。支持 React、Vue、Objective-C、Swift、Kotlin、React Native 等多种语言。

输入要求：HTML 产物 + 目标语言偏好

输出效果：符合目标语言规范和项目组件约定的代码文件

适用场景：

  • Web 前端（React/Vue）快速原型
  • 移动端原生开发（Swift/Kotlin/Objective-C）
  • 跨平台开发（React Native）

用户群体总结

  • ✅ 前端开发工程师：快速从设计稿生成代码原型，减少重复劳动
  • ✅ UI/UX 设计师：设计稿直接转为可运行代码，减少沟通成本
  • ✅ 移动端开发者：一套设计稿同时生成 iOS/Android/Web 代码
  • ✅ 创业团队：快速迭代产品原型，降低 UI 开发成本
  • ❌ 不适合：需要深度定制业务逻辑的复杂页面（仍需大量人工编码）

🛠️ 快速上手：5 分钟跑通示例

安装

Huolala Figma MCP 通过 MCP 协议工作，支持一键安装到 Cursor：

# 方式 1：在 Cursor 中一键安装
# 打开 Cursor → 设置 → MCP → 添加 MCP Server
# 输入 huolala-figma-mcp 配置即可

# 方式 2：手动配置（适合非 Cursor 环境）
git clone https://github.com/HuolalaTech/huolala-figma-mcp.git
cd huolala-figma-mcp
pip install -e .
cp .env.example .env
# 编辑 .env 配置 Figma API Token 等参数

Figma API Token 配置

# 在 Figma 设置中获取个人访问令牌
# Settings → Plugins and keys → Create new key

# 配置到 .env 文件
FIGMA_API_TOKEN=YOUR_FIGMA_TOKEN

核心使用示例

在 Cursor 中使用 Huolala Figma MCP 的提示词模板：

# 使用 ui2code_with_skills 提示词
/ui2code_with_skills [你的Figma设计稿URL]

系统将自动：

  1. 通过 Figma REST API 获取设计稿数据
  2. 运行 VLM 多模态分析
  3. 执行 DSL 处理器管道
  4. 返回完整 ZIP 包（HTML + 切图 + 字体）

💰 定价方案

开源协议： Apache-2.0

完全免费：Apache-2.0 协议开源，个人和企业均可自由使用，无任何授权费用。

💡 无需 API Key 费用：只需自备 Figma 个人 API Token（免费额度足够日常使用），无需额外付费。**

🎯 总结

Huolala Figma MCP 是当前 Figma 到代码转换领域最完善的开源方案，通过融合多模态大模型（VLM）、独家算法（YOLO 检测、图层清洗）和灵活的 DSL 处理器注册机制，实现了远超开源社区方案和 Figma 官方 MCP 的还原度。

推荐指数： ⭐⭐⭐⭐⭐（满分5星）

适合人群： 前端开发工程师、UI/UX 设计师、移动端开发者、创业团队

GitHub 仓库： HuolalaTech/huolala-figma-mcp

数据截至 2026-06-16，最新信息请以官网为准。