摘要
前端开发最烦什么？不是写代码，而是改 AI 生成的 UI——它跟你赌咒发誓“代码没问题”，结果移动端按钮手指点不到、文字淡得看不见、图片缺描述。我用 TRAE SOLO 从零搭了一个 UI 审计工具：多设备真实截图 + 控制台错误捕获 + 触摸热区检测 + AI 视觉回归分析，还能把问题直接定位到源码的具体行。17 天，一个人，一套完整的 SaaS 产品。 这篇帖子记录整个踩坑过程，也分享我是怎么跟 SOLO 协作的。
实践过程：17 天从零到完整产品
整体任务拆解
| 阶段 | 周次 | 核心任务 | 关键交付物 |
|---|---|---|---|
| 技术验证 | 第 1 周 | Playwright 截图引擎 + 热区检测 + 评分系统 | 能跑通“输入 URL → 返回审计报告”的闭环 |
| 专业能力 | 第 2 周 | 基线管理 + 像素级 diff + 忽略区域 + 截图稳定性 | 具备竞品核心能力的视觉回归引擎 |
| AI 差异化 | 第 3 周 | 千问视觉模型接入 + 设计稿对比 + 修复代码生成 | AI 护城河：从“发现问题”到“给出方案” |
| 工程化 | 第 4 周 | CI/CD 集成 + 公开分享 + 错误处理 + 设备模拟 | 可交付的完整 SaaS 产品 |
踩坑实录：那些让我和 SOLO 来回掰扯的时刻
1. Playwright 截图白屏
在 Windows 无头模式下截图全白。SOLO 建议逐层排查：先检查 waitUntil 策略（networkidle 改为 domcontentloaded ），再加字体加载等待和动画结束等待，最后增加 500ms 缓冲。问题解决后，我把这套“截图稳定机制”做成了可配置规则。
2. Canvas 标注坐标与截图坐标偏移
热区检测拿到的坐标是逻辑像素，截图是物理像素，在 Retina 屏幕上标注框会漂移。SOLO 建议在 page.evaluate 中使用 window.devicePixelRatio 实时获取 DPR，前端再根据实际 <img> 显示尺寸反推标注位置。来回调了 4 版才对齐。
3. UUID 路由在 Next.js App Router 中的动态配置
分享功能需要为每个报告生成唯一链接（如 /share/uuid ）。SOLO 建议用 generateStaticParams 预生成路径，但分享 ID 是动态的，最后改用 params.id 直接读取并在服务端渲染时从本地文件系统捞数据。
4. 千问 API 400 错误 —— 本地图片 URL 无法访问
传给千问的截图路径是本地 /screenshots/xxx.png ，API 无法从公网访问。SOLO 建议在请求前将本地图片转为 base64，以 data:image/png;base64,... 格式传入。改完后 API 调用成功。
5. 移动端截图不是真移动端
最初只改了窗口大小（setViewportSize ），UA 还是桌面端 Chrome，截出的图只是“窄化的桌面端”。SOLO 指出 Playwright 有内置 devices 模块，改用 devices['iPhone 13'] 和 devices['iPad (gen 7)'] 创建真实浏览器上下文后，截图才真的是 iPhone/iPad 上的渲染效果。
SOLO 协作体会
- 代码生成效率高 ：路由、状态管理、组件模板几乎不用手敲
- Bug 排查快 ：贴报错截图或终端日志，它能精准指向问题行
- 逆向评审是惊喜 ：我让 SOLO 扮演“安全策略组”来审查我写的共享组件，它自检了 4 条规则（无 fetch / 无存储写入 / 无 CDN 依赖 / 无 Cookie），每条附了定位代码和验证方法
- UI 细节需要手动微调 ：CSS 过渡、阴影、响应式断点仍需自己调整
成果展示
基础审计能力
- 多设备截图捕获（Mobile/Tablet/Desktop，真实设备模拟：iPhone 13 + iPad gen 7）
- 控制台错误检测、触摸热区检测（≤44×44px 自动标记）
- 评分系统（0-100 分 + PASSED/WARNING/FAILED 等级）+ 彩色圆环动画
- 错误处理优化（无效 URL 前端拦截、网站无法访问/超时友好提示）
- 审计进度实时反馈 + 预估耗时提示
专业视觉回归能力
- 基线管理：设置“正确版本”截图，后续审计自动像素级对比
- 差异热力图：使用 pixelmatch 生成红色高亮差异图，并排展示
- 忽略区域：支持拖拽绘制，标记后不再参与后续对比计算
AI 差异化能力
- AI 视觉回归分析：上传设计稿截图，自动对比实机渲染结果，精准到 CSS 属性
- 自然语言审计指令：支持输入“重点检查按钮颜色和间距”等定向分析
- AI 生成修复代码：每条差异附带可直接使用的 CSS/Tailwind 修复建议
- 问题分级（致命/高/中/低）+ 严重等级标签
- AI 代码理解：上传源文件后，AI 深度分析问题原因并给出修改后的完整代码
工程化与体验
- 登录态注入（智能识别 Cookie + localStorage 双格式）
- 问题状态管理（待修复/已忽略/已修复）+ 一键复制所有修复建议
- Facebook 分享功能：生成公开只读报告链接
- 截图模式选择（视口/全页/元素截图）+ 自定义裁剪
- CI/CD 集成：GitHub Actions 模板，PR 自动审计并评论
- 转场动画 + 审计进度可视化
技术栈
| 层次 | 技术选型 | 用途 |
|---|---|---|
| 前端框架 | Next.js 14 (App Router) | 页面路由、SSR、API 路由 |
| 类型与样式 | TypeScript + Tailwind CSS + shadcn/ui | 类型安全 + 科技感 UI 组件 |
| 自动化引擎 | Playwright + pixelmatch | 浏览器截图 + 像素级视觉 diff |
| AI 视觉分析 | 千问视觉模型（qwen-vl-plus） | 设计稿对比 + 语义差异发现 |
| 数据存储 | 本地 JSON 文件 + Map 内存队列 | 零成本 MVP 存储方案 |
| 设备模拟 | Playwright devices (iPhone 13 / iPad gen 7) | 真实移动端 UA 和触摸环境 |
| CI/CD | GitHub Actions | PR 自动触发审计 + 状态同步 |
| 评分与可视化 | 自研评分引擎 + SVG 环形图 | 100 分制量化审计 |
效果与总结
提效对比
| 任务 | 手动操作耗时 | UI Verity 用时 | 提效 |
|---|---|---|---|
| 检查 3 个视口的响应式布局 | ~10 分钟 | 30 秒 | 20x |
| 排查控制台错误 + 触摸热区 | ~15 分钟 | 30 秒 | 30x |
| 对比设计稿与实机渲染差异 | ~20 分钟（肉眼比对） | 45 秒（AI 自动报告） | 27x |
| 生成带截图的日报/周报 | ~20 分钟 | 10 秒（一键复制） | 120x |
核心收获
- 从做界面到做标准 ：以前追求把界面还原到像素级。现在思考的是——谁来定义页面的质量标准？ 给 AI 写代码的人降本提效，给审代码的人提供客观标尺。
- 探索了人机协作的新范式 ：不只是生成代码，它还能扮演逆向评审、安全策略、用户体验顾问等角色——只要你敢提要求。
- 一套可复用的方法论 ：明确的规则（Playwright 自动化）+ 模糊的判断（AI 视觉分析）+ 工程化的模块（评分/路由/分享）。