尧图网页设计 
去年年中我写了三篇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直接打开即用。不用装 SketchWindows 也能看不用注册账号。选根文件夹后还能按目录树项目/版本浏览切换也可以直接拖文件进来。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:24y:418width:327height:52children:-id:INP1BG00001name:输入框底type:rectanglex:24y:418width:327height:52cornerRadius:{topLeft:14,topRight:14,bottomRight:14,bottomLeft:14}fills:[f1]# 查表引用, 不再整段重复borders:[b1]shadows:[sh1]-id:GRPICOMAIL1name:邮箱图标type:IMAGE-SVG# 无文本的矢量组合: 整体折叠为素材x:40y:435width:20height:17simplified:colors:[]strokes:[{color:#9ca3af,width:1.5}]-id:INP1TX00001name:占位文字type:textx:72y:435text:content:邮箱地址lines:--text:邮箱地址style:{fontFamily:PingFangSC,fontWeight:400,fontSize:15,color:#9ca3af,lineHeight:18}colorFormat:#AARRGGBB4. 切图导出任意节点可导出 png / jpg / webp / svg支持批量上限100。AI 通过 MCP 拉的切片会直接下载到本地mcp_output/目录。下面是通过 MCP 导出的 3x切图。现在的模型聪明多了会根据项目的规范自己给图片命名。节省了许多人工操作。5. MCP没有特别多的功能目前就两个工具方法也减少了不必要的token消耗。工具作用get_node_data返回节点结构化数据默认YAML 省 token可选 JSONget_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 server2025年年中 Config 前后推出跑在桌面端本地后来又补了云端 remote 接入能直接给 AI 提供代码、变量、图片链路相当完整。但有几个现实问题官方 MCP要求 Dev 或 Full 席位价格相比蓝湖贵得多团队源文件是 Sketch 的话导入 Figma 有损等于多一道格式迁移成本。我们目前就是这样而Figba就是一个免费的设计稿数据供给工具。适合目前团队用sketch的。功能单一局限性很强。有点像个人定制。主打一个自己用的舒服哪里不满足自己开发优化。当然目前也有一些不足例如sketch的效果还原度有时还是存在问题比起蓝湖还是要差一些。具体需要多使用不断完善。我自己也用了一些工具一样才存在大大小小的显示问题。四、还原 UI 代码现在还有哪些问题1. 还原度上限取决于设计稿自身的工程质量Figma 官方在 MCP 指南里的建议很直白用 auto layout、组件、variables配合 Code Connect生成质量才高——本质是要求设计稿把布局意图和语义显式表达出来。反过来说自由摆放的绝对定位稿子、幽灵图层、命名混乱的分组AI 拿到的就是一团浆糊还原效果完全看模型的智商了。去年我就遇到了这样的问题手动把 Figma 图层分组和命名规范了一遍还原效果才明显提升。这个前提到今天依然成立——工具解决不了不规范的稿子。2. 重复造轮子AI 天然倾向重造轮子而不是引用项目里已有的组件。之前我是靠一整套rules 硬约束的Figma 对应物是 Code Connect效果官方也承认更好但配置和维护成本不低。3. 设计稿里没有的信息AI 只能编设计稿是静态帧。响应式断点、hover/按压等交互状态、动效、暗黑模式、多语言和 RTL——稿子里通常根本没有AI 只能猜或编最后还是开发者自己补。数据只覆盖画了什么没画的部分要靠团队约定或人来补。给 AI 喂精确、带语义的结构化数据然后用规范和工具约定补齐剩下的缺口。写在最后相比去年模型能力提高了很多做出来的效果也是越来越好了。但是目前还不能做到100%的还原90%是有的。如果结合需求文档去让AI开发整体效果还更好一些因为页面数据不再是静态固定的有交互最终的完成度会更高。项目目前还没开源感兴趣的朋友可以留言人多的话我抽空整理开源出来。下一步我打算实际需求里跑一段时间把细节交互再打磨打磨。目标是怎么懒怎么来哈哈~ 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直接打开即用。不用装 SketchWindows 也能看不用注册账号。选根文件夹后还能按目录树项目/版本浏览切换也可以直接拖文件进来。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:24y:418width:327height:52children:-id:INP1BG00001name:输入框底type:rectanglex:24y:418width:327height:52cornerRadius:{topLeft:14,topRight:14,bottomRight:14,bottomLeft:14}fills:[f1]# 查表引用, 不再整段重复borders:[b1]shadows:[sh1]-id:GRPICOMAIL1name:邮箱图标type:IMAGE-SVG# 无文本的矢量组合: 整体折叠为素材x:40y:435width:20height:17simplified:colors:[]strokes:[{color:#9ca3af,width:1.5}]-id:INP1TX00001name:占位文字type:textx:72y:435text:content:邮箱地址lines:--text:邮箱地址style:{fontFamily:PingFangSC,fontWeight:400,fontSize:15,color:#9ca3af,lineHeight:18}colorFormat:#AARRGGBB4. 切图导出任意节点可导出 png / jpg / webp / svg支持批量上限100。AI 通过 MCP 拉的切片会直接下载到本地mcp_output/目录。下面是通过 MCP 导出的 3x切图。现在的模型聪明多了会根据项目的规范自己给图片命名。节省了许多人工操作。5. MCP没有特别多的功能目前就两个工具方法也减少了不必要的token消耗。工具作用get_node_data返回节点结构化数据默认YAML 省 token可选 JSONget_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 server2025年年中 Config 前后推出跑在桌面端本地后来又补了云端 remote 接入能直接给 AI 提供代码、变量、图片链路相当完整。但有几个现实问题官方 MCP要求 Dev 或 Full 席位价格相比蓝湖贵得多团队源文件是 Sketch 的话导入 Figma 有损等于多一道格式迁移成本。我们目前就是这样而Figba就是一个免费的设计稿数据供给工具。适合目前团队用sketch的。功能单一局限性很强。有点像个人定制。主打一个自己用的舒服哪里不满足自己开发优化。当然目前也有一些不足例如sketch的效果还原度有时还是存在问题比起蓝湖还是要差一些。具体需要多使用不断完善。我自己也用了一些工具一样才存在大大小小的显示问题。四、还原 UI 代码现在还有哪些问题1. 还原度上限取决于设计稿自身的工程质量Figma 官方在 MCP 指南里的建议很直白用 auto layout、组件、variables配合 Code Connect生成质量才高——本质是要求设计稿把布局意图和语义显式表达出来。反过来说自由摆放的绝对定位稿子、幽灵图层、命名混乱的分组AI 拿到的就是一团浆糊还原效果完全看模型的智商了。去年我就遇到了这样的问题手动把 Figma 图层分组和命名规范了一遍还原效果才明显提升。这个前提到今天依然成立——工具解决不了不规范的稿子。2. 重复造轮子AI 天然倾向重造轮子而不是引用项目里已有的组件。之前我是靠一整套rules 硬约束的Figma 对应物是 Code Connect效果官方也承认更好但配置和维护成本不低。3. 设计稿里没有的信息AI 只能编设计稿是静态帧。响应式断点、hover/按压等交互状态、动效、暗黑模式、多语言和 RTL——稿子里通常根本没有AI 只能猜或编最后还是开发者自己补。数据只覆盖画了什么没画的部分要靠团队约定或人来补。给 AI 喂精确、带语义的结构化数据然后用规范和工具约定补齐剩下的缺口。写在最后相比去年模型能力提高了很多做出来的效果也是越来越好了。但是目前还不能做到100%的还原90%是有的。如果结合需求文档去让AI开发整体效果还更好一些因为页面数据不再是静态固定的有交互最终的完成度会更高。项目目前还没开源感兴趣的朋友可以留言人多的话我抽空整理开源出来。下一步我打算实际需求里跑一段时间把细节交互再打磨打磨。目标是怎么懒怎么来哈哈~