Skill Gallery
Browser Visual QA
用真实浏览器检查页面视觉和交互。
场景
前端页面、文档站、仪表盘、交互工具和移动端布局都应该做真实浏览器检查。
Browser Visual QA result preview
真实浏览器视觉验收
Visual QA
- 输入
- localhost URL、目标页面、视口尺寸
- 输出
- 桌面/移动截图、重叠和溢出问题
- 适用场景
- 网站复刻、前端改版、发布前验收
示例输入
本地页面 URL、桌面和移动视口
可交付结果
截图、问题列表、修复后复查截图
验收方式
无 404、无文本溢出、暗色模式无亮底
输入
- 本地或线上 URL。
- 需要检查的视口尺寸。
- 参考截图或设计目标。
示例输入
请检查 /gallery 和 /codex/model 在 1440px 桌面、390px 移动端和 dark mode 下是否有溢出、遮挡、404 或亮色漏底。
保存截图并列出需要修复的组件。
产出
- 桌面端和移动端截图。
- 布局问题列表。
- 修复后的二次截图。
推荐截图组
| 截图 | 目的 |
|---|---|
desktop.png | 左导航、正文、右 TOC 同屏检查 |
mobile.png | Header、菜单、标题、按钮和代码块 |
dark.png | 暗色背景、边框、图标和卡片对比度 |
after-fix.png | 修复后确认同一问题不再出现 |
当前站点示例
本项目已经保存了 /codex/model 的参考截图和本地截图，位置在 output/playwright/。
检查重点
- Header 是否在移动端溢出。
- 长标题和按钮文字是否重叠。
- 暗色模式是否有亮色漏底。
- 卡片、表格和代码块是否在窄屏横向挤压。
继续阅读
按当前页面继续跳到相关教程、评测、路线或 Gallery 示例。