agentskills.codes
VI

visual-verdict

by xz1220DesignSource

Automated UI/UX comparison tool providing structural feedback and revision steps based on image analysis.

UI designTestingFrontend

Install

mkdir -p .claude/skills/visual-verdict && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11360" && unzip -o skill.zip -d .claude/skills/visual-verdict && rm skill.zip

Installs to .claude/skills/visual-verdict

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

截图与参考图对比的结构化视觉 QA 判定
20 charsno explicit “when” trigger
Intermediate

Key capabilities

  • →Compare UI screenshots
  • →Identify layout mismatches
  • →Suggest CSS revisions
  • →Score visual fidelity

How it works

It performs a structural comparison between screenshots and reference designs, outputting a JSON verdict with improvement suggestions.

Inputs & outputs

You give it
UI screenshot and reference
You get back
Structured JSON verdict

When to use visual-verdict

  • →Verifying UI layout fidelity
  • →Automating visual regression testing
  • →Generating CSS revision steps

About this skill

<Purpose> 使用本 skill 把生成的 UI 截图与一张或多张参考图对比，返回严格的 JSON 判定，用来驱动下一轮编辑。 </Purpose>

<Use_When>

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

<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-kimi:visual-verdict。
  • 在下一张截图越过阈值之前，不要把视觉任务当作已完成。 </Threshold_And_Loop>

<Debug_Visualization> 当不匹配难以诊断时：

  1. $visual-verdict 仍是权威判定。
  2. 用像素级 diff 工具（pixel diff / pixelmatch overlay）作为次级调试辅助，定位热点。
  3. 把像素 diff 的热点转写成具体的 differences[] 与 suggestions[] 更新。 </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}}

When not to use it

  • →When reference images are missing

Prerequisites

Reference imageGenerated screenshot

Limitations

  • →Requires reference images
  • →Threshold target 90+

How it compares

It provides a deterministic, structured JSON output for visual QA rather than subjective feedback.

Compared to similar skills

visual-verdict side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
visual-verdict (this skill)03moNo flagsIntermediate
paper-parity04moNo flagsIntermediate
gsd-ui-review04moNo flagsBeginner
verify-bulk-action-bar03moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

paper-parity

GLaDO8

Use when comparing or recreating this repo's UI in Paper MCP and fixing parity issues against the live rendered site.

00

gsd-ui-review

AdityaArote

Retroactive 6-pillar visual audit of implemented frontend code

00

verify-bulk-action-bar

junnv93

BulkActionBar 패턴 SSOT 검증 — count chip aria-live, role=toolbar, Esc clear, indeterminate Radix, focus management, IME guard. 일괄 작업 UI 변경 시 트리거. canonical = components/common/BulkActionBar.tsx (도메인 무관 generic), components/approvals/BulkActionBar.tsx는 approvals 특화 wrapper.

00

campusway-frontend-quality

md-muntasir-shihab

CampusWay frontend quality workflow for Vite React and Tailwind with optional Next.js surface. Use when: improve UI, refactor components, fix layout, optimize bundle, enforce design consistency, prepare frontend PR.

00

preview-data-generator

rshankras

Generate sample data and a multi-variant #Preview matrix for SwiftUI views — empty/loading/error/loaded states, light/dark, Dynamic Type, locales/RTL, and devices. Use when the user says "add previews", "sample data for previews", "preview my view in different states", "preview data", "prototype thi

00

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

Search skills

Search the agent skills registry