用 screenshot 跟 Claude 溝通

TL;DR

• Ctrl+V（不是 Cmd+V，Mac 也是用 Ctrl+V）把螢幕截圖貼進 Claude Code 對話框
• 圖適合 UI bug、版面位置、設計稿轉 code 這類「指給它看比較快」的事
• 圖 + 一句話 prompt 一起送，效果比純文字描述好很多

一個情境：把按鈕從左邊移到中間

頁面左側有一塊 placeholder 文字，你想把它移到面板正中間。

純文字要怎麼描述？

「把 <MainPanel> 裡那段 placeholder——就是顯示『開始輸入訊息』那段——的容器加上 flex justify-center items-center，然後文字本身置中，注意外面那層 padding 不要動到 sidebar 的對齊……」

寫到一半你已經煩了。換個做法：

1. 截圖那塊區域
2. Ctrl+V 貼到 Claude Code
3. 打：「把這段 placeholder 置中」

Claude 看著圖找到對應 component，自己改完。一張圖省掉一整段定位描述。

Ctrl+V 不是 Cmd+V

Mac 用戶第一次用幾乎都會反射性按 Cmd+V——結果貼進去的是剪貼簿裡的文字（或一段 file path），不是圖。

Claude Code 故意把貼圖綁在 Ctrl+V：

• Cmd+V（Mac）/ Ctrl+V（Win/Linux）→ 系統預設的貼文字
• Ctrl+V（所有平台）→ Claude Code 的貼截圖

兩個分開，剪貼簿裡同時有文字跟圖才不會打架。

什麼時候圖比文字快

圖的優勢是空間資訊——位置、對齊、顏色、層級。文字描述這些東西很慢，而且容易被誤解。

場景	為什麼圖贏
UI bug（按鈕跑版、文字溢出）	一眼看出哪裡不對，文字描述要寫一段
設計稿轉 code	Figma 截圖 + 「做出這個 card」比逐項描述 spacing 快 10 倍
複雜表格 / 圖表	直接讓 Claude 讀結構，不用人工敲 markdown table

反過來，有些東西文字才精準：

• API endpoint 規格（POST /users/:id 的 request body schema）
• 純邏輯（「if A 且 B 就 ...，否則 ...」）
• 檔名、變數名、commit hash 這類字串

讀者最常誤解的點：以為「貼圖一定比較快」。圖也是 token，而且通常比同樣資訊量的文字更貴、更慢。能用一行精準文字講清楚的事，不要貼圖。

圖文複合 prompt：短就好

最有用的模式是「圖 + 一句指令」：

[貼圖]
把這個圖示換成 lucide 的 Sparkles

[貼圖]
這個 card 在 mobile 會跑版，幫我修

[貼圖]
左側 sidebar 太擠，spacing 加大一點

不要在 prompt 裡再把圖的內容描述一次——Claude 看得到圖。你只負責指動作：「換掉」、「修」、「加大」。

一個進階用法

source materials 那段影片裡有個更實際的例子：對話介面顯示 String Replace Editor 這種太工程的字眼，作者想換成「正在建立檔案 app.jsx」這種對使用者友善的訊息。

他做的事：

1. 截圖那塊「String Replace Editor」UI
2. Ctrl+V 貼進去
3. 打：「把這段文字換成更 user-friendly 的訊息，要處理 create / edit / delete 各種情況」

Claude 從那個截圖反查到對應 component，自己讀相關檔案，改掉文案。圖的角色是錨點——告訴 Claude「我講的是這裡」，剩下的研究跟實作 Claude 自己做。

接下來

下一篇 控制 context——既然我們講到怎麼把資訊送進去（文字、圖、檔案），下個維度就是控制 Claude 看到什麼：哪些檔案進 context、哪些不進、context 滿了怎麼辦。