⚡

视觉质量检测技能Skill visual-qa

这是一个自动化视觉测试工具，专门用于网站质量检测。通过全页滚动触发GSAP动画后，对多个设备尺寸（桌面、平板、移动）进行截图，并利用并行处理技术分析网页视觉状态。主要功能包括动画触发测试、多设备兼容性检查、视觉元素完整性验证，适用于前端开发、网站维护和用户体验优化。关键词：视觉测试、自动化检测、GSAP动画、多设备截图、网页质量检测、前端测试、用户体验测试

测试 0 次安装 0 次浏览 更新于 3/3/2026

名称: 视觉质量检测 描述: 完整的视觉质量检测 - 通过全页滚动触发动画后截图，然后用Claude进行分析。在CSS/模板更改后运行。 允许工具: 读取、写入、编辑、Bash、任务

视觉质量检测技能

自动化视觉测试，通过滚动整个页面来正确处理GSAP动画后再捕获截图。

使用方法

要求Claude运行视觉质量检测：

  • “在CSR网站上运行视觉质量检测”
  • “对所有页面截图并分析”
  • “检查网站视觉状态”

此技能的功能

  1. 全页滚动 - 以增量方式滚动整个页面以触发所有GSAP/ScrollTrigger动画
  2. 多设备截图 - 桌面端(1920px)、平板端(768px)、移动端(375px)
  3. 并行处理 - 使用Haiku子代理同时分析多个页面
  4. 视觉分析 - 检查截图中的问题

测试页面

页面 URL
首页 https://csrdevelopment.com/
关于 https://csrdevelopment.com/about/
作品集 https://csrdevelopment.com/portfolio/
联系 https://csrdevelopment.com/contact/
隐私政策 https://csrdevelopment.com/privacy-policy/
服务条款 https://csrdevelopment.com/terms-of-service/

截图脚本

位置: /root/.claude/skills/visual-qa/screenshot.py

单页面

python3 /root/.claude/skills/visual-qa/screenshot.py --url https://csrdevelopment.com/about/

所有页面

python3 /root/.claude/skills/visual-qa/screenshot.py --all

输出

截图保存至: /home/dev/screenshots/

使用Haiku进行并行分析

运行完整视觉质量检测时，启动多个Haiku代理同时分析不同页面：

代理1: 分析首页 + 关于页面截图
代理2: 分析作品集 + 联系页面截图
代理3: 分析法律页面截图

视觉质量检测清单

所有页面

  • [ ] 页眉可见且徽标居中
  • [ ] 菜单按钮正常工作
  • [ ] 页脚链接存在
  • [ ] 无水平滚动
  • [ ] 所有尺寸下文本可读

首页

  • [ ] 英雄视频/图像已加载
  • [ ] 英雄文本可见（非透明度0）
  • [ ] 房产卡片显示图像
  • [ ] 动画已完成

关于页面

  • [ ] 团队成员照片已加载（非占位符）
  • [ ] 简介文本可见
  • [ ] 图像具有灰度滤镜

作品集

  • [ ] 房产网格显示
  • [ ] 状态徽章可见
  • [ ] 每个房产显示不同图像

联系页面

  • [ ] 表单字段可见
  • [ ] 联系信息显示
  • [ ] 提交按钮样式正确

房产详情

  • [ ] 英雄图像已加载
  • [ ] 房产详情侧边栏
  • [ ] 咨询表单存在