visual-verdict
Structured visual QA verdict for screenshot-to-reference comparisons
DeepseekModel
官方收录技能
质量 优秀 · 90
v1.0.0
获取
https://deepseekmodel.com/api/download.php?id=yeachan-heo-oh-my-claudecode-skills-visual-verdict-skill-md&format=skill
下载 .skill
标准格式,含 system_prompt 与 model_config,导入任意 Agent 框架即可使用
.skill 文件中 system_prompt 字段的实际内容。
name visual-verdict description Structured visual QA verdict for screenshot-to-reference comparisons level 2 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. <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> - `reference_images[]` (one or more image paths) - `generated_screenshot` (current output image) - Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`) <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: Keep $visual-verdict as the authoritative decision. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots. Convert pixel diff hotspots into concrete differences[] and suggestions[] updates. </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." } ``` Task: {{ARGUMENTS}}
Agent 识别该技能的关键词,点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识(skill/v1) |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类(数组) |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接(本页地址) |
| exported_at | 导出时间(每次下载生成) |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数:provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明(Coze / Dify / Claude / 自定义框架) |