比較設計稿與測試網站的畫面差異

提供測試網站、設計稿版本、視窗尺寸與指定頁面狀態，使用可查看頁面的工具比對。

執行環境與使用方式

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?