Claude Code 看得懂圖：截圖報錯直接貼
文 / Coolkid發布：2026-08-07閱讀約 7 分鐘
短答給趕時間的人：Claude Code 看得懂圖片，截圖直接貼進輸入框，或把圖檔拖進視窗都行。報錯文字讀得出來，網頁排版看得懂，設計風格也抓得到。四個我天天在用的場景：①終端機報錯整個截圖丟過去 ②網頁要改哪裡，截圖畫個圈 ③Vercel 後台的錯誤紀錄整頁丟 ④貼一張喜歡的設計叫它照這個方向做。文字描述半天講不清的事，常常一張圖就搞定。
這可能是我用得最勤、卻最少人教的功能。
多數教學花力氣教你「怎麼把需求描述清楚」，但對非工程師來說，有些東西根本不適合用文字描述。
那個報錯的術語怎麼唸？那塊版面叫什麼名字？你都不知道。
我的解法很土：看到什麼就截什麼，圈起來，丟過去。
這個網站的像素風頁面跟我的 link-in-bio 入口，當初都是貼參考圖讓 AI 照著方向做的。
這篇把四個場景、給圖的方法，還有圖不適合的時機一次講完。
先講怎麼給：三步，比傳 LINE 圖還簡單
- Step 1，截圖：Windows 按 Win+Shift+S 框選你要的範圍，截完自動進剪貼簿;要畫圈就順手用內建的截圖工具或小畫家，紅筆圈一下重點。
- Step 2，給它：回到 Claude Code 的輸入框直接貼上;如果貼不進去，把圖存成檔案、用滑鼠拖進視窗(等於把檔案位置交給它)再送出，效果一樣。
- Step 3，配一句話：圖負責「在哪裡、長怎樣」，你的話負責「要幹嘛」，「這個報錯怎麼解」「圈起來的區塊往左移」「配色照這張的方向」。圖加一句意圖，就是完整的交辦。
我的四個日常場景(全部真實)
| 場景 | 以前的做法 | 貼截圖之後 |
|---|---|---|
| 終端機跳紅字報錯 | 手動複製一大串(常複製不全) | 整個畫面截給它，連前後脈絡一起看 |
| 網頁哪裡要改 | 打三行字描述位置，還常被誤會 | 截圖+畫圈，位置與意圖一次到位 |
| Vercel 後台報錯 | 對著錯誤紀錄(log)頁面手抄 | 整頁截圖丟給它，自己讀完整錯誤內容 |
| 想要某種設計感 | 用形容詞描述(每次都失敗) | 貼參考圖：「方向照這張」 |
第一個場景最日常：終端機的報錯有時一大串、有時被視窗截斷，複製起來很煩。
我直接整個畫面截過去。
好處不只省事。AI 看到的是「哪個指令、跑出什麼、在哪一步出錯」的完整脈絡，比你只貼一句錯誤訊息還好診斷。
Vercel 這類雲端後台的報錯同理，錯誤紀錄頁面直接截，不用手抄。
第二個場景是改網頁。「那個標題下面那塊再往上一點」這種話，文字講十次有八次被誤會。
現在我截圖、紅筆圈起來、配一句「圈的地方間距太擠」。
誤會率大幅下降，因為圖已經把「位置」講死了，文字只要負責「意圖」。
第四個場景最好玩：仿設計。
這個網站的像素風頁面、我的 link-in-bio 個人入口，當初都是我丟參考圖說「風格往這個方向」做出來的。
先講清楚期望：仿的是配色、排版、氛圍這種「方向」，不是像素級複印。
丟圖之後還是要來回修幾輪，但比用形容詞從零描述快非常多。
什麼時候該給文字，不該給圖？
圖是不是萬能？當然不是。
分界線一句話：「位置與樣子」用圖，「精確的字元」用文字。
表格數字、長段程式碼、一長串網址，這些要從圖裡一個字一個字「認」出來，認錯一個字元，你就往錯的方向查問題。
能複製成文字的，永遠優先給文字。
我的混合技是兩個一起給：報錯畫面截圖給脈絡，再把關鍵那行錯誤訊息複製成文字一起貼，給精確字元。
兩個各司其職，診斷又快又準。這招對付疑難雜症的成功率，比單給任何一種都高。
口訣：圖管「在哪、長怎樣」，字管「精確內容」。兩個都給，是最強的問法。
三個坑，加一個起手式
- 整頁全截+「幫我看哪裡怪」，大海撈針，它會給你一堆你沒問的觀察。截圖跟提問一樣要聚焦：裁小範圍、畫圈、一張圖講一件事。
- 敏感資訊入鏡，截圖最容易不小心外洩：後台頁面角落的 email、設定畫面裡的金鑰、數據報表。貼之前掃一眼，該遮的遮(這跟「金鑰三不」是同一族的衛生習慣，見登入那篇)。
- 字太小或糊，縮圖、低解析度的截圖，它讀字會出錯。截原尺寸、框重點區域，別把整個 4K 螢幕縮成一張小圖丟過去。
新手起手式：下次終端機跳紅字，忍住不要複製貼上，先截圖丟過去試一次。
你會發現「把問題交出去」的門檻比想像中低得多。
對非工程師來說，貼截圖這套工作流真正的價值是：你不需要知道那個東西叫什麼名字，也能把問題問清楚。
Claude Code 看得懂圖片：截圖貼進輸入框或把圖檔拖進視窗，配一句意圖就是完整交辦。四個天天在用的場景：終端機報錯整畫面截(連脈絡一起看，比手動複製完整)、網頁要改哪截圖畫圈(圖講死位置、文字只管意圖，誤會率大降)、Vercel 後台錯誤紀錄整頁丟、貼參考圖仿設計(本站像素風頁面與 link-in-bio 都是貼參考圖做的，仿方向不是複印)。分界線：位置與樣子用圖，精確字元(程式碼/數字/網址)用文字;混合技=截圖給脈絡+關鍵錯誤訊息複製成文字，成功率最高。三個坑：整頁全截不聚焦、敏感資訊入鏡沒遮、圖太小讀字出錯。核心價值：不知道東西叫什麼名字，也能把問題問清楚。
名詞解釋
- Claude Code
- Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- 終端機（terminal）
- 「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- Vercel
- 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
如果內容對你有用就太好了
隨喜斗內
▸ 常見問題
Claude Code 可以看圖片或截圖嗎？
可以，而且看得懂內容：報錯訊息的文字、網頁的排版結構、設計的配色風格都讀得出來。給法兩種：截圖後直接在輸入框貼上，或把圖檔用滑鼠拖進視窗。記得配一句話講你要它做什麼，圖負責「在哪裡、長怎樣」，你的話負責「要幹嘛」。
貼截圖跟複製錯誤訊息文字，哪個比較好？
能複製成文字的優先給文字，精確字元(程式碼、數字、網址)從圖裡「認」可能認錯。截圖的強項是脈絡與位置：複製不到、被截斷、或需要「前後畫面」才能判斷的狀況。最強的是混合技：截圖給脈絡+關鍵那行錯誤複製成文字，一起貼。
可以叫它照一張設計圖做網頁嗎？
可以，我的像素風頁面跟 link-in-bio 入口都是貼參考圖做出來的，丟圖說「配色與排版照這個方向」。期望要對：它仿的是風格方向(配色/佈局/氛圍)，不是像素級 1:1 複印，丟圖後仍要來回修幾輪;但比用形容詞從零描述快非常多，而且不會雞同鴨講。
貼截圖有什麼要注意的？
三件事：①聚焦，裁小範圍、畫圈，一張圖講一件事，整頁全截等於叫它大海撈針 ②敏感資訊，後台截圖常夾帶 email、金鑰、數據，貼之前掃一眼該遮的遮 ③解析度，字太小或圖太糊會讀錯，截原尺寸、框重點區域就好。
看完這篇之前先確認:
- 常常打一大段字，還是講不清楚哪裡要改的人
- 終端機紅字一大串，懶得複製或根本複製不到的人
- 想拿喜歡的設計當範本，叫 AI 照著做的人
- 要傳表格數字、長段程式碼 (文字比圖準，見第 3 段)
- 想要像素級 1:1 復刻設計 (仿的是方向不是複印)
- 還沒開始用 Claude Code (先看新手村那篇)
- 整頁全截叫它「看哪裡怪」— 大海撈針，圈起來聚焦
- 長串文字用圖傳 — 從圖裡讀字可能讀錯，能複製就給文字
- 截圖夾帶敏感資訊(email/金鑰/後台數據)沒遮就貼