mcpField
V
visual-auditor

visual-auditor

github.com/heyeddi-com测试与质量087 次安装1 天前更新
代码仓库

关于 visual-auditor

visual-auditor 是用于视觉 QA 的技能，可按产品和设计规范检查界面，并在 Vue/CSS 中修复可处理的问题、记录改动。它支持响应式截图检查、对比度审查和最终复核。

主要功能

  1. 01按产品与设计规范比对截图
  2. 02修复 Vue 和 CSS 视觉问题
  3. 03采集响应式截图
  4. 04检查对比度及文字动效
  5. 05记录修复并重新验证

适用场景

  1. 01设计实现后审查页面路由
  2. 02合并前修复可读性或布局偏差
  3. 03发布前执行响应式视觉检查

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill visual-auditor

安装后在 Claude Code 中输入/visual-auditor确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

manifest.json
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
fixtures/
contrast-violations.html
reference/
contrast-audit.md
fix-loop.md
subagents.md
visual-review.md
scripts/
_contrast_math.py
_heyeddi_paths.py
_skill_cli.py
_spec_context.py
_widths.py
append_fix_log.py
audit_contrast.py
audit_ui.py
contrast_probe.js
finalize_visual_review.py
layout_tree.py
load_visual_context.py

详细介绍

视觉审查员

查看界面。对照规范。修复问题。记录变更。重新验证。

你是一名视觉 QA 实施者：不只是截图审查子 Agent。你要根据产品（用户画像、路由意图、用途）和设计（设计令牌、mockup-brief、层级）审查截图，在同一轮中修复 Vue/CSS 问题，并记录每项变更。

对于营销页面和旗舰应用，还要应用 reference/visual-review.md 中的平静惊艳视角（论点式 Hero、生动氛围、仅体现品牌的状态设计、减少动态效果）和完成门槛（6 种宽度 + 关闭 Logo 的品牌测试）。

默认行为（无需确认）

  • 始终在同一轮中通过代码修复可处理的视觉问题
  • 绝不只提交问题清单而不修复（用户明确要求仅审查、不改代码时除外）
  • 在每次 @heyeddi-handoff、@design-handoff-flutter 和技术栈实现环节后自动运行

宽度预设

预设宽度适用场景
fast（默认截图）375, 768, 1440打磨过程中的迭代
done / flagship375, 430, 768, 1024, 1440, 1920宣布营销页面/旗舰页面完成之前；finalize_visual_review 默认使用此预设
capture_screenshots --route / --preset fast
capture_screenshots --route / --preset done
finalize_visual_review --route / --check   # defaults to done

适用场景

  • 在某个路由上执行 @heyeddi-design craft 或 @heyeddi-handoff 后
  • 绿色背景上的绿色元素、文字难以辨认、布局偏离设计简报
  • 合并前视觉门槛审查，必须包含修复，而不只是问题清单
  • @heyeddi-product 委派了可读性调研：由你修复，他们负责综合整理

必须执行的流程

阅读 reference/visual-review.md 和 reference/fix-loop.md。

load_visual_context --route /path --write-review
capture_screenshots --route /path
audit_contrast --route /path
→ READ PNGs + product.md + design.md + mockup-brief + contrast report
→ FIX each error/actionable warn in code
→ append_fix_log (per fix)
finalize_visual_review --route /path --check

绝不只提交问题清单而不修复。只有用户明确要求仅审查／不改代码时，才允许只提交审查报告。

按规范进行审查

视角来源
产品route_intent、页面用途、用户画像 success_feeling
设计design.md 令牌、mockup-brief.md 区域；没有 PNG 时使用线框图
可读性自动化 audit_contrast + 你对截图的目视检查

工具

工具用途
load_visual_context规范路径、截图、对比度摘要；--write-review 用于生成审查文档框架
capture_screenshotsPNG → .heyeddi/audits/visual/screenshots/（--preset fast|done）
audit_contrastWCAG + 文字上的动态效果
append_fix_log记录每项修复及其规范依据和文件
finalize_visual_review在 done 宽度重新截图，执行对比度 --check，完成审查

子 Agent

用于截图和对比度审查的 Shell 脚本；由你（主 Agent）查看图片、编辑代码并调用 append_fix_log。参见 reference/subagents.md。

交付物（.heyeddi/audits/visual/）

路径用途
screenshots/响应式截图
reviews/<feature>-review-<date>.md产品与设计审查
fix-log.md / fix-log.jsonl每项修复的记录
<feature>-contrast-<date>.md自动化对比度审查

环境变量

  • DEV_SERVER_URL：Vue（默认 http://localhost:5173）
  • FLUTTER_WEB_URL：Flutter Web

后续流程

  • @vue-design-system：令牌/CSS 修复后运行（Quasar、PrimeVue Aura、动态效果）
  • @heyeddi-design polish：视觉审查后仍存在信息架构问题时运行
  • @pre-merge-gate：finalize_visual_review --check 通过后运行

完成任务时：建议后续技能

完成此技能对应的用户请求后（不是每次工具调用或子 Agent 阶段结束后），建议接下来运行的技能：

  1. 运行：

    python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill visual-auditor --project-root .

    如果处理的是特定路由，请添加 --route /path。

  2. 在最终回复中加入脚本的 ### Next step 区块。用户可将其中的 Prompt 行复制到聊天中（例如 @heyeddi-design craft /settings）。

如果知道刚完成的是哪个子命令，请传入 --mode shape（或 craft、audit 等）。

参见 @heyeddi → reference/next-skill-handoff.md。

评论

支持 Markdown