用途:为网页改动提供可核验的截图证据。强调截图是页面外观唯一无法被臆想的陈述,改动前与改动后都要拍;若无法截图(无服务器、无 Chromium、无网络)就应说明并停止做视觉断言。
主要能力:每个状态拍六张图——宽度 375(手机,布局最易出问题)、768(平板/尴尬的中间断点)、1440(桌面),乘以明暗两种主题(若站点支持)。附带运行器。
使用方式:在仓库根目录执行 node .claude/skills/visual-proof/capture.mjs --url http://localhost:3000/ --label before,改动后再执行一次并传 --label after;也可对已部署预览执行 --url https://<preview>.vercel.app/pricing --label after。输出到 .visual-proof/<label>/<width>-<theme>.png,脚本会打印各路径,该目录应加入 .gitignore。可用参数:--widths 375,768,1440、--themes light,dark、--full、--out <dir>。
环境说明:云端/远程 Claude Code 会话已装 Chromium 且设置 PLAYWRIGHT_BROWSERS_PATH=/opt/pw-browsers,不要运行 playwright install;若项目自带 @playwright/test,用 executablePath: '/opt/pw-browsers/chromium' 启动。无开发服务器时先后台启动(npm run dev),等端口就绪后截图,完成后不要留着进程。主题切换因站而异,运行器依次尝试 ?theme=dark、html 的 data-theme="dark"、html 的 .dark 类、Playwright 的 colorScheme: 'dark';都不适用则传 --themes light 并说明未验证暗色。
检查要点:看图片,尤其 375 的横向滚动、768 的孤行或截断、暗色半透明表面的对比度、1440 首屏内容与主操作、加载中图片位移(对照 core-web-vitals)。最后用文字说明变化并附路径。
限制:主题切换与是否支持双主题取决于站点实现;无服务器、浏览器或网络时无法采集。价格、平台要求等资料未提供。