UI 与结构化界面

从“看懂截图”到“交付可编辑结构”。信息截至 2026-07-14。

从布局预览到分层资产的 UI 验证流程

结论先行

这组 UI 实验最重要的收获，不是模型终于能把图画得更像，而是工作流逐渐放弃让模型直接猜最终像素，转而让它生成可检查的中间表示。2023 年的方案从截图和图集反推绝对坐标，语义识别基本成立，精确位置和操作合法性却不稳定。2026 年的两个方案分别选择 HTML 和相对布局 JSON 做中间层，再把结果送入 PSD、Unity 或其他编辑环境。Pencil 与 Magic Layer 又从正反两面补足了证据：组件树、自动布局和原子操作适合被 Agent 操作；从一张平面图恢复图层虽有用，却不能还原原本的设计意图。

对研发团队来说，AI UI 更合适的目标是：在验证阶段快速得到一套结构正确、风格大致一致、可以继续编辑的界面骨架。它不应被定义成“输入一句话，直接产出正式美术”。最终质量仍取决于设计系统、资产一致性、跨分辨率适配、交互状态和人工审美判断。

原文演进

时间	案例	定位	编辑判断
2023-10	GPT4 辅助拼界面	归档案例，已被后续替代	证明多模态模型能识别 UI 语义，也暴露绝对坐标和自由格式操作不可靠
2026-02	Pencil 原理解析	核心案例，案例中跑通	将设计文件理解为可遍历、可调用原子工具修改的组件树
2026-03	UI 工作流方案 1	核心案例，原型可用	HTML 负责布局，图像模型负责素材，视觉模型回看并修正坐标
2026-03	UI 工作流方案 2	核心案例，原型可用	相对布局 JSON 进入 PSD 与 Unity，协作接口更明确
2026-05	Magic Layer	补充案例，原型可用	语义分割与修补能恢复可编辑层，但边缘、分组和遮挡仍需人工修复

版本链并不是单纯的模型升级。真正的变化发生在输出协议上：

截图到坐标：模型同时承担识别、空间测量和操作生成，任何一层偏差都会让结果失效。
HTML 到资产：浏览器先给出确定性布局，模型只补齐视觉素材，再通过截图回看。
JSON 到 PSD、Unity：布局数据成为团队接口，美术可改图层，程序可按规则映射组件。
原生设计树：Agent 操作 frame、component、variable、auto layout，而不是只输出一张图片。

有效方法

用相对约束表达布局

原文后续方案把“按钮在 638, 912”换成“按钮位于底部操作区，宽度占父容器的某个比例，并保持固定间距”。这类表示对分辨率变化更稳，也能被浏览器布局、Unity Anchor 或设计工具的 Auto Layout 分别解释。推荐保存父子关系、对齐、间距、最小和最大尺寸、层级、组件角色，不要只保存一次渲染后的矩形。

一个实用的中间表示至少应包含：

{
  "role": "primary-action",
  "component": "button/large",
  "parent": "bottom-actions",
  "layout": {"width": "fill", "height": 72, "gap": 12},
  "states": ["default", "pressed", "disabled"],
  "asset": "button-primary-bg",
  "content": {"text": "开始战斗"}
}

关键不在字段名，而在于它能被校验和确定性渲染。角色名还应连接团队设计系统，避免模型临时发明十种“主按钮”。

将预览变成反馈接口

方案 1 的 HTML 预览价值很高：它比导入 Unity 快，能直接截图，也适合让视觉模型比较目标图与当前结果。反馈不应是泛泛的“再好看一点”，而应转成结构化差异，例如“底部按钮组过宽 8%”“标题与面板左边缘未对齐”“装备槽数量少 1 个”。自动修正只处理可量化误差，审美取舍交给人工。

资产逐件生成并做契约检查

整张 UI 图看起来一致，并不意味着拆出的图标、边框、底板还能保持一致。每个资产应有用途、尺寸、透明背景、九宫格边界、色板、风格参考和禁止元素。生成后先做透明边缘、尺寸、重复度、文字残留和风格距离检查，再进入组合。无契约的逐件生成，常见结果是单件漂亮、合在一起像来自不同项目。

UI 工作流中拆分生成并重新组合的界面资产

以原子操作驱动编辑器

Pencil 案例的意义在于，它把 UI 编辑拆成创建节点、调整尺寸、设置填充、建立父子关系、导出等受限动作。Agent 可以组合这些动作，但不能绕过编辑器的数据模型。这比让模型直接写一个难以验证的二进制文件稳健，也更容易记录撤销、权限和失败位置。

失败原因

绝对坐标把多个难题绑在一起

