比较设计稿与测试网站的画面差异

提供测试网站、设计稿版本、视窗尺寸与指定页面状态，使用可查看页面的工具比对。

执行环境与使用方式

AI／软件

Claude in Chrome side panel + connected Claude Desktop

在哪里操作

Google Chrome 中 Claude in Chrome 扩充功能的侧边栏；要操作页面时保持 Claude 桌面程式连线。

如何开始

  1. 在已安装并登入 Claude in Chrome 的 Google Chrome 开启测试网站，点工具列 Claude 图示开侧边栏。
  2. 提供设计稿版本、视窗尺寸、语言及指定页面状态；只授权测试页，涉及操作时保持 Claude 桌面程式开启。
  3. 要求逐项比较画面与互动差异，附位置或截图，标记无法观察项；不操作正式资料。
  4. 无法使用扩充功能时，由本人依相同尺寸和状态截取设计稿与测试页，透过 ChatGPT 的 + → Add photos & files 上传比较。此法只比较提供画面，不验证未截取互动。

准备与方案条件

需要测试页读取权限与设计稿；涉及操作时另需浏览器控制功能。

提示词移植限制

成对截图可改用看图对话；实际网站状态与可重现操作需浏览环境。

使用限制

来源工具名称保留作历史记录。本练习未实测；方案、地区、工作区及外部网站限制需另行核实。Cowork 正逐步与 Claude 对话整合；本地文件及浏览操作仍需相应桌面连接，不应由介面名称推定权限。

环境资料来源

適用情境 / When to use

提供测试网站、设计稿版本、视窗尺寸与指定页面状态，使用可查看页面的工具比对。输出差异位置、画面证据及无法观察之处，不修改程式或正式资料。 来源记录：PathFormer 自述让 Claude 浏览器扩充功能比较 HTML 设计稿与应用程式，产出介面差异文件。

步驟 / Steps

  1. 准备可读取的测试网站、设计稿版本、视窗尺寸及不含个资的测试帐号。
  2. 按指定画面与操作状态比对，区分视觉差异、互动差异及无法观察的部分。
  3. 每个差异附截图或位置，人工确认设计稿是否仍有效。

提示詞 / Prompt

比较［测试网站］与［设计稿版本］的［指定画面与状态］，使用［视窗尺寸与语言］。列出可重现差异、证据位置及未知项，不强加风格偏好、不改程式、不操作正式资料。

留意事項 / Cautions

  • 不要将刻意改版自动当成错误。
  • 只读测试页，不点击付款、删除或正式提交。

來源限制 / Evidence limits

这是简短使用者自述，没有缺陷侦测率或完整操作纪录。

流程說明 / Workflow note

以下步骤与提示词为本站原创、未实测的练习设计，并非原作者逐字流程；来源结果不代表练习保证成功。

原始工具組合 / Original tool stack

Claude in Chrome；HTML 设计稿；浏览器应用程式

来源查核日期：2026-10-19

Do you actually use the Claude Chrome extension? If so, how?