AI生成UI代码实践 —— Figba-开发者社区

去年年中我写了三篇AI生成Flutter UI代码实践，当时的结论是：Cursor + Figma-Context-MCP是当时最理想的方案，实际项目用下来效率提升不小。但还是会存在一些问题。

一年多过去，模型能力大大增强，各种Agent层出不穷。但我自己这边依然有两个问题：

设计的源文件是 Sketch，上传Figma有时还需要调整，目前我们团队并没有直接使用Figma的auto layout、组件等。
用figma的mcp去年底开始有每月有限额，不买席位基本没法用。

那我就想直接读本地的.sketch文件，连上自己的mcp。中间也试过sketch mcp，折腾了一圈没有现成的免费好用的工具，那就自己写一个。

所以有了这个想法，我就让 AI 帮我把这个工具写了出来，就是本篇的主角：Figba，随便起的名字，没什么含义。

一、Figba 是什么

一句话：一个本地 Sketch 文件查看器 + MCP server。浏览器直接打开.sketch文件就能解析渲染，支持图层树检查、选中测量间距、查看结构化数据（JSON / YAML）、导出切图；内置的 MCP server 把你当前打开的设计稿结构化数据喂给 AI Agent。文件全程只在本地处理，不上传。

左边图层树，中间画布，右边检查器。几个我比较满意的点：

1. 零依赖渲染

没有 Electron，没有服务端。就是 html + js，直接打开即用。不用装 Sketch（Windows 也能看），不用注册账号。选根文件夹后还能按目录树（项目/版本）浏览切换，也可以直接拖文件进来。

2. 测量

选中任意图层后，悬停其他图层直接测间距；画布平移、以光标为锚缩放，交互习惯和蓝湖基本一致。

3. 为 LLM 定制的结构化数据

任意节点可以输出结构化数据，页面弹窗和 MCP 工具返回的是同一份，格式约定完全按"给大模型看"来设计：

坐标统一是画板内绝对位置，相对父级 = 子坐标 − 父坐标，AI 要算间距自己做减法就行；
出现 2 次以上的填充/描边/阴影/文本样式，统一抽到顶层styles表查表引用（字段值是t1、f1这类短字符串），省 token；这块也是参考了Figma-Context-MCP。
无文本的矢量/蒙版组合折叠成IMAGE/IMAGE-SVG素材；设计师标记了导出格式或 Slice 的组合折叠为IMAGE-CUT，内部结构不再单独输出——这正是把我在系列（二）里靠icon_/image_命名约定实现的"切图节点不展开"固化成了产品功能，而且判定依据是设计师在源文件里打的标记，不再强制要求规范命名；
另外我做了精简模式，合并了许多不必要的路径，矩形，蒙版。查看方便，结构化数据也更聚焦。实测下来比原始数据减少60%左右。

弹窗长这样，JSON / YAML 可切换，YAML 格式会更省 token：

真实项目图层嵌套和重复样式更多，样式去重的收益会更明显。节选一段实际输出（有删减）：

tyles:# 出现≥2次的填充/描边/阴影/文本样式抽表去重f1:{type:SOLID,color:'#ffffff'}b1:{thickness:1,position:INSIDE,color:'#e5e7eb'}sh1:{color:'#0f172a',offsetX:0,offsetY:2,blurRadius:6,alpha:0.04}t1:{fontFamily:PingFangSC,fontWeight:400,fontSize:12,color:'#9ca3af',lineHeight:17}# ……画板及上层结构有删减……-id:GRPINP10001name:邮箱输入框type:groupx:24'y':418width:327height:52children:-id:INP1BG00001name:输入框底type:rectanglex:24'y':418width:327height:52cornerRadius:{topLeft:14,topRight:14,bottomRight:14,bottomLeft:14}fills:[f1]# 查表引用, 不再整段重复borders:[b1]shadows:[sh1]-id:GRPICOMAIL1name:邮箱图标type:IMAGE-SVG# 无文本的矢量组合: 整体折叠为素材x:40'y':435width:20height:17simplified:colors:[]strokes:[{color:'#9ca3af',width:1.5}]-id:INP1TX00001name:占位文字type:textx:72'y':435text:content:邮箱地址lines:--text:邮箱地址style:{fontFamily:PingFangSC,fontWeight:400,fontSize:15,color:'#9ca3af',lineHeight:18}colorFormat:'#AARRGGBB'

4. 切图导出

任意节点可导出 png / jpg / webp / svg，支持批量（上限100）。AI 通过 MCP 拉的切片会直接下载到本地mcp_output/目录。下面是通过 MCP 导出的 3x切图。

现在的模型聪明多了，会根据项目的规范自己给图片命名。节省了许多人工操作。

5. MCP

