作者｜黄兆嵩
编辑｜Kitty
策划｜QCon 全球软件开发大会
本文来自 QCon 全球软件开发大会·2026（北京站）明星讲师、蚂蚁集团支付宝体验技术部前端工程师黄兆嵩带来的演讲分享《把 UI 生成接进流水线：基于半监督评测体系的 UI 自动化生产实践》。
引 子
当界面迭代速度超过 UI 产能，当需求变化快于设计节奏，当用户体验需要千人千面。
传统的“预先设计→开发→上线”的生产流程已难以为继，基于 AI 的生成式 UI 技术正在重塑生产方式。
我们提出了一系列基于 AI 的生成式 UI 工程实践——从生成工具、自动化调试到生产投放，配合可量化的质量监控，让整条链路可观测、可迭代。
最终达成："让前端生产自动运转，让用户体验随需而变"。
序 章
2025 年 11 月，Google 发布 Generative UI——根据用户需求，动态生成完整交互界面。
生成式 UI 这个方向，被推倒聚光灯下。
行业已经跑了几年的 UI 生成，模型能力一路飙升。但问题来了：你敢让模型直接改你们的生产界面吗？
"能生成"到"敢上线"，中间还差什么？
今天分三部分来谈谈一些我们的思考和实践：
高质量 UI 生成——品牌约束复杂、业务逻辑深，怎么让生成结果真正可用，而不是"看起来像那么回事"
LUI 场景下的应用——用户等待耐心以秒计，UI 生成这个重任务怎么接进去
质量可观测与可迭代——生成结果怎么评价？怎么提升？
我希望通过这些工作，让 UI 生成从技术能力，变成能接进生产流水线的工程能力。部分效果：
AI 从代码生成领域崛起的同时，我们观察到两件事。
需求变了。从"一套界面服务所有人"，到越来越多产品追求千人千面——给每个用户生成专属 UI。
体验还没跟上。大多数 AI 产品还停留在纯文本甚至 CLI 的初级交互阶段。程序员能适应，但普通非技术用户面对命令行，那是门槛，不是工具。AI 带来的效率提升，他们根本还没享受到。
与此同时，先进模型的 UI 生成质量，已经能超越人类前端程序员。
需求有了，生产力也到位了。
趋势正在成形：未来的应用形态，从"先设计，再开发"，转向“按需生成”。
当前主要有三个方向（需求转 UI、设计稿转 UI、数据转 UI）在推进：
但不管哪个方向，卡住大家的往往是同样的问题：
生产侧——不会用、完不成、过不了审。生成出来要么不符合业务规范，要么审核打回，最后还是人工填坑。
迭代侧——模型或链路升级后，效果有没有提升？提升了多少？完全说不清。导致业务的信任度大打折扣。
想要落地，必须要解决这些问题。
第一章：如何生成高质量 UI
能生成，不等于能用。
给张设计稿、写段需求，现在的模型基本都能产出 UI。但真实业务的复杂度，远不是 demo 能比的。
怎么一步步把生成质量，拉到真正可用的标准？
困境一：prompt 成了无人维护的代码仓库
我们给业务提供了通用的 UI 生成 prompt。几周后，反馈来了——
"我服了，每次改 prompt 像在写短篇小说。"
去看了一眼他们魔改后的提示词：洋洋洒洒几百上千行，品牌规范、组件约束、交互逻辑全塞一起。有的团队甚至搞了一份十几页的文档来管 prompt，每次改动要在群里 @ 一圈人确认。
问题还不止于此：多人协作怎么分工？版本怎么管？改了一处，别的地方崩没崩？上周好好的，这周生成结果全变了，不知道谁动了哪一行。
prompt 变成了一个没有 IDE、没有版本控制的代码仓库。
解法：给 prompt 一个 IDE
我们搭了一个prompt 工作台。核心做了两件事：
把整块 prompt 拆成独立模块，产品、设计、研发各自维护各自的部分，互不污染。谁改了什么、什么时候改的，一目了然。
此外，我们将生产环境所用的数据、模型和上下文都接到平台上——不管是谁，改完直接试运行，看真实生成结果。不用再跑复杂的代码上线部署测试流程，大大缩短试错成本。
调试跑通后，进入生产，我们还提供：
批量生产——同一套配置，一次跑出多个页面
单个精修——局部有问题，对话修改，不用整个界面重来
从调试到上线，给用户提供一个平台走完。
困境二：大多数需求只有一句话
工作台解决了提示词"写好了怎么管"，但"写不好"这个问题还没解决。
现实是：大部分需求都是一句话，没有产品文档，没有交互说明。
拿这样的输入去生成，模型能出东西，但布局凌乱、功能不全——也就是及格分，远达不到上线水平。
解法：生成前加一层需求改写
在生成之前，系统自动判断需求是否完备，把一句话扩写成完整的业务描述：
主要是补充：页面结构、补交互流程、补功能边界。
改写前后的效果对比——布局从凌乱到清晰，功能覆盖也更完整。
困境三：设计稿还原"差一口气"
把设计稿扔给模型，模型还原出的 UI 经常——布局偏了、元素位置不准、视觉细节漏了....
这种样式问题, 设计师一眼就能看出来。
"你这个智能，还不够智能。"
根源在于：模型对图片中 UI 元素的位置、大小等视觉信息感知不够精准。
它能大致知道"这是个列表、那是个按钮"，但按钮在和旁边文字间距多少、圆角多少像素、颜色什么色值？这些靠视觉模型去推理，精度不够。
解法：给模型配一副"尺子"
我们用两万多条人工精确标注 UI 标注数据，训练了一个专门的组件检测模块。
秒级识别图片中每个元素的大小、位置、层级关系，输出结构化 (JSON 格式) 的布局描述，然后作为生成模型的输入，让还原的布局精度，大幅提升。
这个能力不只用在生成环节——还能做设计稿与还原稿的自动比对：哪里偏了、哪里漏了，一目了然。此外质量走查、异常检测也能用上。
困境四：生成结果"不像自己的产品"
功能对了，布局对了，但一眼看上去就不像你们的产品——老模型经常出 AI 味（Mac 表情包、莫名的蓝紫渐变），新模型产出不符合品牌设计语言。
根本原因是：模型不认识你的设计规范。
解法：风格管理仓库 + RAG 召回
我们建了一套风格管理仓库。用户可以把产品的设计规范录进去——色彩体系、字体、圆角、间距、图标风格，越详细越好。
每次生成时，用户可以自己选择想要应用的设计规范，也可以由系统根据需求自动召回对应规范，注入生成上下文。
这是风格化生成的效果。
没有专业设计师，没有设计规范怎么办？两条路：
自动提取——上传一张产品截图，系统自动提取设计风格文档
模板库——我们提供了内置上千张优质 UI 的风格模版库和风格狂暴能力。用户可以直接使用。
第二章：如何在 LUI 中应用 AI 生成
有了高质量 UI 生成，可以直接用在 LUI 界面里吗？
落地的时候，我们几乎同时收到了两个声音：
用户："点了半天，界面还没出来。"内部："老板，显卡快撑不住了。"
一个是体验问题，一个是成本问题。根源是同一件事——UI 生成太重。用户每轮对话都可能触发一次时间很长的完整 UI 生成。
问题出在哪：四步串行
传统链路：用户发请求 → 业务智能体取数据 → 生成模型产出 UI 代码 → 渲染到屏幕。
四步全串行，每步等上一步。哪怕每步只需几秒，加在一起就是十几秒甚至更长。在对话场景，十几秒的等待是致命的。
一、流式渲染，砍掉独立生成环节
传统链路里，业务智能体取完数据，还要再调一次生成模型来产出 UI 代码。我们的思路：砍掉这一步。
直接让智能体输出 UI 渲染所需的全部信息。
我们首先在端环境对 Markdown 协议进行了拓展，设计了 markdown-XML 的渲染协议。让模型在 Markdown 里直接嵌入组件描述——需要什么组件、属性是什么、渲染哪些数据。渲染引擎拿到即自动补全 Dom 结构，解析渲染，不再需要额外的模型调用。
可以让 UI 元素 (Tab 页、按钮、列表), 边输出边出现在屏幕上。用户的感知从"等完再看"变成"边聊边看"。
这套 markdown 拓展方案同样适用于 HTML、React、小程序等技术栈——把 JS 资源、DOM 树、script 按顺序输出，渲染引擎同样可以达到流式渲染的效果：
二、生成式 UI 召回方案，让显卡不用硬扛
再看成本，千人千面，相似的数据，生成出来的界面高度雷同。每次重新生成，是在浪费资源。
我们的思路很直接：数据相似的用户，看到相同的一组界面。
具体实现：
用存量用户数据做冷启动，提前生成一批 UI 存入仓库
线上请求进来，走三级缓存匹配：
数据结构和特征完全一致 → 直接返回
数据特征相似 → 稍微修改或绑定数据后返回
都匹配不上 → 返回兜底界面
返回兜底界面的数据，触发离线生成入库
从而实现：生产侧和消费侧完全解耦。线上请求永远从仓库取，延迟稳定、体验可控。仓库随调用量自动丰富，越用越好。
第三章：如何实现有效的监督 & 迭代优化
能生成了，能上线了。但怎么知道生成得好不好？
困境：人工质检成了瓶颈
"生成完了，让产品经理把把关吧。"
一开始我们也这么做。但生成速度上去之后，一天几百个页面，审核还是那几个人——积压越来越大。人工质检，反而成了流水线上最慢的环节。
更麻烦的是：人审标准不一致。同一个界面，A 觉得可以，B 觉得不行。标准在每个人脑子里，没法沉淀、没法复用。
要让 UI 生成真正上流水线，质量监督必须自动化。
解法：自动机审 & 人机协同审核
UI 生成后，系统自动打分、输出评审意见——哪里有问题、严重程度如何。
背后是一套规则驱动的 Agent 评审流程：
通用规则（内置）——文字是否溢出、图片是否变形、交互元素是否可点击、布局是否合理
业务规则（用户录入）——品牌色是否合规、字号是否达标、特定场景必须包含哪些元素
评审结果分三档：
每条问题附带具体说明和定位，帮助 AI 进一步给各个维度打分和撰写详情。
同时，机审之外，我们提供了包含机审结果的标注界面，协助人工审核。
设计师和产品经理可以直接在 UI 截图上圈选区域、标注问题。审核通过的才进上线流程。
我们用人工精标数据验证了机审的准确性。两个关键发现：
人审与机审通过率吻合度约七成
人拒绝的，机器全部拒绝了。没有一例漏网。
这意味着：机审比人审更严，不会放水。可以做一道真实有效的质量门禁——先过机审，再给人看。人只需处理机审通过但有争议的部分，审核量大幅下降。
自动迭代 prompt
有了人审和机审的标注数据，我们又往前走了一步。
每次审核后，系统自动汇总标注信息，分析这一批 UI 的共性问题根因——色彩不合规？布局规则没覆盖？某类组件描述不够清晰？分析完成后，生成针对性的 prompt 优化建议，直接更新到生成链路。
产品和设计只需指出"这里不好"，不用自己想怎么改 prompt。链路自己会学。
审核做得越多，生成质量越高。正向循环。
总结与展望
最后聊几个思考
一、动机的演变 -- 从辅助工具，到个性化引擎，再到前端生产范式的革命
最早 21 年做生成式 UI，看中的是 AI 的自然语言理解能力——用自然语言完成低代码操作，改个颜色、调个属性、换个布局。
后来 AI 能力增强，目标变了——不同的用户数据，驱动出不同的 UI，实现千人千面。
再到现在，超低的生产成本 + 超高的生产质量，正在推动前端生产方式的整体升级。
二、生成的边界在扩展
去年聊这个话题时，AI 还很难生成复杂业务逻辑，只能做展示和拼接层，运用写好的业务组件。
现在，预言"未来大部分 UI 组件可能都是生成的"——已经成真了，几乎所有界面内容都可以通过 AI 直接生成。接口调用、服务对接，也能通过 MCP、Skill 等协议实现。
生成式 UI 的能力边界，从"画个界面"扩展到了"跑通业务"。
与此同时，产品、前端、后端的界线越来越模糊。未来可能不再区分前端后端，大家都是懂产品的全栈。
三、交互形态的终局
Claude Code 这类工具让 AI 能力进一步释放，很多产品开始沿着"让 AI 权限无限扩大"的逻辑做重构。
CLI 现在很火。但大部分普通用户最终期待的，不是一个命令行，而是更直观、更优雅的界面。
CLI 不是终局形态，而是技术快速革命下，体验技术还没来得及适应的中间态产物。
LUI 与 GUI 的融合，会把越来越强的 AI，在各行各业真正让不同用户用起来。
当 AI 越来越强、能做的事越来越多，用户需要的不只是能力，还有体验。
我们接下来的方向，正是面向 LUI 与 GUI 的融合，让强大的 AI，有信、雅、达的表达。
作者介绍
黄兆嵩博士，蚂蚁集团前端工程师，2021 年开始深耕基于大语言模型的前端应用生成与研发领域多年。先后就职于华为、蚂蚁集团，负责 “基于 AI 生成的低代码 / 无代码前端应用研发平台”、“生成式 UI & UI 生成中心”、“生成式黑科技 Tools ”等项目。主要研究方向为 AI to UI、UI 评测。博士研究方向为多源异构数据的可视分析与检索等。
会议推荐
Agent 从 Demo 到工程化还差什么？安全与可信这道坎怎么过？研发体系不重构，还能撑多久？
AICon 上海站 2026，13 大重磅专题已上线，诚挚邀请你登台分享实战经验。AICon 2026，期待与你同行。快来扫码锁定 8 折专属席位或提交演讲议题
热门跟贴