问题
用 Claude Code 等 AI agent 写移动应用的独立开发者遇到一类新问题:单元测试全绿,但界面实际坏了——信号原文的例子是“单元测试一个没挂,结果在 390pt 宽的 iPhone 上,Save 按钮被挤出屏幕 21pt”;新加的菜单也可能与整体界面风格不一致。现有补救是靠 UI 测试读控件坐标加开发者肉眼看屏幕,既慢又容易漏。这类“测试发现不了”的视觉级缺陷,正是 AI 大量生成 UI 代码后留下的质量缺口。
目标用户
用 AI agent(如 Claude Code)编写移动应用界面的独立开发者和 vibecoder。规模参考:a16z 观察到 iOS/Android/Chrome 每月新应用供给已翻倍到四倍,AI 写 App 的开发者群体在快速扩大,但其中愿意为质量工具付费的比例未知。
解决方案
- 多宽度自动渲染:在常见 iPhone 宽度(如 390pt)等配置下渲染关键页面
- 视觉回归 diff:与基线截图比对,自动检测控件被挤出屏幕、遮挡、错位
- 风格一致性检查:用视觉模型比对新增 UI 元素与既有界面的风格差异(配色、间距、组件样式)
- CI 集成与报告:agent 提交后自动运行,输出带坐标偏移量的具体问题清单,可直接喂回给 agent 修复
AI 的角色:视觉模型判断“是否与整体风格一致”这类难以规则化的差异;纯几何/像素问题用确定性算法即可,不必全靠大模型。
为什么是现在
AI 代码生成让新应用供给成倍增长,大量 UI 由 agent 生成而单元测试覆盖不到视觉层;信号中开发者已在用 Claude Code 写界面并实际踩到这类 bug,说明问题随 agent 编程普及而刚刚显性化。
MVP 范围
做:
- 在 iOS 模拟器上以 390pt 等多个宽度渲染页面,自动截图
- 与基线图做像素级/布局级 diff,标出被挤出屏幕、错位、遮挡的控件
- 接入常见 CI,AI agent 提交代码后自动跑一轮
- 输出问题清单(哪个控件、偏移多少 pt)供开发者或 agent 修复
不做:
- 不做单元测试或功能测试
- 不做自动修复(先只报问题)
- 不做 Android/Web 端(先聚焦 iPhone 常见宽度)
风险
- 需求强度未验证:核心痛点信号只有一条帖子且 0 评论,付费意愿未知,需先找到更多受影响的开发者。
- 平台依赖:依赖 iOS 模拟器和截图管线,Apple 工具链变动会影响产品。
- 误报问题:像素 diff 容易因字体渲染、动画帧产生噪音,误报多会很快失去用户信任。
- 现有替代:开发者可能继续用肉眼检查,或把检查任务直接丢给 agent 自己写脚本,付费买独立工具的动力存疑。
信号证据
这张卡片依据的原始讨论。摘录保持原文,点“原文”查看上下文。
V2EX · 分享创造10月2日痛点0 条评论
“比如给顶栏加了一个"更多"按钮,单元测试一个没挂,结果在 390pt 宽的 iPhone 上,Save 按钮被挤出屏幕 21pt。”
AI 写的代码单元测试全绿但仍会出问题:控件在 390pt 宽 iPhone 上被挤出屏幕、新菜单与整体界面风格不一致,这些问题测试发现不了。原文
a16z9月18日增长数据
“Across iOS, Android and Chrome, total new apps per month have variously doubled or quadrupled.”
AI code gen has doubled or quadrupled the monthly supply of new apps across iOS, Android and Chrome, but downloads and ratings have stayed flat and the share of apps reaching escape velocity has plummeted.原文