ARTICLE · 软件编程
让 AI 看得见、判得准、改得对—— D2C 从设计稿到三端真机达标的自动化实践
一语总结本文介绍了 D2C（设计稿到代码）在移动端的自动化实践，构建端上 UI Harness 体系，实现 AI 从设计稿到三端真机达标的全流程闭环，解决了 AI 生码后验收难、三端差异大的问题。
本文聚焦 D2C（Design to Code）在移动端的自动化挑战，指出 AI 生码后缺乏真机验证闭环的核心问题。作者团队构建端上 UI Harness 体系，通过 Loop Engineering 实现'生码-编译-三端真机验证-自动修复'的全流程闭环。核心创新在于重新划分 AI 与程序边界：将确定性流程下沉至 CLI 骨架执行，AI 仅保留少量推理决策点；同时融合像素 diff、DOM 树对比等多层信号为 AI 装上'眼睛'。该方案已成功覆盖 DX、Weex、Muise 三条技术链路，用户仅需提交设计稿链接，即可实现全自动达标交付。文章还提炼出五条可迁移的 AI Agent 工程化方法论。
- 移动端 D2C 验证闭环缺失
AI 能生成代码，但无法在真机上验证视觉效果，导致布局错位、样式错误等问题。Web 端有 Playwright 等工具闭环，移动端却缺乏类似方案，导致交付质量不可靠。
- 构建端上 UI Harness 体系
通过 CLI 化改造，将 66 个确定性步骤下沉到程序化流程，AI 仅负责少数需要推理的决策。实现'生码-编译-三端真机验证-自动修复'的全闭环，让 AI 自己看到真机、判断对错、修复代码。
- 多层信号融合提升视觉准确度
构建四层信号系统：L1 像素 diff 定位差异、L2 结构对比期望值 vs 实际值、L3 像素采样验证、L4Vision LLM 语义复核。将设计稿 AST 与真机 DOM 树双向对比，显著提升视觉检测准确度从 60-70%提升至 91%+。
- CLI 前置校验+Stop Hook 双重拦截
防止 AI 漏步骤或假交付：每步执行前 CLI 校验状态，AI 若跳过 verify 直接跑 done 则立即退出；AI 声称完成时 Stop Hook 最终校验交付契约，不满足则注入继续指令。将可靠性从 AI 可靠性转化为 CLI 可靠性。
- 五条可迁移的 AI Agent 方法论
提炼出通用原则：1）分清 AI 与程序边界；2）CLI 化改造降低 AI 认知负担；3）多层信号融合提升判断准确度；4）结构化输入输出提升协作效率；5）闭环设计确保可靠交付。这些方法论不仅适用于 D2C 场景，也可迁移到其他 AI Agent 工作流。
让 AI 看得见、判得准、改得对—— D2C 从设计稿到三端真机达标的自动化实践
本文聚焦 D2C（Design to Code）在移动端的自动化挑战，指出 AI 生码后缺乏真机验证闭环的核心问题。作者团队构建端上 UI Harness 体系，通过 Loop Engineering 实现'生码-编译-三端真机验证-自动修复'的全流程闭环。核心创新在于重新划分 AI 与程序边界：将确定性流程下沉至 CLI 骨架执行，AI 仅保留少量推理决策点；同时融合像素 diff、DOM 树对比等多层信号为 AI 装上'眼睛'。该方案已成功覆盖 DX、Weex、Muise 三条技术链路，用户仅需提交设计稿链接，即可实现全自动达标交付。文章还提炼出五条可迁移的 AI Agent 工程化方法论。
淘宝用户&内容技术团队一线工程复盘：以端上 UI Harness 和 Loop Engineering 打通生码—编译—三端真机验证—自动修复闭环；确定性流程下沉到 CLI，AI 只留推理决策点，靠像素 diff 与 DOM 树对比「看见」真机，再用前置校验与 Stop Hook 契约拦截漏步与假交付。已落地三条技术链路，方法论可迁移，适合搭建 AI 生码验收闭环的团队。
文章金句
"AI 已经能一句话生一张 UI 卡片代码，但你敢直接把 AI 生出来的代码提测上线吗？
"AI 生码不难，难的是让 AI 自己知道自己写对了
"我们决定重构的不是代码，而是生产方式
"AI Friendly 不是指 AI 能快速写代码，而是指架构设计是否支持 AI 参与
"把确定性流程下沉至 CLI 骨架执行，AI 仅保留少量推理决策点