用途:在真实页面中验证 UI 的实际渲染效果,而不是只阅读代码。凡是可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配以及浏览器侧回归验证,都应使用该技能。
主要能力与工作流: 第一步,开发环境自检(必需):确认目标服务是否已启动,避免重复拉起开发服务器;明确要访问的页面、组件演示路径或交互入口。 第二步,执行浏览器验证(必需):至少检查默认主题与暗色模式;必要时检查移动端与桌面端视口;对关键交互执行点击、悬停、输入或状态切换。 第三步,留证据:优先使用截图、可访问性快照或计算样式值作为证据;记录问题发生条件,而不是只说“样式不对”。 第四步,回归结论:明确哪些场景通过、哪些仍有问题;若发现回归,反馈到前端实现阶段处理。
重点检查项:light / dark 模式;desktop / mobile 布局;关键交互状态;对比度、间距、圆角、层级、溢出和禁用态。
反模式:不开页面、只读代码就宣布 UI 正常;只看一张截图、不验证交互状态;不说明问题发生条件和视口尺寸。
交付前检查:已在真实页面验证关键场景;已留截图、快照或样式值证据;已覆盖至少两种主题或关键视口;结论中明确了通过项与残余问题。
限制:该技能依赖已启动的开发环境与浏览器验证能力;资料未提供具体安装命令、支持的工具链、费用或平台信息。