design-qa-review-skill

design-qa-review-skill 是面向 UI 设计走查的 skill。用途是在需要对比设计稿与开发实现截图、检查 UI 还原度或进行视觉走查时使用。主要能力包括：对比设计稿与开发实现截图；检查视觉还原准确度；识别布局、间距、颜色、排版和组件方面的差异；生成详细的视觉走查报告；支持图片文件对比以及基于 URL 的页面分析。触发条件：用户提到走查、设计走查、UI 走查、还原度检查、对比设计稿、视觉比对等关键词时；用户提供两张图片（设计稿与实现截图）时；用户提供页面 URL 与设计稿 URL 或文件时；用户明确要求设计 QA 走查时。安装方式：克隆仓库并安装依赖：git clone https://github.com/ColourCloudSky/design-qa-review-skill.git，cd design-qa-review-skill，然后 npm install 或 pip install -r requirements.txt 或 yarn install。主要命令示例：design-qa-review --mockup design.png --implementation screenshot.png；design-qa-review --mockup-url https://figma.com/file/... --page-url https://staging.example.com；design-qa-review --mockup design.png --implementation dev.png --output report.json --verbose；design-qa-review --mockup design.png --implementation dev.png --focus layout,spacing,colors。配置可通过 config.json 或 .design-qa-rc 设置容差、检查区域、忽略区域、输出与阈值；环境变量可设置 BROWSERLESS_API_KEY、FIGMA_ACCESS_TOKEN、SCREENSHOT_SERVICE_URL、REPORT_OUTPUT_DIR 等。报告包含评分、问题类型、严重程度、期望值、实际值、位置等信息，并可按区域输出分数。适用场景包括开发阶段的视觉还原检查、CI/CD 流水线中的设计 QA 审核以及批量截图对比。限制方面：资料未提供真实可用的截图服务、API 的具体获取方式与计费信息；URL 截图依赖 BROWSERLESS_API_KEY 或 SCREENSHOT_SERVICE_URL 等外部服务；动态内容可能产生误报，需通过忽略区域配置处理；图片尺寸不一致时需启用 resizeToMatch；具体命令与配置是否已在项目中实现，资料未明确说明，使用前需以仓库实际内容为准。