视觉验证闭环用于让智能体在修改 Vue 界面后真正“看到”渲染结果并自我修正。组件级 MCP（如 @primevue/mcp、@quasar/mcp）理解组件代码但不渲染像素，因此本技能改用 Playwright MCP（@playwright/mcp）打开实时 Vite 页面并截图检查。资料明确要求不要使用 Puppeteer 或 @modelcontextprotocol/server-puppeteer。
适用时机：在完成任何主要 UI 组件、布局改动或仪表盘视图之后；在 GUI 表面运行 @motion-physics 之后；检查移动端抽屉与桌面布局对比时；以及怀疑存在对比度、重叠或非预期滚动条问题时。该技能不用于 CLI，终端对齐应使用 @cli-interface-design。@visual-auditor 仍负责记录完成审查（对比度报告、宽度、修复日志），本条闭环应在开发服务器热更新期间先运行，并在该审查前修正代码。
反馈循环：智能体写 Vue 代码到文件 → Vite 开发服务器（localhost:5173）热重载 → 依次执行 browser_navigate、browser_resize、browser_take_screenshot → 智能体检查渲染图像 → 在代码中修复缺陷，重复直到截图没有重叠、断裂换行、内边距错位或原始未样式化字体为止。不要在未阅读截图的情况下宣布 GUI 任务完成。
MCP 服务器配置： { "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest"] } } }
命令要求开发服务器已运行在 http://localhost:5173。导航时，哈希路由保留 #/…，历史路由使用无哈希路径。先调整尺寸再截图，两个视口都要执行；browser_take_screenshot 不接收宽高，宽高由 browser_resize 设定。桌面视口 1440×900，文件名 .heyeddi/docs/visual-verification/dashboard-desktop.png；移动（iPhone 14）视口 390×844，文件名 dashboard-mobile.png。截图参数示例：filename 为对应路径，scale: css，fullPage: true。读取保存的 PNG，检查重叠、flex 换行断裂、与 token 比例不符的内边距、未样式化字体以及布局未预期的水平滚动。然后编辑 Vue 或 CSS，等待 HMR，再次截图。默认进行一轮修复，仅当第一张截图仍有缺陷时才进行第二轮。browser_snapshot 是无障碍树，用于查找控件；视觉问题使用 browser_take_screenshot。
操作说明：确认 http://localhost:5173 有响应，若无响应则启动项目已有的 Vite 服务器再导航；在宣布屏幕完成前必须捕获桌面和移动两种视口；修复代码，而不是只列出缺陷；@visual-auditor 在本闭环之后按流水线要求运行并记录审查，不要把本截图当作审计文件而跳过该关卡。任务完成时，资料建议运行 python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill visual-verification --project-root . 并将脚本的 ### Next step 块包含在最终回复中。