|
# 智能体网页多视口验收工作流
## 套餐描述
整理智能体网页的多视口覆盖、响应式契约与视觉基线差异，生成不自动发布的人工验收门禁。
## 详细介绍
# 智能体网页多视口验收工作流
**4个实用技能 · 4步完成 · 每一步都能单独使用**
把智能体生成或频繁迭代的网页从单一分辨率看起来能用变成可复核的多视口验收材料：先整理页面、断点和设备矩阵，再核对响应式结构、触控目标与横向溢出，然后比较稳定截图基线和动态遮罩，最后汇总阻断项、人工复核和发布边界。套餐只处理买家提供的脱敏页面检查记录、DOM摘要和截图元数据，不抓取网站、不启动浏览器、不上传图片，也不自动发布。
4个可下载技能 · 每个技能可单独运行
## 4步自动化工作流
### 🔵 1 多视口矩阵整理
技能文件：web-viewport-matrix-normalizer
**解决什么：** 页面常只记录一个桌面宽度，移动端、平板、触控和横竖屏边界没有稳定的验收输入，导致回归无法比较。
**你会得到：** 规范化页面/视口/设备矩阵、关键路径数量、断点覆盖、重复项提示和 viewport_matrix_hash。
**↓ 本步结果自动进入下一步**
### 🟢 2 响应式契约审计
技能文件：web-responsive-contract-auditor
**解决什么：** DOM摘要或人工检查中可能遗漏横向滚动、关键区域隐藏、字体过小、触控目标不足、断点空档和固定宽度容器。
**你会得到：** PASS/REVIEW/RESPONSIVE_RISK、字段路径、问题严重级别、视口覆盖与 responsive_contract_hash。
**↓ 本步结果自动进入下一步**
### 🟠 3 视觉基线差异审计
技能文件：web-visual-baseline-auditor
**解决什么：** 截图差异既可能是布局回归，也可能来自字体、浏览器、动画或时间数据变化；没有固定环境、遮罩和差异阈值时，团队会在噪声中误放行。
**你会得到：** PASS/REVIEW/VISUAL_RISK、基线与当前图摘要、环境一致性、遮罩范围、差异比例和 visual_baseline_hash。
**↓ 本步结果自动进入下一步**
### 🟣 4 网页发布验收门禁
技能文件：web-ui-release-gate
**解决什么：** 多视口和视觉检查通过，不等于关键页面已经由负责人确认；上线前还要把必测视口、阻断项、回滚引用和人工决定放在同一份证据包中。
**你会得到：** HOLD 或 READY_FOR_HUMAN_REVIEW、整改队列、human_decision=PENDING、release_allowed=false 和 ui_release_gate_hash，这是最终交付。
**↓ 本步结果形成最终交付**
## 实际示例
脱敏样例包含商品列表、结算页和帮助页三条关键路径，以及手机竖屏、手机横屏、平板和桌面四类视口。第一步发现一个视口重复、一个关键路径缺少移动断点；第二步发现结算页横向溢出和触控目标不足；第三步发现基线由不同浏览器生成且动画未遮罩；第四步输出 HOLD、三项整改和等待负责人确认的发布包。示例只验证本地规则，不代表真实网站已通过浏览器测试。
## 适合谁
- 使用智能体生成、重构或批量迭代营销页、后台和表单的产品与工程团队
- 需要覆盖手机、平板、桌面而又没有统一验收表的 QA、设计和前端团队
- 在 CI、预览环境或人工验收前收集响应式与视觉回归证据的交付团队
- 需要让页面发布保留视口覆盖、差异阈值和人工回滚责任的服务商
## 买家只需提供
- 已脱敏的页面路径、关键用户路径和目标视口/设备参数
- DOM 或无障碍摘要中的区域尺寸、溢出、字体和触控目标记录
- 基线截图与当前截图的文件摘要、浏览器/字体/操作系统环境和动态遮罩
- 必测视口、差异阈值、负责人、回滚引用和发布边界
## 使用方式
1. 使用 Python 3.10 或更高版本，将页面检查记录写成 UTF-8 JSON；不要放入账号、Cookie、令牌、真实用户数据或未脱敏截图地址。
2. 依次运行矩阵整理、响应式契约审计、视觉基线审计和发布验收门禁，也可以单独运行任一步。
3. 在隔离预览环境用 Playwright 或其他浏览器工具完成真实多视口渲染和截图后，将摘要回填到 JSON，由有权限的负责人决定是否发布。
## 交付与验收
- 四个独立技能目录，每个包含元数据、技能说明、标准库执行器、文档和脱敏样例。
- 四步可重复运行：视口矩阵、响应式契约、视觉差异、人工发布门禁；每个技能也能单独使用。
- 错误样例必须识别视口重复、断点缺失、横向溢出、触控目标不足、环境漂移、未遮罩动态区域或缺少回滚引用，并输出明确分支。
- 正常样例保留 human_decision=PENDING、release_allowed=false 和 external_action_executed=false；不替代真实浏览器、可访问性、性能或安全测试。
## 服务说明
脚本只处理买家有权使用且已经脱敏的本地 JSON，不连接站点、浏览器、CI、截图存储或发布平台，不读取凭据，不执行页面操作，不修改代码，不上传图片。静态摘要不能证明真实 CSS、字体加载、网络条件、设备 API、动画时序或所有浏览器行为；截图差异也不等同于用户体验结论。页面断点和 Playwright 能力会演进，正式使用前应锁定运行环境并由产品、前端和 QA 负责人复核。本套餐不承诺零视觉回归、绝对无障碍、固定兼容率、上线成功或节省比例。
## 套餐图标
<img id="aimg_YgW6g" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://www.xianshe.com/data/attachment/hl_skillhub/images/bundle_icon_1_1787377690.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" />
## 包含技能
- [web-responsive-contract-auditor
](https://www.xianshe.com/plugin.php?id=hl_skillhub&mod=detail&slug=web-responsive-contract-auditor)
- [web-ui-release-gate
](https://www.xianshe.com/plugin.php?id=hl_skillhub&mod=detail&slug=web-ui-release-gate)
- [web-viewport-matrix-normalizer
](https://www.xianshe.com/plugin.php?id=hl_skillhub&mod=detail&slug=web-viewport-matrix-normalizer)
- [web-visual-baseline-auditor
](https://www.xianshe.com/plugin.php?id=hl_skillhub&mod=detail&slug=web-visual-baseline-auditor)
## 安装方式
此套餐为**付费套餐**，购买后可一键下载全部技能。
🛒 [点击购买并下载 智能体网页多视口验收工作流](https://www.xianshe.com/plugin.php?id=hl_skillhub&mod=buy&bundle_id=521)
## 收费方式
💴 **现金购买** - 需要支付 ¥151.00
## 前往安装
**[👉 点击前往套餐安装页面](https://www.xianshe.com/plugin.php?id=hl_skillhub&mod=bundle&ac=detail&slug=web-viewport-matrix-normalizer-ccbf7cb7974f)**
| 
喧嚣卡
千斤顶
