技能说明
来自 GitHub 官方维护的 github/awesome-copilot，专注网页设计质量审查：先确认运行中的网站和项目环境，再用浏览器截图、页面结构和源代码定位布局溢出、对齐、断点、对比度、焦点状态、替代文本与视觉不一致等问题。支持静态网站、React/Vue/Angular/Svelte、Next.js/Nuxt/SvelteKit 以及常见 CMS；修复时强调最小改动、保留现有代码风格，并在桌面与移动端复查。仓库采用 MIT 许可证，当前 GitHub 星标为 38842。README 提供 gh skills install 安装方式，也可手动复制技能目录；它更适合有浏览器自动化、源码访问和正在运行的网站，生产站点建议先只做只读检查。
关于此技能
一套把网页审查、源代码修复和复查串起来的前端质量技能，适合发现“看起来能用但细节不稳”的页面问题。
核心能力
真实页面检查
要求目标网站正在运行，用截图、页面结构和浏览器信息检查桌面与移动端，而不是只凭代码猜测。
覆盖常见设计问题
重点检查布局溢出、元素重叠、断点异常、文字裁切、触控尺寸、对比度、焦点状态、替代文本和视觉一致性。
按优先级修复并复查
定位源文件后按 P1/P2/P3 排序，遵守最小改动原则，修复后重新加载、截图并确认没有回归。
适用场景
上线前网页体检
在发布前检查桌面、平板、手机和宽屏下的布局、可访问性与细节表现。
修复 AI 生成页面
把浏览器中真实出现的溢出、错位、断点和状态问题定位到组件或样式文件，再做有证据的修复。
远程站点只读评审
对生产或演示站点先做只读检查，整理问题清单；需要改动时再确认源码位置和权限。
使用步骤
- 01
确认目标和环境
提供网站地址，确认框架、样式方式、源码位置和评审范围；目标站点必须能打开。
- 02
采集页面证据
在 375、768、1280 和 1920 像素等视口检查页面，结合截图、页面结构与控制台信息记录问题。
- 03
定位并修复
按问题严重程度找到对应组件或样式文件，保持项目原有写法，只做解决问题所需的改动。
- 04
重新验证
刷新页面并再次截图，复查响应式、视觉一致性和未受影响的区域；同一问题超过三次尝试应先停下确认。
常见问题
使用前需要什么？+
需要一个正在运行的网站、浏览器自动化能力，以及在要修改代码时能访问源码。没有这些条件时只能做有限的静态建议。
它能直接改生产网站吗？+
技能要求先检查并确认源码位置；生产站点更适合先只读评审，是否修改应由操作者确认。
它与普通 UI 设计技能有什么不同？+
它更偏“发现问题—定位源代码—修复—复查”的质量闭环，不负责从零确定品牌方向或创作整套视觉风格。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/10
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
gh skills install github/awesome-copilot web-design-reviewer