跳到正文
cccskills
免费在 GitHub 公开

visual-verdict

Compare a UI screenshot with reference images and receive a structured JSON assessment. Get a score, pass or revision status, concrete visual differences, and suggested edits for layout, spacing, typography, colors, and visual hierarchy.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Structured visual QA verdict for screenshot-to-reference comparisons

查看安装方法

适用场景

  • Checking whether an implemented screen matches its reference
  • Finding differences in spacing, typography, and colors
  • Prioritizing edits from structured visual feedback
  • Rechecking screenshots after visual changes

包含的文件(1)

  • SKILL.md2.4 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

<Purpose> Use this skill to compare generated UI screenshots against one or more reference images and return a strict JSON verdict that can drive the next edit iteration. </Purpose>

<Use_When>

  • The task includes visual fidelity requirements (layout, spacing, typography, component styling)
  • You have a generated screenshot and at least one reference image
  • You need deterministic pass/fail guidance before continuing edits </Use_When>
<Inputs> - `reference_images[]` (one or more image paths) - `generated_screenshot` (current output image) - Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`) </Inputs>

<Output_Contract> Return JSON only with this exact shape:

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

Rules:

  • score: integer 0-100
  • verdict: short status (pass, revise, or fail)
  • category_match: true when the generated screenshot matches the intended UI category/style
  • differences[]: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)
  • suggestions[]: actionable next edits tied to the differences
  • reasoning: 1-2 sentence summary

<Threshold_And_Loop>

  • Target pass threshold is 90+.
  • If score < 90, continue editing and rerun /oh-my-claudecode:visual-verdict before any further visual review pass.
  • Do not treat the visual task as complete until the next screenshot clears the threshold. </Threshold_And_Loop>

<Debug_Visualization> When mismatch diagnosis is hard:

  1. Keep $visual-verdict as the authoritative decision.
  2. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
  3. Convert pixel diff hotspots into concrete differences[] and suggestions[] updates. </Debug_Visualization>
<Example> ```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." } ``` </Example>

Task: {{ARGUMENTS}}

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Write or revise instructions, specifications, tickets, and skill files so an agent can act without prior chat history. Make rules checkable, explain their reasons, define completion criteria, and keep authoritative information in one place.

中文简介正在准备中。当前显示英语简介。

  • Clarifying instructions in CLAUDE.md
  • Making specifications and tickets actionable
  • Adding completion criteria to skill procedures
Yeachan-Heo/oh-my-claudecode4万2026年10月22日 更新

Simplify bloated AI-generated code by removing dead code, duplicated logic, and unnecessary layers while checking that existing behavior stays intact. Use a limited cleanup scope, verify changes with relevant checks, or request a review without edits.

中文简介正在准备中。当前显示英语简介。

  • Removing duplicate logic and unused code
  • Simplifying unnecessary wrappers without changing behavior
  • Cleaning up only a specified set of changed files
Yeachan-Heo/oh-my-claudecode4万2026年10月22日 更新

Review module relationships and change history to identify structural improvements in a codebase. Receive ranked candidates with file references, suggested changes, and risks, plus a recommendation for where to start, without modifying code.

中文简介正在准备中。当前显示英语简介。

  • Reviewing architecture after a batch of changes
  • Investigating changes that touch too many files
  • Prioritizing structural improvements
Yeachan-Heo/oh-my-claudecode4万2026年10月22日 更新

ask

免费

Send questions, review requests, or implementation tasks to a supported local AI command-line tool through one shared command. The wrapper handles provider-specific options and saves the result as a Markdown file for later reference.

中文简介正在准备中。当前显示英语简介。

  • Requesting a security review of a patch
  • Seeking UX suggestions for a user flow
  • Drafting an implementation plan for an issue
Yeachan-Heo/oh-my-claudecode4万2026年10月22日 更新

Turn an unclear idea into linked decision tickets on a repository’s issue tracker. Work through one decision per session, record outcomes and dependencies, and prepare a brief defining the objective, scope, and exclusions for delivery.

中文简介正在准备中。当前显示英语简介。

  • Clarifying the destination of an early idea
  • Mapping decisions and their dependencies
  • Resuming unresolved decisions across sessions
Yeachan-Heo/oh-my-claudecode4万2026年10月22日 更新

autopilot

免费

Turn a short product idea into working code through requirements analysis, technical planning, implementation, testing, and review. It coordinates agents across these stages, fixes detected problems, and reports assumptions that still need a human decision.

中文简介正在准备中。当前显示英语简介。

  • Building a product from a short idea
  • Creating a bookstore inventory API
  • Developing a habit-tracking command-line tool
Yeachan-Heo/oh-my-claudecode4万2026年10月22日 更新

查看 Yeachan-Heo 的全部技能

报告此技能的问题