截图识别不仅要知道“这里有按钮”，还要准确处理裁切、缩放、设备像素比、图集子区域和 Unity 坐标系。模型产生的坐标看似合理，误差却会沿链路放大。早期案例还出现了无效或不符合工具约束的操作。这不是简单加长提示词可以根治的问题，而是输出表示不合适。

图层恢复不等于设计恢复

Magic Layer 的原文观察约为六成可用。语义分割可以找出按钮、人物和面板，图像修补可以填补遮挡区域，但它不知道哪些对象本来是组件实例、哪个纹理应该九宫格拉伸、哪些阴影属于父层，也无法可靠恢复 hover、pressed、disabled 等交互状态。边缘发虚、遮挡补全错误和分组不合理都需要人工整理。

视觉一致性在拆分后衰减

整图生成享有全局上下文，逐资产生成则失去邻接关系。即使复用同一提示词，线宽、光向、材质、色温和细节密度也会漂移。解决方式不是无限重试，而是减少自由生成资产数量，优先复用组件库、设计 token 和已审核素材。

“导出成功”掩盖运行时问题

PSD 分层或 Prefab 生成成功，只说明文件能打开。生产环境还要检查安全区、多语言文本膨胀、手柄和键盘焦点、无障碍标签、动态列表、不同 DPI、图集和 Draw Call、资源引用稳定性。原文工作流主要验证了结构交付，未覆盖这些生产条件。

当前技术进展

以下是截至截止日的一手资料事实，不等同于作者原文中的实验结论。

设计工具开始提供可写的结构接口

Figma 官方 MCP 已支持代理读取设计上下文，并在远程服务中直接创建或修改原生 Figma 内容，包括 frame、component、variable 和 auto layout。官方仍将写入能力标为持续改进中的 beta，这说明“原生可编辑”方向已经成立，但权限、席位和功能变化仍需在项目开始前复核。Figma MCP 指南，访问于 2026-07-14

研究工作流转向神经符号组合

GameUIAgent 不直接把文本变成最终图，而是先生成 Design Spec JSON，再经过确定性后处理、Figma 渲染和视觉语言模型反思。论文在 110 个测试案例上报告结果，并总结稀有度层级退化、视觉空洞等游戏 UI 特有失败类型。它支持原文关于“结构化中间表示加视觉反馈”的判断，但论文评测范围不能直接代表任意项目的生产可用性。GameUIAgent 原始论文，访问于 2026-07-14

引擎内生成仍主要服务原型

Unity AI 已进入 Unity 6 公开测试，官方把 sprites、textures、scene layouts、animations 和 audio 描述为生成器输出，并明确以 placeholder asset 和 prototyping 为核心语境。生成资源带 AI 元数据，权利与平台申报仍由开发者负责。Unity AI Open Beta，访问于 2026-07-14

编辑判断： 2026 年的进展没有让“整图转正式 UI”成为默认答案。它让更可靠的链路变得可用：设计系统作为约束，原生节点作为交付，确定性渲染作为验证，模型作为结构规划和局部生成器。

阶段	输入	自动化输出	人工检查点
需求归一化	页面目标、玩家任务、设备、参考图	页面清单、状态图、内容优先级	产品与 UX 确认任务流
结构生成	组件库、token、相对布局约束	JSON 或原生设计树	设计师确认层级和信息密度
确定性预览	结构数据	HTML、Figma 或 Unity 预览	多分辨率、长文本、焦点顺序
资产补齐	资产契约、已审核风格参考	图标、底板、纹理候选	风格、透明边缘、权利和复用性
视觉复核	目标截图和当前截图	可量化差异、有限自动修正	审美与玩法可读性
引擎交付	已批准节点和资产	Prefab、UXML 或项目约定格式	引用、状态、性能、输入方式

适用边界

适合：小团队快速验证菜单和 HUD；策划需要可操作的高保真白模；把参考图迁移到已有组件库；为程序和美术提前建立并行接口；批量生成低风险的占位资产。

不适合直接自动化：依赖独特品牌语言的主界面；需要大量复杂动效和跨页面状态的正式 UI；金融、未成年人等高风险交互；没有设计系统却期待稳定批量产出；未解决训练数据和输出权利的商业资产生成。

当人工用已有组件拼一个页面只需几十分钟时，搭建通用 Agent 反而可能不划算。自动化的收益通常出现在多页面、多分辨率、频繁改版和多人协作，而不是一次性页面。

原始文章与延伸阅读

本专题收录 5 篇原文，完整元数据和版本关系见文章索引。作者观察只代表对应案例；外部事实均标注截止日。