SuperAPI AI 工具集

agent-first-screenshots

智能体与模型

查看项目

更新于 10-15 21:10

技能介绍

用途:用于“截图/重做截图/制作营销图片”类任务。由智能体通过 CDP 驱动真实应用,在发布前经过结构、像素与视觉三重验证,把截图从手工产物变成可重复生成的流水线。它不用于端到端测试证据;通过/失败证明应使用 run-tests 配合 @openwork/testkit 规格及其证据带。

零缺陷标准:可发布截图必须没有明显视觉缺陷,判断标准是“人一眼看去是否会立刻发现异常”。文字重叠或截断、布局错位或塌陷、内容乱码或处于过渡中、空白区域、多余弹窗或提示,任一出现即判定不合格。

方法:像准备演示的高级用户那样操作应用,而非像开发者那样改 DOM。让应用进入真实稳定状态后干净捕获,绝不重建或伪造。

黄金规则:只做删除,不做添加。可用 display:none 隐藏叶子级干扰(通知角标、页脚登录链接、状态文字);绝不注入假 HTML、覆盖结构容器的 flex/height/width、添加固定定位覆盖层或改动 DOM 树。功能不可用不要伪造,应通过设置界面像真实用户一样启用,或跳过并说明。每张截图从干净重载开始:location.reload(),等待完整渲染,通过 UI 导航,最小化叶子清理,验证后捕获。通过真实点击标签/按钮/选择器获取状态,用关闭按钮关闭面板,运行真实多轮任务。用 CDP metrics override 匹配目标宽高比(如 1440x900、deviceScaleFactor: 2),等待约 1 秒后重新验证。

三重验证循环:DOM 预检(捕获前,滚动区高度 > 100px、主文案在视口内、无意外弹窗);像素后检(解码 PNG 采样主区域,内容区方差 > ~200,空白区 < 50,整图背景比 > 0.97 视为空白帧);视觉检查(强制门禁,交给视觉模型按零缺陷评分返回 JSON,any_obvious_defect 为 true 即拒绝)。

技能目录提供 screenshot-verify.mjs 与 capture-verify.mjs 脚本,均使用 sharp。美化脚本 scripts/beautify.mjs 可将已验证原图转为发布框:渐变背景、内边距、圆角、柔和阴影、可选窗口边框。用法:node scripts/beautify.mjs in.png out.png [flags],支持 --bg、--bg-angle、--pad、--radius、--chrome、--title、--url、--width、--ratio 等参数。美化应在验证之后进行,框饰只是呈现,不是证明。

限制:确定性统计无法捕捉重叠、截断、错位、重复渲染等最关键缺陷,必须依赖视觉门禁;美化图不继承测试证据语义。