真实视口截图与无上下文子 Agent 盲审：为什么只看代码做不好 UI
写代码的 Agent 只要看到 JSX 编译通过、Tailwind 类名写对，就会自信地告诉你“界面已经完美实现”。但真正打开浏览器一看，往往会出现长标题挤成三行、深色底上放着看不清的暗灰字、或者整页元素全挤在左半边。Oil UI 把“必须打开真实浏览器截图”和“交给不知道代码背景的独立子 Agent 盲审”定为硬性验收环节。
核心要点
- 源码不等于画面：只有在真实浏览器视口（如 1440×900、390×844、1920×720）下渲染出来的像素，才能作为评价设计的依据。
- 写代码的 Agent 对自己的产出有天然滤镜；启动一个没有任何上下文的子 Agent 只看截图挑刺，才能说出真话。
- 三维截图检验法：100% 全页看节奏、200% 局部裁切看对齐与字重、文字模糊色块图看版面重心是否跑偏。
- 截图只管静态长相，最后还必须在浏览器里真点、真输入走完一遍任务，确认状态反馈真的能用。
npx skills add oil-oil/oil-ui需要支持查看图片的模型与可运行本地浏览器的环境。
为什么模型只看代码永远发现不了版面硬伤
在代码里，flex justify-between items-center 看起来无懈可击；但当左侧放入一个 28 字的真实商品标题、右侧放三个操作按钮时，浏览器在 390px 宽度下就会把按钮挤变形。同样，代码里的 text-slate-400 on bg-slate-900 只是一串字符，渲染出来却是人眼很难看清的低对比灰字。
在画廊作品里，许多最出彩的细节都是靠真实视口走查逼出来的：例如车载中控《沿途》（1920×720）在即将转弯时自动放大导航引导并压暗音乐区；游泳手表《Splitwater》（198×242，DPR=4）在方寸屏幕里只保留一个超大趟数主数字；国际象棋课《Forkside》在走对骑士捉双时同时点亮两条攻击线。这些状态如果不逐一截图检验，单靠写代码很容易错位。
| 检查方式 | 具体做法 | 专门抓哪类问题 |
|---|---|---|
| 100% 原始视口全页图 | 在 1440×900（桌面）或 390×844（手机）下截取首屏与长滚全图 | 首屏找不到主操作、各区块高度雷同、底部留白断裂或滚屏节奏枯燥 |
| 200% 局部放大裁切图 | 对导航栏、表格行、表单输入区、定价卡片等高密度区域做 2 倍裁切 | 1px 边框重叠发粗、数字列未对齐、内边距忽大忽小、小字对比度不足 |
| 文字模糊色块结构图 | 将页面文字模糊化或缩至小图，只看色块分布与权重对比 | 版面头重脚轻、左右重心失衡、强调色到处乱跳、全是等大豆腐块 |
| 真实点击任务走查 | 在运行中的页面里亲自点击切换、填表、拖动滑块并触发异常状态 | 按钮点了没反应、弹窗遮挡底层关键信息、报错后无法恢复或状态未同步 |
无上下文子 Agent 盲审是怎么运作的
如果你让刚刚写完页面的同一个 Agent 看截图自评，它通常只会夸自己“层次清晰、配色现代”，因为它脑子里还记着刚才提示词里的美好意图。
Oil UI 的盲审机制专门切断了这层护短心理：主 Agent 只把截取好的 PNG 图片和一句极简背景（例如“这是一个面向平台团队的 1440×900 运维排障台”）发给新启动的子 Agent，不传任何源码，也不透露设计意图。子 Agent 必须像第一次打开产品的严苛用户一样，直接指出画面里哪里挤、哪里假、哪里看不清。
截取全部必选状态的真实图片
主 Agent 启动无头浏览器，按目标尺寸与 DPR 截取默认态、交互展开态和异常/完成态。
调起独立子 Agent 进行无上下文盲审
把截图传给子 Agent（如 Claude Code 的 Task subagent 或 Codex 的独立评审会话），对照反 AI 俗套表与可读性清单逐条打分挑刺。
按盲审缺陷清单回炉修改，再截新图复核
主 Agent 根据盲审指出的具体坐标与问题修改样式和布局，重新截图确认问题消失后才交付给用户。
让 Agent 执行截图与盲审的提示词
当你的页面已经写出初稿，觉得“好像能用但不够精致”时，可以直接发下面这段指令：
请按 Oil UI 流程对当前页面做真实浏览器走查与无上下文子 Agent 盲审：
1. 在本地浏览器中按 1440×900（桌面）和 390×844（手机）截取首屏、完整长页以及 [关键状态 1 / 状态 2] 的高清截图。
2. 启动一个不包含当前代码上下文的独立子 Agent，只把截图传给它，让它重点挑出：哪里还有 AI 模板痕迹、哪里字号对比度不够、哪里对齐或留白局促、首屏重心是否清楚。
3. 根据子 Agent 反馈逐项修改代码，并重新截图对比验证。在支持子 Agent 与图片读取的 Claude Code、Codex 等环境中可直接自动执行。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Nightwatch
运维监控与故障处理
一个给中等规模平台团队用的监控和值班工具（1440×900），界面用英文：服务拓扑，延迟、错误率、流量曲线，最近的发布，日志和调用链；出故障时有告警、当前值班人和事件时间线。 故障正在发生是这件作品的核心：拓扑上出问题的服务和受牵连的下游一眼能看到；拖动时间范围，曲线、发布标记和日志对齐，能看出是哪一次发布引起的。 设计三个状态：一切正常的总览、故障进行中（告警触发、拓扑标出受影响路径）、在错误峰值上展开日志和调用链并定位到那次发布。
查看作品与提示词 →
沿途
车机中控
一块汽车中控屏的主界面（1920×720，驾驶中一眼要读完），界面用中文：导航地图、正在播放的音乐、空调，以及常用的车辆控制。 同屏主次的切换是这件作品的核心：平时地图为主，音乐和空调各占一小块；快到路口时转向提示自动放大，音乐让位；调空调时温度滑条升起来，其余变暗。按钮够大，手指不看也按得准。地图自己画，不用真实地图服务。 配色：夜间的蓝黑底，导航路线用电光蓝，只有警示和转向提示用琥珀色；不用暖白、米色。 设计三个状态：巡航中、临近转弯、调节空调。截图按 1920×720、DPR=1。
查看作品与提示词 →
Splitwater
游泳训练手表 App
一个记录泳池训练的手表 App（屏幕按 198×242 设计，不画表壳和表带），界面用英文：训练中的趟数、配速、心率、休息倒计时，以及游完后的总结。 抬腕一眼就够是这件作品的核心：每一屏只有一个大数字是主角；每游完一趟，趟数跳一下；休息时一圈倒计时环走完就震动提示下水。屏幕会沾水，所以用转动表冠来解锁，界面上要有对应的状态。 配色：纯黑的表盘底，泳池的青色做主色，白色数字；不用暖色。 设计五屏：训练中、休息倒计时、屏幕锁定、暂停与结束、训练总结。交付 `index.html`（一块可操作的屏）和把五屏并排的 `screens.html`。截图按 198×242、DPR=4。
查看作品与提示词 →
Forkside
国际象棋战术课
一个国际象棋战术学习网站（1440×900 起，响应式到 390 宽），界面用英文，给等级分 800–1600 的业余棋手：一次学一种战术（双攻、牵制、串击、闪击），每课先在棋盘上一步步讲解，再做几道题。 讲解时，棋盘上的箭头和高亮跟着讲解一步步出现；做题时走出正确一步（比如马跳到双攻格），两条攻击线同时亮起；走错时给出对手具体怎么应对，而不是一句“错了”。这是这件作品的核心。棋子和棋盘要精致，用生图或三维渲染做出材质，不用默认棋子图标。 设计三个状态：一课的讲解、做题进行中、解出题目时战术揭晓。
查看作品与提示词 →Oil UI Pro：最多 3 轮冲 9 分严苛盲审与计步任务走查
开源版提供 1 轮基础子 Agent 盲审；Oil UI Pro 则升级为最多 3 轮、以 9/10 分为准线的深度盲审循环，并配套 100%/200% 缩放检查表、文字遮罩色块结构检查以及按点击次数计步的完整浏览器任务走查。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
如果我用的环境暂时没法跑本地浏览器截图，还能用 Oil UI 吗？
Oil UI 的方向构思、任务拆解与反 AI 俗套规则依然会在写代码阶段生效；但没有真实浏览器截图与看图能力，模型就无法看到渲染后的实际像素，也没法执行子 Agent 盲审，细节质量会打折扣。建议尽量配好本地 Playwright 或浏览器工具。
为什么除了 100% 截图，还要看 200% 局部放大图？
在缩略的大图上，1px 的错位、发虚的双重边框、没对齐的小图标或过浅的辅助文字很容易被忽略。切出核心控件的 200% 放大图，能让看图模型准确抓出这些影响精致度的细节。
把文字模糊成色块看结构有什么用？
不看具体文字内容时，人眼和视觉模型都不会被文案意思带跑，能够一眼看出整张页面的视觉重量是不是全压在左上角、主按钮是不是被周围杂乱的色块淹没了。
盲审一般跑几轮最合适？
日常功能页跑 1 到 2 轮就能修掉九成以上的明显硬伤；如果是对外发布的品牌官网、核心产品工作台或画廊级作品，使用 Oil UI Pro 跑满最多 3 轮冲 9 分的盲审加减法走查，细节会扎实很多。