一、背景

UI 编程痛点

效率痛点：客户端工程师需要反复手动还原 UI。按钮、卡片、间距、阴影、圆角等细节全部手写，复制粘贴改参数成为体力活；对齐或间距差 1px 都要反复刷新查看效果。

多端维护：同一页面需同时维护 Android、iOS、鸿蒙三端代码，工作量成倍增长。说起来，

视觉还原度低：仅靠经验和肉眼难以精准还原设计稿。往往需要大量走查才能接近预期。说起来，

AI 技术飞速发展

自 2022 年底 ChatGPT 发布后Agent、MCP、SKILLS 等 AI 技术层出不穷。传统手写 UI 已无法满足 AI 编程趋势。不过，

二、现有技术方法及不足

目前团队常用以下方案生成 UI 代码，但均存在明显缺陷：

方案	转码语言	开源	UI 还原度	自动切图	原理	缺点
Figma 插件 + 低代码网站	Lottie / H5 / RN 等 Web 语言 不支持 Kotlin / Objective‑C 等原生端	否	中等 依赖插件提取 UI 信息后规则转码。再经低代码网站编辑预览	-	-	灵活性差，语义化不足；切图质量不稳定，
图片输入 + 多模态大模型	MULTI 部分开源部分闭源	-	<低 只能粗略识别 UI 属性，精度差。	-	-	基本不可用，对复杂页面几乎无效。
PilotFigma MCP	MULTI 不开源，高还原度但局部切图错误。

产品定位： UI 开发日常必备工具。不过，

为解决上述不足，我们研发了 Huolala Figma MCP。其主要目标包括：

1. 高 UI 还原度： 独家图层清洗与精简算法，即使面对复杂或不合理的设计稿也能实现更高保真。
2. 精准切图： 自研 ICON 识别算法。可一次导出 2x 与 3x 多倍切图，满足多网站需求。
3. 便捷使用： 一键安装至 Cursor，无需手动配置；SSO 登录即用，
4. 高 性： 提供 Prompt 模板与 SKILLS。可即插即用，也可自由组装定制。
5.  支持 React、Vue、Objective‑C、Kotlin、React Native 等主流前端/移动端语言。

三、Huolala Figma MCP 原理解析

MCP 整体架构与主要模块

• User Input Extraction： 解析使用者提示词，将 Figma URL 等关键信息转化为 MCP 所需参数。老实说，
• Aquire Figma Data： 对图层进行清洗、自动修复异常 AutoLayout。并识别并去重 ICON 与红点气泡等特殊元素。
• Smar tIDE Transcoding： 依据使用者需求动态加载对应 Skills。最终将 HTML 与切图交给智能 IDE，根据提示词生成目标语言代码。

. MCP 功能清单

获取 Figma 数据并返回包含 HTML 、切图资源 、字体 和 多模态数据 的 ZIP 包 预设 Prompt 模板。一键触发完整转码流程 获取指定节点属性，用于局部 UI 修改 内置多种 Skills，可按需加载使用

类型	名称	说明
Tool figma_to_code_package
Prompt ui2code_with_skills
Prompt get_figma_property
Resource Skills 列表

. 输出产物说明

产物	说明
index.html 的精确还原页面可转码参考基准；包含完整层级与样式信息，老实说，
vlm_result.json 多模态大模型对设计稿的理解结果。说起来，
images_2 / images_3 分别对应 @2x 与 @3x 的切图资源。文件名语义化，
fonts 导出的字体文件集合。

. Skills机制 & 可 性

• adjust-list-group : 循环组件自动识别与列表/网格布局调整。
• Multi‑Language Transcoding : 支持 React 、 Vue 、 Objective‑C 、 Swift 、 Kotlin 、 React Native 等语言输出。怎么说呢，
• 使用者亦可自行注册自定义 Skills。实现图片压缩上传 CDN 等业务专属功能。

. 列表识别与合并​​​​​​​​​​​​​​​​​​​​​​​​​

• 传统规则只能处理简单列表；我们利用大型多模态模型直接输出带坐标与层级信息的 JSON，以实现横向/纵向/网格列表的统一识别。老实说，

  {
  "type"这方面，"tabBar","x": ...,"y": ...,"width": ...,"height": ...,"backgroundColor": "#FFFFFF"。"items":
  }
  

* 使用者痛点嵌入*：列表结构错乱导致前端手工重构耗时30%+；通过 Skills 自动调平列表层级。可直接得到语义化 HTML，大幅降低人工干预成本。

. 红点&气泡识别​​​

• 针对尺寸极小且形状多变的红点/气泡。我们自行标注数据并训练 YOLOv8 检测模型，实现>95% 的准确率。
  从示例来看。在复杂卡片中成功剔除误检红点，仅保留真实业务徽标。

. Icon 合并与去重

• 利用控件属性+几何特征+元素排布进行聚类。对同一视觉 Icon 的多个矢量方法进行合并，并在打包阶段执行像素级相似度检测去重。
  此步骤显著降低最终包体积，解决因重复导出导致的网络请求浪费问题。

. 图层清洗

• 投影矩阵法检测被完全遮挡且不可见的图层；若投影最小值大于当前层级序号，则安全删除。按理说，
  此策略能够剔除设计稿中隐藏的占位层或误放置的叠加元素，减少无意义切图和 CSS 冗余.

. 布局计算与重构

• 针对设计稿中出现的不合理分组或折行布局。重新计算父容器尺寸与子元素排列方式，实现统一 Flex/Grid 或 Table 布局输出。
  该过程明显提高生成代码在不同屏幕尺寸下的适配性和可维护性.

---