Claude Code 学习站
Mingyu's Library

学习站 / 实战 Tip / C · 设计与素材

截图对比让它自判 UI

「改得好不好看」不该由你每轮刷新页面当裁判——给它设计稿,让它自己截图、自己对比、自己改到像为止。

UI 任务最耗人的地方是验证:每改一轮你都要亲眼看一次。官方 best practices 的解法是把「看」也交给 Claude——截图就是一种它能自己跑的检查,和测试、构建退出码同级。这一页讲怎么把这个循环搭起来。

一句话结论

结论 把目标设计图贴进对话,要求 Claude 实现后「截当前效果的图、和设计稿对比、列出差异并修复」,循环到差异清零。官方这是官方 best practices 原文给出的 pattern:「[paste screenshot] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them」;截图通道浏览器用 Claude in Chrome,原生 app 用 computer use。

做法步骤

  1. 准备目标图。Figma 导出、竞品截图、甚至手绘线框都行,直接复制粘贴或拖拽进 prompt。官方文档确认图片可以 copy/paste 或 drag & drop 进对话。预期:Claude 回复里能准确描述图上的布局说明它读到了。
  2. 打通「它自己截图」的通道。按目标平台选:官方
    目标通道前提
    Web 页面claude --chrome 连 Claude in Chrome 扩展扩展 ≥1.0.36;Pro/Max/Team/Enterprise 直连账号,/login 登录(API key 认证下不可用)
    macOS 原生 app/mcp 里启用 computer-usemacOS research preview;Pro/Max;需授予 Accessibility 与 Screen Recording 权限
    iOS app桌面版 iOS Simulator pane / CLI 走 computer use见 iOS 模拟器里跑起来才算做完
    用 /chrome 检查连接状态(要看到 Status: Enabled、Extension: Installed)。官方能力列表明确包含这个场景:按 Figma 稿建 UI,然后开浏览器验证是否一致。
  3. 发「实现→截图→对比→修复」循环 prompt。见下方可抄版本。预期:Claude 每轮贴出一份具体的差异清单(如「主按钮圆角偏小」「卡片间距 16px 应为 24px」),修完再截再比,而不是一句「已按设计稿实现」。本站观点差异清单是这个方法的灵魂——强制它逐项写出来,才能防止「看起来差不多」蒙混过关。
  4. 要求证据留档。官方让它把最终截图存盘(「take a screenshot and save it to disk」,需 v2.1.211+),或把整个交互流程录成 GIF;审证据比你自己重跑验证快,也适用于你不在场的会话。注意 computer use 的截图会自动降采样(如 3456×2234 降到约 1372×887),界面文字太小时应调大 app 内字号而不是改屏幕分辨率。
  5. 想挂机跑,就把对比设成硬性关卡。官方best practices 给了升级路径:同一条 prompt 里要求循环是最轻的;更硬的是把「截图与设计稿无重大差异」设为 /goal 条件(每轮由独立评估器复查),或用 Stop hook 跑对比脚本拦住结束。通用做法见 给它能自己跑的验证。

可直接抄的 prompt

[把目标设计图粘贴在这里]
按这张设计稿实现页面,并用截图对比闭环验证:
1. 先列出你从设计稿读到的关键规格:布局结构、配色、字号层级、间距、圆角,和我确认。
2. 实现后打开 localhost:3000 的对应页面,截一张当前效果的图。
3. 把截图和设计稿逐项对比,输出差异清单(位置 + 现状 + 应为),不许写「基本一致」。
4. 逐项修复,再截图再对比,直到没有可见差异;每轮都把差异清单贴出来。
5. 结束时把最终截图存到 screenshots/ 目录,汇报共迭代几轮、还遗留哪些说明不了的差异。

来源与最后核实日期