没有特别多的功能，目前就两个工具方法，也减少了不必要的token消耗。

工具	作用
`get_node_data`	返回节点结构化数据，默认YAML 省 token，可选 JSON
`get_node_slice`	导出切图，单个或批量（≤100）

顶栏「MCP 配置」一键复制，粘贴进 Claude Code 的.mcp.json或 Cursor 配置即可：

完整工作流就四步：

浏览器打开viewer.html，选根文件夹或拖入.sketch文件；
顶栏「MCP 配置」一键复制，注册进 AI 工具；
右键节点「复制节点ID」；
告诉 AI：按这个节点获取效果图并还原界面。AI 自己调get_node_data拿布局、get_node_slice拉切图。

比如把上面那段 YAML 给到 AI，主按钮的代码基本是"直译"：

Container(width:327,height:52,decoration:BoxDecoration(gradient:constLinearGradient(begin:Alignment.topLeft,end:Alignment.bottomRight,colors:[Color(0xFF6366F1),Color(0xFF8B5CF6)],),borderRadius:BorderRadius.circular(16),boxShadow:const[BoxShadow(color:Color(0x596366F1),offset:Offset(0,8),blurRadius:20),],),alignment:Alignment.center,child:constText('登 录',style:TextStyle(fontSize:17,fontWeight:FontWeight.w600,letterSpacing:2,color:Colors.white)，),)

像"按钮文案相对主按钮垂直居中"这类间距关系，AI 从两组 x/y、width/height 也能自己推出来。

二、我是怎么让 AI 开发的

整个项目从9月开始，断断续续一周多的业余时间，AI 编码，我的角色是提需求、定验收、试用反馈。基本套路是：

让 AI 先出设计文档，我主要盯关键决策。比如最核心的一条：不重新实现 Sketch 解析和渲染，复用查看器自己的浏览器渲染管线——结构化数据和切片全部从页面现有导出管线里出，和你在界面上看到的结果同源，不存在"AI 读到的数据和画布显示的不一致"。
验收自动化。写了端到端自测：playwright 开真实浏览器页面模拟用户操作，断言"页面里改名后 MCP 查询立即反映""缺省 YAML 与 JSON 解析后内容一致"这些关键行为；另有 stdio 协议冒烟测试走完整 MCP 握手。AI 写完自己跑通自测，我再人工过一遍界面。

这次和去年系列里"在别人的开源项目上打补丁"完全是两种体验——需求是我的，怎么舒服怎么来，验收标准是我定的，代码是 AI 写的。

三、和蓝湖、Figma 差异

三者定位不同，Figba 不是前两者的替代品。蓝湖和 Figma 解决的是"设计与开发的协作"，Figba 解决的是"AI 编码时设计稿数据的供给"。

蓝湖

设计师用插件把 Sketch / PS / Axure 上传到云端，开发在网页上看标注、下切图，实时查看尺寸、颜色、间距，切图支持一键压缩、批量下载重命名。协作（评论、分享、版本管理）是它的强项。

蓝湖/MasterGo 也有 MCP 方案（比如 MasterGo 官方的 magic-mcp，需要个人访问令牌，社区也有蓝湖的 MCP 实现），进步很明显。

Figma

能力上限最高的一家：在线设计 + Dev Mode + 官方生态。官方 Dev Mode MCP server（2025年年中 Config 前后推出，跑在桌面端本地，后来又补了云端 remote 接入）能直接给 AI 提供代码、变量、图片，链路相当完整。但有几个现实问题：

官方 MCP要求 Dev 或 Full 席位，价格相比蓝湖贵得多；
团队源文件是 Sketch 的话，导入 Figma 有损，等于多一道格式迁移成本。（我们目前就是这样）

而Figba就是一个免费的，设计稿数据供给工具。适合目前团队用sketch的。功能单一，局限性很强。有点像个人定制。主打一个自己用的舒服，哪里不满足自己开发优化。

当然目前也有一些不足，例如sketch的效果还原度有时还是存在问题，比起蓝湖还是要差一些。具体需要多使用不断完善。我自己也用了一些工具，一样才存在大大小小的显示问题。

四、还原 UI 代码，现在还有哪些问题

1. 还原度上限，取决于设计稿自身的"工程质量"

Figma 官方在 MCP 指南里的建议很直白：用 auto layout、组件、variables，配合 Code Connect，生成质量才高——本质是要求设计稿把"布局意图"和"语义"显式表达出来。反过来说，自由摆放的绝对定位稿子、幽灵图层、命名混乱的分组，AI 拿到的就是一团浆糊，还原效果完全看模型的智商了。

去年我就遇到了这样的问题，手动把 Figma 图层分组和命名规范了一遍，还原效果才明显提升。这个前提到今天依然成立——工具解决不了不规范的稿子。