mcpField
V
visual-verdict

visual-verdict

github.com/yeachan-heo测试与质量40.4k910 次安装1 天前更新
代码仓库

关于 visual-verdict

visual-verdict 用于将生成的 UI 截图与参考图进行比对，并给出结构化评估。它以 JSON 返回通过、修改或失败结论，以及具体差异和修改建议。

主要功能

  1. 01将截图与参考图比对
  2. 02为视觉相似度打分
  3. 03报告类别匹配与视觉差异
  4. 04根据差异提出修改建议
  5. 05以严格 JSON 格式返回结论

适用场景

  1. 01在继续修改前检查生成的 UI
  2. 02定位布局或字体差异
  3. 03依据截图评估结果指导迭代

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yeachan-heo/oh-my-claudecode --skill visual-verdict

安装后在 Claude Code 中输入/visual-verdict确认已加载。

详细介绍

使用此技能将生成的 UI 截图与一张或多张参考图进行对比，并返回严格的 JSON 判定结果，用于驱动下一轮编辑迭代。

<Use_When>

  • 任务包含视觉保真度要求（布局、间距、排版、组件样式）
  • 你已有一张生成的截图和至少一张参考图
  • 你需要在继续编辑前获得确定性的通过/失败指导 </Use_When>
- `reference_images[]`（一个或多个图片路径） - `generated_screenshot`（当前输出图片） - 可选：`category_hint`（例如 `hackernews`、`sns-feed`、`dashboard`）

<Output_Contract> 仅返回 JSON，且严格遵循以下结构：

{
  "score": 0,
  "verdict": "revise",
  "category_match": false,
  "differences": ["..."],
  "suggestions": ["..."],
  "reasoning": "short explanation"
}

规则：

  • score：0-100 的整数
  • verdict：简短状态（pass、revise 或 fail）
  • category_match：当生成的截图符合预期的 UI 类别/风格时为 true
  • differences[]：具体的视觉不匹配项（布局、间距、排版、颜色、层级）
  • suggestions[]：与差异项对应的可执行后续编辑建议
  • reasoning：1-2 句总结

<Threshold_And_Loop>

  • 目标通过阈值为 90+。
  • 如果 score < 90，请继续编辑，并在任何进一步的视觉审查通过之前重新运行 /oh-my-claudecode:visual-verdict。
  • 在下一张截图达到阈值之前，不要将视觉任务视为完成。 </Threshold_And_Loop>

<Debug_Visualization> 当不匹配诊断较为困难时：

  1. 将 $visual-verdict 作为权威判定依据。
  2. 使用像素级差异工具（像素差异 / pixelmatch 叠加）作为辅助调试手段来定位热点区域。
  3. 将像素差异热点转化为具体的 differences[] 和 suggestions[] 更新。 </Debug_Visualization>
```json { "score": 87, "verdict": "revise", "category_match": true, "differences": [ "Top nav spacing is tighter than reference", "Primary button uses smaller font weight" ], "suggestions": [ "Increase nav item horizontal padding by 4px", "Set primary button font-weight to 600" ], "reasoning": "Core layout matches, but style details still diverge." } ```

任务：{{ARGUMENTS}}

评论

支持 Markdown