verify-artifact

验证产物

比 /done 更深入的检查——通过视觉检查实际渲染效果，并标记视觉问题，而不仅仅是控制台错误。

流程

1. 确保预览已打开： 如果 $0 尚未在 Chrome DevTools MCP 中打开，先通过 /preview $0 导航到该页面。

2. 针对幻灯片的预检查（如果存在 <deck-stage>）。 幻灯片会在各个区块上设置 overflow: hidden——垂直溢出在视觉上不会显现，因此仅靠视觉检查会漏掉它。截图前，还要使用缓存清除参数强制重新加载，确保浏览器渲染的是磁盘上当前的 CSS，而不是上次编辑前的缓存状态：

   mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true })
   

   然后运行程序化审计：

   // mcp__chrome-devtools__evaluate_script
   async () => {
     const stage = document.querySelector('deck-stage');
     if (!stage) return { isDeck: false };
     const DECORATIVE = '.glow, .glow-2, .hero-glow, .chrome, [data-decorative], [aria-hidden="true"].backdrop';
     const isDecorative = (el) => {
       if (el.matches(DECORATIVE) || el.closest(DECORATIVE)) return true;
       const cs = getComputedStyle(el);
       if (cs.pointerEvents === 'none' && !el.textContent?.trim() && parseFloat(cs.opacity) < 1) return true;
       return false;
     };
     const out = [];
     for (let i = 0; i < stage.totalSlides; i++) {
       stage.goToSlide(i);
       await new Promise(r => setTimeout(r, 80));
       const s = stage.querySelectorAll('section')[i];
       const sRect = s.getBoundingClientRect();
       const scale = 1080 / sRect.height;
       let maxBottom = 0, culprit = null;
       for (const el of s.querySelectorAll('*')) {
         if (isDecorative(el)) continue;
         const cs = getComputedStyle(el);
         if (cs.display === 'none' || cs.visibility === 'hidden') continue;
         const r = el.getBoundingClientRect();
         if (r.height === 0 && r.width === 0) continue;
         const b = (r.bottom - sRect.top) * scale;
         if (b > maxBottom) { maxBottom = b; culprit = el.className?.toString?.().slice(0, 40) || el.tagName; }
       }
       const contentBottom = Math.round(maxBottom);
       const overflow = contentBottom - 1080;
       const headroom = 1080 - contentBottom;
       const status = overflow > 0 ? 'FAIL' : headroom < 40 ? 'WARN' : 'OK';
       out.push({ slide: i + 1, contentBottom, overflow, headroom, status, culprit });
     }
     stage.goToSlide(0);
     return { isDeck: true, slides: out };
   }
   

   严重级别：

   • FAIL（overflow > 0）——P0。内容被悄然裁切。报告幻灯片列表和问题类名；跳过其余验证，并告知 Claude 修复。
   • WARN（headroom < 40）——P1。内容与边缘过于接近（字体度量差异可能导致溢出）。报告为轻微问题。
   • OK——继续。

3. 截取新的屏幕截图并保存到带时间戳的路径：

   ts=$(Bash(date -u +%Y%m%dT%H%M%SZ))
   mcp__chrome-devtools__take_screenshot({ filePath: `.claude/verify-${ts}.png`, fullPage: true })
   

   对于通过溢出审计的幻灯片，还要抽查位置 [0, mid, last] 的幻灯片，并保存为 .claude/verify-${ts}-slide-${n}.png——逐张进行视觉检查，而不只是检查当前视口。

4. 通过视觉检查屏幕截图： 使用 Read 工具读取 .claude/verify-<ts>.png——Claude 支持多模态输入，可以查看图像。

5. 获取控制台信息： 调用 mcp__chrome-devtools__list_console_messages——收集所有严重级别的信息。

6. 综合图像和控制台信息进行判断。 按照 Claude Design 的设计规范检查：

   • 排版：在 1920×1080 幻灯片上，文字 ≥ 24px；打印内容 ≥ 12pt；移动端点击目标 ≥ 44px；层级清晰易读；不使用 AI 滥用字体（Inter、Roboto、Arial、Fraunces）
   • 布局：无溢出、裁切或错位；间距节奏一致
   • 颜色：正文文本对比度 ≥ 4.5:1；使用品牌或设计系统的配色；不使用自行编造的颜色
   • 内容：不应残留可见的 Lorem ipsum 或 TODO 标记，也不应有填充内容
   • AI 滥用设计套路：不使用激进渐变、带左侧强调边框的圆角卡片、缺乏品牌依据的表情符号或 SVG 绘制的图像（应使用占位符）
   • 控制台：错误、React 水合不匹配、CORS、缺失资源

7. 严重级别标准：

   • P0——产物无法正常使用（崩溃、空白页面、严重溢出）
   • P1——外观有问题（对比度不达标、违反排版规范、布局错误）
   • P2——可以改进（间距不一致、轻微色彩偏差）
   • P3——细枝末节

8. 通过时保持安静： 如果没有 P0/P1 问题，且控制台无异常，只回复一行：verify-artifact: OK。

   • 通过时不要输出任何其他内容，否则只会造成干扰。

9. 报告： 如果发现问题，按严重级别列出，并提供屏幕截图坐标或足够精确的元素描述，以便 Claude 修复：

   [P1] Header h1 at top-left is 18px — should be ≥ 32px for slide context
   [P2] Footer contrast 3.2:1 vs 4.5:1 minimum — lighten text or darken bg
   

10. 自动修复循环（仅在用户提出要求时）：修复每个 P0/P1 问题，然后重新运行 verify-artifact。

可选深入检查

如果用户要求深入检查，请运行：

• mcp__chrome-devtools__performance_start_trace——LCP/CLS/INP
• mcp__chrome-devtools__lighthouse_audit——a11y / best-practices / SEO

这些检查需主动选择；默认验证仅检查屏幕截图、控制台和视觉效果。

替代方案：并行后台检查

对于规模很大的产物（20 张以上幻灯片），如果验证耗时较长，可考虑通过 Agent 工具（内置于 Claude Code）启动子 Agent，并行执行视觉检查，同时继续工作。在提示词中提供屏幕截图路径和控制台转储。这是可选的——大多数产物都适合直接进行内联验证。