把视觉参考变成可验收的需求
三张卡片在桌面截图中看着正常，到了手机上却可能把整个页面撑宽。只让 Agent“做好响应式”，仍没有回答关键问题：检查哪些宽度，长标题能否换行，每个操作应该跳到哪里。先约定这些结果，再改代码，最后到浏览器中逐项核对。
下面以一个虚构的项目概览页为例。提示词、CSS 和对照表都是教学示例，不是 Onevium 的真实运行记录，也不是客户效果数据。你可以在自己的项目中复现这些输入与预期结果；只有实际执行过的检查，才能写进测试报告。
准备一个依赖已安装、能正常启动本地预览的前端项目。在 Onevium 中打开该项目的会话，确认工作目录。如果有截图或设计导出图，附上它并说明需要保留的细节。桌面图本身不会规定手机布局、键盘行为或链接目标；即使没有图片，下面的文字需求也足以明确这些决定。
给第一轮实现完整的输入
用一个本地演示路由检查设计，避免影响现有业务流程。保留项目已有字体、颜色和焦点样式；这里的尺寸是练习所采用的布局约定，并非通用设计标准。在项目会话中发送以下需求：
在当前项目中实现本地 /design-review 页面。
先读 README、package scripts、路由结构、已有组件和当前 diff。
保留无关改动，沿用现有框架和样式体系，不新增依赖。
标题：团队项目
介绍：检查每个项目的下一次交接。
按以下顺序展示三张卡片：
1. 官网改版 — 设计评审
开始实现前，检查首页的信息层级。
2. 客户支持门户 — 进行中
确认空状态和键盘导航。
3. 协调国际发布评审与跨地区团队的交接工作 — 待评审
检查较长标题，不隐藏任何文字。
每张卡片包含标题、状态、说明和一个真实链接“查看评审备注”。
三个链接均指向 #review-notes。
在卡片下方添加对应区块，内容为：
演示评审备注。交接前请确认布局和导航。
明确标注页面使用虚构示例内容；不接后端，不做登录。
复用项目字体、颜色、边框和可见的焦点样式。
页面缩放为 100% 时，1440px 视口显示三列，768px 两列，390px 一列。
卡片网格最大宽度 1120px，左右各留 24px，卡片间距 24px。
标题和状态完整显示，不通过截断文字让卡片勉强放下。
390px 时页面不能横向滚动。
运行项目已有检查，报告实际结果。
启动或复用本地预览，返回真实地址。
列出修改文件和未能执行的检查。
不要提交、部署或修改无关路由。先看到真实页面，再提出反馈
核对预览的实际端口和 /design-review 路由。进程在运行不代表新页面已经打开：确认页标题、三张卡片的名称以及评审备注区块。如果启动失败，先解决它，不要把旧标签页或空白页面当成新实现。
需要 Agent 检查页面时，在“设置 → 浏览器”开启 AI 浏览器控制，并明确要求使用 Onevium 内置浏览器，随后核对实际控制的目标。已有标签页可以通过工具栏菜单调整视口；比较不同宽度时保持页面缩放为 100%。后端选择和操作审批按浏览器教程配置。
分别以 1440、768、390 CSS 像素宽度查看并截取同一页面，包括首屏下方的内容。把层级、间距、文字换行和操作位置与需求对照。再次要求修改前，先记下视口、看到的差异和预期行为；“再精致一点”无法给下一轮提供明确的结束条件。
针对一个已观察到的差异修改，再次对照
假设第一轮使用不换行的 Flex 布局，并把每张卡片的最小宽度设成 320px。三张卡片加两处 24px 间距，至少需要 1008px；390px 视口扣除左右留白后只有 342px。这解释了溢出的原因，缩小字号并不能解除布局限制。
针对这个问题，可以继续说：“390px 下卡片横向溢出。把固定单行改为适应容器宽度的网格，保留全部文字、卡片顺序、链接和视觉变量。重新检查 390、768、1440px，给出修改的规则和各宽度下实际看到的结果。”只有自己的预览出现了相同问题，才使用这条反馈。
下面的 CSS 示意替换了有冲突的单行布局和卡片宽度规则。把它限制在演示组件内，并删除或覆盖原来的最小宽度。网格可以缩到容器宽度，卡片规则则允许内容盒随之收缩。遇到没有分隔符的长标识符，可能还要单独处理换行。最终仍要检查页面，不能假定这段代码适合任意外围样式。
| 检查项 | 示例中的问题 | 修改后的目标 |
|---|---|---|
| 390px 布局 | 固定单行把后面的卡片挤出屏幕 | 单列，三张卡片均可见，页面无横向溢出 |
| 较长标题 | 为了塞进卡片而裁掉文字 | 文字完整可读，在卡片内换行 |
| 768px / 1440px | 修复手机布局时，把所有尺寸都改成一列 | 分别为两列 / 三列，卡片顺序保持不变 |
| 查看评审备注链接 | 外观正确，但没有实际目标 | 每个链接都到达可见的评审备注区块 |
/* 修改前：单行不换行，卡片不能缩到 320px 以下。 */
.project-grid { display: flex; gap: 24px; }
.project-card { min-width: 320px; }
/* 修改后：替换以上规则，仅作用于演示组件。 */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
gap: 24px;
width: calc(100% - 48px);
max-width: 1120px;
margin-inline: auto;
}
.project-card { min-width: 0; }记录通过项，也记录尚未执行的检查
每次修改布局后，重新执行受影响的检查。截图能支持某个尺寸下的视觉判断，却不能证明链接有效、键盘焦点可用，或其他浏览器行为一致。构建成功与浏览器验收应分别记录。
- 布局：在 390、768、1440px 下查看页面顶部和底部、卡片全文、列数及横向溢出；在这些宽度之间连续调整，发现三张定点截图可能漏掉的问题。
- 交互：逐个点击“查看评审备注”，再用 Tab 和 Enter 检查键盘操作，确认焦点可见、顺序合理，目标区块没有被固定页头遮住。
- 可读性：单独尝试 200% 页面缩放，检查正文和状态文字的对比度，以及是否裁切内容。回到原来的宽度对照前，恢复 100% 缩放。
- 项目检查：按项目配置运行已有 lint、类型检查、测试和构建命令。失败项如实标记；没有对应脚本或无法使用目标浏览器的项目，记为未测试。
页面 URL 与代码版本 / diff：
浏览器、视口和缩放：
场景与实际操作：
预期结果：
实际结果：
证据（截图、命令输出或复现步骤）：
状态：通过 / 失败 / 未测试
剩余问题与下一项检查：交接仍然需要人工验收
接受改动前，亲自看一次 diff 和实际页面，判断信息层级、文案、间距与交互是否适合产品。Agent 辅助截图和检查能够发现缺陷，但不能替代设计判断或完整的无障碍审查。
这个练习没有真实表单提交、认证或 API 状态。后续接入这些功能时，需要增加加载、空数据、错误和权限场景。窄视口也不能复现真机触摸输入或所有目标浏览器；没有做过的设备和辅助技术检查，应保留在交接记录中，不能直接宣称界面已达到生产交付标准。
最终交付应包含范围清楚的 diff 和可复核的检查记录。需要配置页面检查时，继续阅读浏览器教程；预览尚未就绪时，先看开发服务教程。完成约定的验收之后，再决定提交和发布。