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 スクリーンショットを 1 枚以上の参照画像と比較し、次の編集作業に役立つ厳密な JSON 判定を返します。

<Use_When>

  • レイアウト、余白、タイポグラフィ、コンポーネントのスタイルなど、視覚的な忠実度が求められるタスクの場合
  • 生成されたスクリーンショットと、少なくとも 1 枚の参照画像がある場合
  • 編集を続ける前に、判定が明確な合否のガイダンスが必要な場合 </Use_When>
- `reference_images[]`（1 つ以上の画像パス） - `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 対応