mcpField
V
visual-verdict

visual-verdict

github.com/shyxinテスト・品質541 回インストール1 日前に更新
リポジトリ

visual-verdict について

visual-verdictは、生成したスクリーンショットと参考画像を比較してUIの再現度を確認するスキルです。厳密なJSON判定と修正案を返し、反復的な画面調整を支援します。

主な機能

  1. 01生成画像と参考画像の比較
  2. 02レイアウト、余白、字体、スタイルの確認
  3. 030～100のスコアと判定の出力
  4. 04差異の説明と修正案の提示
  5. 05複数の参考画像とカテゴリヒントに対応

活用シーン

  1. 01参考画像に対するUIの確認
  2. 02画面が視覚的な合格基準を満たすかの判定
  3. 03差異を特定して次の修正に反映

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/shyxin/skills --skill visual-verdict

インストール後、Claude Code で/visual-verdictを入力して読み込まれたか確認します。

詳細

プロジェクトの README より
用本技能把生成的 UI 截图与一张或多张参考图对比，返回一份严格的 JSON 判定，用来驱动下一轮修改迭代。

<Use_When>

  • 任务包含视觉还原度要求（布局、间距、字体、组件样式）
  • 你有一张生成的截图和至少一张参考图
  • 在继续修改前，需要确定性的通过 / 不通过（pass/fail）指引 </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 句话的总结 </Output_Contract>

<Threshold_And_Loop>

  • 目标通过阈值是 90+。
  • 若 score < 90，继续修改并在任何进一步视觉复查前重跑 /oh-my-claudecode:visual-verdict。
  • 在下一轮截图达到阈值之前，不要把视觉任务视为完成。 </Threshold_And_Loop>

<Debug_Visualization> 当差异诊断困难时：

  1. 以 $visual-verdict 作为权威判定。
  2. 用像素级 diff 工具（pixel diff / pixelmatch overlay）作为辅助调试手段来定位热点。
  3. 把像素 diff 热点转化为具体的 differences[] 与 suggestions[] 更新。 </Debug_Visualization>
```json { "score": 87, "verdict": "revise", "category_match": true, "differences": [ "顶部导航间距比参考图更紧", "主按钮字体字重偏小" ], "suggestions": [ "导航项水平内边距增加 4px", "主按钮 font-weight 设为 600" ], "reasoning": "核心布局一致，但样式细节仍有出入。" } ```

Task: {{ARGUMENTS}}

コメント

Markdown 対応