网页交付前检查webcheck
AI 把网页做好了，交付之前跑一遍：手机排版会不会错乱、图片有没有加载失败、链接是不是占位符——连同「这次没查到什么」，一起写成报告。
报告样例可直接下载对照 · 本机运行，材料不经过本站服务器
网页检查报告
1440 / 768 / 390 px检查对象 · 案例-花店落地页
查出 2 个问题，
其中 1 个必须修。
必须修
390px 下页面可以左右拖动
内容宽 464px，多出 74px。
- 项已运行
- 24
- 项不适用
- 5
- 件需人工
- 2
项已运行
项不适用
件需人工
2026-10-29 实际运行 · 报告原文可下载对照
WHAT IT CHECKS
29 项自动检查，归成 9 类给你。
每一项都写出实测数字或证据位置，不是打个勾。查不了的项单独列出，不混进「通过」。
源码 · 可访问性5 项
图片缺少替代文本S-01
img 没有 alt，读屏用户听到的只是「图片」两个字。
删掉焦点框却没有替代S-03
写了 outline:none，用 Tab 走一遍就不知道自己在哪。
输入框没有可读标签S-06
label 缺失或没关联，表单念不出来。
html 缺 langS-12
浏览器和读屏不知道这页是中文。
标题层级跳跃S-13
h2 直接跳到 h4，目录结构就断了。
源码 · 链接与交互5 项
div 当按钮用S-02
点了有反应，但键盘和读屏都不认它是按钮。
占位链接S-04
href="#" 这类，真实用户点了没反应。
空的 mailto / telS-05
点了会弹出空白邮件或拨号，等于死路。
用 alert 当提示S-07
打断操作，样式不受页面控制，也没法被自动化验证。
外链缺 rel=noopenerS-11
新标签页能通过 window.opener 动原页面。
源码 · 安全与遗留物3 项
源码里可能有密钥S-08
像 key 的字符串会被点名，报告不写入具体值。
遗留的 TODO / FIXMES-09
注释里的「待办」被翻出来，交付前该清掉。
写死的固定宽度S-10
px 写死的容器，是窄屏溢出的第一嫌疑。
渲染 · 溢出与空页2 项
1440 / 768 / 390 三档横向溢出R-01
量出内容实际宽度，并列出是哪些元素顶出了视口。
页面根本没渲染出内容R-08
等 6 秒还是空的，直接报「无法确认页面正常」，不放行。
渲染 · 资源与图片3 项
渲染后仍缺 altR-02
JavaScript 里补进去的图片也算在内。
背景图没有可读名称R-03
CSS 背景承载信息时，读屏读不到。
资源 4xx / 5xxR-07
给出具体路径和状态码；多档宽度重复请求只算一个资源。
渲染 · 锚点、焦点与报错3 项
锚点指向不存在的 idR-04
点了不跳、跳错位置，都会被抓住。
键盘聚焦看不见位置R-05
真按 Tab 走一遍，看焦点有没有可见样式。
控制台报错R-06
浏览器控制台的红色报错逐条记录。
导出 · CSV 编码与结构2 项
CSV 没有 BOME-01
Excel 打开中文变乱码的根源。
CSV 结构错乱E-02
逐行比对列数，逗号、引号、换行都要对得上。
导出 · 其他格式与连点2 项
非 CSV 导出未做内容校验E-03
只记产出文件与大小，报告里写明这类要你手动打开确认。
连点导出重复出文件E-04
连点两次该只产出一份；多出来就记下倍数。
非法输入与提示4 项
数字框填 abcF-01
看页面是直接显示 NaN，还是悄悄把它改成 0。
动画没适配减少动态I-01
prefers-reduced-motion 没处理，前庭敏感的用户没法用。
部分元素聚焦没有焦点框I-02
从渲染结果里再核一遍，不只看样式表。
可点区域偏小I-03
量实际尺寸，标出小于舒适点击区的元素。
WITH IT / WITHOUT IT
同一件事，三种确定性。
左边两列是你现在可能在做的事，右边一列是跑完一遍之后你手里有什么。
手机上的横向溢出
- 自己点一遍
- 肉眼看不出，看出来了也不知道是哪个元素
- 只让 AI 说
- 常说「已经响应式了」
- 跑 webcheck
- 报出内容宽 464px 对 390px，并列出顶出去的元素
图片和样式加载失败
- 自己点一遍
- 只看首屏，滚不到的地方不知道
- 只让 AI 说
- 不主动提
- 跑 webcheck
- 逐个资源检查，报出失败清单
占位链接、空按钮
- 自己点一遍
- 交付之后才被点到
- 只让 AI 说
- 不主动提
- 跑 webcheck
- 源码扫描，列出位置
导出的文件能不能用
- 自己点一遍
- 自己用 Excel 打开看一眼
- 只让 AI 说
- 说「应该没问题」
- 跑 webcheck
- 真的导一次，查编码和行列数；没跑就写明未运行
这次没查到什么
- 自己点一遍
- 没有这个概念
- 只让 AI 说
- 容易说成「都检查过了」
- 跑 webcheck
- 单列一节：未运行、不适用、需人工确认
ONE REAL RUN
桌面上看着挺好，手机上却多出一截。
一个演示用的花店落地页。报告说 390px 下能左右拖动、多出 74px，并指出是卡片顶出去的；按报告改完再跑一遍，这一项就清了。
修复前
溢出 74px
修复后
已收进屏幕
两张都是同一合成案例的浏览器实际截图，截取相同位置；红色虚线是按报告实测的溢出范围标出来的，不是截图上原有的线。390px 视口由桌面浏览器模拟，不是真机。
报告原文 · 必须修
390px 下页面可以左右拖动
实测：内容宽 464px，多出 74px。
证据：article.card 右边界 464px、h3 右边界 439px
展开修复前的完整报告摘录
一句话结论 查出 2 个问题，其中 1 个必须修。先把必须修的改完，再重跑一次。 必须修（摘录） 390px 下页面可以左右拖动 实测：390px 视口下内容宽 464px（多出 74px）。 证据：超出的元素（390px）：article.card 右边界 464px、h3 右边界 439px、p 右边界 439px 导出文件实测 不适用：页面没有导出/下载按钮。导出相关的 4 项（E-01–E-04）因此没有运行——既不算检查失败，也不能说检查过导出。
为便于阅读省略了本机路径。文字与数字来自同一次运行；示例修改由人工完成。
HOW IT WORKS
装好之后，一句话就开始。
你可以这样对 Agent 说
“用 webcheck 检查一下这个网页，告诉我交付前哪些必须改。”
这是使用指令示例，不是录制的真实客户端对话。不同客户端的技能识别情况需要实际试一次。
- 01
装好技能
把完整目录交给 Agent 按说明安装，或自己复制到技能目录、装好依赖。
- 02
给出网页
页面文件、项目目录，或者一个已经跑起来的可信网址。
- 03
看报告
先看「必须修」和「这次没查到什么」，改完再跑一次对比。
IS IT FOR YOU
适合你，还是不适合。
买之前先对一下。写清楚不适合，是为了你买完不后悔。
适合你，如果
- 你用 AI 或其他工具做出了网页，准备交付给客户、老板，或者要上线。
- 你想在上线之前知道自己漏了什么，而不是等用户来告诉你。
- 你手上有能跑终端命令的 Agent，或者愿意自己敲两条命令。
- 页面交付前会反复小改，你希望每次都快速过一遍同样的检查。
不适合，如果
- 你需要的是无障碍合规认证或安全审计报告 —— 这个工具不给认证。
- 你希望它自动把问题改好 —— 它只出报告，改还是要人来改。
- 关键页面在登录之后，或者要真实业务数据才能测 —— 那部分这次查不到。
- 你在手机上、或者连 Node 都装不了的环境里 —— 它得在本机跑。
WHAT YOU GET
一个文件夹，跑得起来。
- SKILL.md
- README.md
- scripts/check.mjs
- package.json
- 依赖与许可说明
版本 0.2.0 · 个人使用许可（不可转售） · 依赖 Playwright（Apache-2.0），随包附许可说明。
运行环境
Node.js 20+ / npm
数据边界
本机运行，报告不出机器
输出
Markdown / JSON + 截图
许可
个人使用，可改不可转售
FAQ
买之前想知道的。
不写代码能用吗？
可以。把它交给能读写本机文件、能执行终端的 Agent，按随包说明安装并运行；你也可以自己复制目录、装依赖、跑一条命令。它输出的是报告，不需要你读懂代码——但报告里的修改仍要找人或找 AI 来改。
它会替我把网页修好么？
不会。webcheck 只负责查出问题并给出证据。你可以把报告交给能改代码的 Agent 或开发者，改完再跑一次对比。
查完是不是就能交付了？
不是。报告里的「必须修」清零，只代表这一次自动检查没发现问题。真机、Safari、读屏软件、业务数据和文案真实性，都要你自己确认。
需要准备什么环境？
Node.js 20 或更高、npm、Chrome 或 Edge。安装依赖需要联网；检查本地文件时会启动一个临时静态服务，只监听本机。
我的页面和材料会被上传吗？
不会经过本站服务器。检查全部在你本机完成，报告也写在本机。要留意的是：本地检查会限制隐藏文件、部分文件类型和目录外路径，并拦截部分外部请求，受限时报告会标记检查不完整。网址模式连接的是真实网络，只应检查可信页面。
支持哪些 AI 客户端？
只要客户端能读取技能文件并执行终端命令，就可以用。Agent 能不能自动发现这个技能，取决于客户端和配置，安装后需要实际试一次。
以后的新版本会免费给我吗？
不会。这是按当前版本一次买断：你拿到的是购买时的那一版，之后的新版本不会再发给你。如果以后出了新版，会作为新商品单独上架，你按需决定要不要买。
许可能商用吗？
个人使用许可：你自己和你的项目可以随便用、可以改，不能转售或公开分发这个技能包本身。要在团队内分发或用于对外交付，请先联系我。