您手上有一張圖片：一個您喜歡的網站，希望自己的頁面也長那樣。這種網站很難用文字描述清楚。"淺色、通透、卡片排三欄、無襯線字體、大標題" - 這句話已經比直接打開圖片還長，而且還是不夠精確。於是就會冒出一個合理的疑問：代理處理的是文字，它到底看不看得到圖片？

看得到。您可以直接把截圖貼進請求裡，代理拿到的是整張圖，而不是您轉述的內容。但圖片只完成了一半的工作說明：它告訴代理該長什麼樣，其他的一概不提。剩下的部分要靠您補上，下面就來看看具體是哪些。

1. 怎麼把圖片交給代理

有兩種方法。

  • 複製圖片並貼到請求輸入框：Ctrl+V，在 Windows 和 WSL 上則是 Alt+V。
  • 輸入 @，從提示裡選擇路徑。

貼上後，請求裡會出現標記 [Image #1]。之後不管是您還是代理，都用這個編號來指這張圖；第二張會是 [Image #2]，以此類推。看起來會像這樣：

[Image #1] 讓我的頁面看起來像這張截圖。

這個標記是 Claude Code 自己加上的，不需要您手動輸入。以上就是一張圖加一句話組成的請求，這樣還不夠，後面會說明原因。如果圖片已經放在專案裡，比如設計師給的樣稿放在 img/ 資料夾下，第二種方法更方便：

@img/reference.png 把 index.html 的樣式調整成這張參考圖的風格。

輸入 @，開始打檔名，Claude Code 就會自動補上路徑。這樣的圖片很容易再次用到：之後任何一次請求裡，只要再寫一次 @img/reference.png 就行，不用重新貼一遍。專案以外的檔案也可以指定，用完整路徑就好。

Kotlin

如果終端機把 Ctrl+V 攔去做別的用途，Alt+V 就能救急。常見格式都支援：PNG、JPEG、WebP，GIF 也行，只是動畫只有第一個影格會傳給代理。手機截圖沒問題。拍螢幕的照片就差一點：反光和角度歪斜容易讀錯。

順序也有講究：先圖片，後文字。這樣代理表現更好，對您來說也更順手 - 先給個直觀印象，再解釋細節。

圖片也會佔用空間

截圖和文字一起留在對話裡，代理每一輪都要重新讀一次。放個一兩張參考圖沒問題。連續放十張，工作階段就會明顯變重，而已經用完的圖片也沒必要帶進新任務裡。

2. 代理從圖片裡看到什麼

代理看到的是圖片本身，不是一段描述。傳送前，大張截圖會先被縮小，所以您螢幕上很細小的地方到了代理那邊可能就糊成一團。它能穩定讀出的是大方向：由上到下有哪些區塊、順序是什麼、它們的比例、頁面是淺色還是深色、強調色是什麼、看得清楚的文字，以及整體氛圍 - 緊湊還是通透、邊角是直角還是圓角。

有個簡單的方法能確認代理看的和您看的是同一件事：改動之前，先請它把參考圖描述一遍，什麼都不要改。花不到一分鐘。回答大概會像這樣：

淺色頁面。頂部是一條窄窄的頁首，名稱在左邊，三個連結在右邊。
下面是兩行的大標題，底下接一小段文字。
再往下是一排三張卡片，寬度一樣，上面是圖片，下面是文字。
強調色只有一個，深藍色：頁首的按鈕和底線都是這個顏色。
區塊之間留白很多，邊角是圓角，幾乎沒有陰影。

您自己的參考圖會得到它自己的描述，裡面很可能會出現色碼、"間距大約 24 像素"、字體名稱這類內容。這只是用眼睛估的，不是拿滴管量色、拿尺量距離：這類數字要拿去跟參考圖對照著看，而不是當成量測結果來用。第一輪能給出正確的方向，但不會做到一模一樣。這是圖片本身的特性，不是代理的失誤，下面會說明原因。

3. 圖片裡沒有的東西

能穩定讀出看不到，或只能大概看出
區塊的排列和順序精確的像素尺寸 - 只能大概
色調和強調色色碼 - 只能大概
字體的整體感覺字體名稱 - 只會挑一個相近的
讀得清楚的文字非常小的文字和圖示 - 縮小後就糊掉了
整體氛圍：留白、圓角、對比互動行為：滑鼠懸停、點擊、動畫 - 完全看不到
畫面裡拍到的部分其他頁面、手機版畫面、畫面之外的東西 - 完全看不到
大元件有幾個，通常算得準小元件的精確數量 - 只能大概

24 像素的間距，代理會說成"大約 24"，誤差可能到三分之一；色碼會給一個相近但不完全一樣的；字體會挑一個風格接近的。滑鼠懸停、點擊、動畫、其他頁面、手機版畫面 - 這些截圖裡都沒有，代理不會主動知道，除非您說出來。

代理不會畫圖

參考圖裡的圖片、標誌和插畫，不會自動出現在您的頁面上。代理看得懂圖片，但畫不出新的。自己的圖片要自己放進專案資料夾，並告訴代理它們放在哪裡。

裁切，而不是放大

如果某個小細節很重要，把截圖裁到只剩那部分，另外當成第二個檔案交給代理 - 自己裁，或者請代理幫忙裁出需要的區域。但不要為了讓文字看起來更大，就把周圍全部裁掉：代理需要看到這個部分放在哪裡、旁邊還有什麼。

另外說一下手機。截圖是在某一個螢幕寬度下拍的，代理看到的也就只有這個寬度。如果手機版的樣子很重要，而且參考網站可以用連結打開，就再從手機拍一張：兩張截圖，兩個標記。少了第二張截圖，窄螢幕的樣子就只能用文字描述，做出來的結果會是代理理解的版本，而不是參考網站本身的樣子。

4. 該用文字補上什麼

圖片回答了"該長什麼樣"，還有另外四個問題它答不了。您該做的，是給出參考圖，再說清楚要拿它做什麼。四行字，之後也用這四行來核對結果。

參考圖裡最重要的是什麼。顏色？卡片的排列方式？頁首？字體的整體感覺？沒有這句話，代理會把所有東西都學一點、平均起來，而平均出來的結果通常不是您要的。這句話的內容其實現成就有：從代理一開始給您的描述裡挑就行。

哪些東西要保留。文字內容、頁面結構、連結、自己的圖片。不然代理可能會照著參考圖把您的標題也改掉 - 畢竟參考圖上的標題本來就不一樣。

哪些東西不要照搬。標誌、別人的文字、別人的商品、別人的照片。參考圖給的是風格，不是內容。

邊界。只做一個頁面，只改 index.html 和 style.css，不加函式庫也不搞建置流程。哪些地方不能動。

放在一張圖片旁邊，這四行看起來有點囉嗦。少了它們，結果會很好看，但不是您要的那個，而重做一次花的時間比寫這四行還久。

5. 完整的一個請求

圖片放最前面，四行文字接在後面：

[Image #1] 把我的頁面調整成這張參考圖的風格。
最重要的：淺色色調、卡片排三欄、無襯線大標題。
文字、結構和我自己的圖片都保持原樣。
標誌、照片和參考圖上的文字都不要照搬過來。
只改 index.html 和 style.css，不用任何函式庫。

圖片後面這四行，剛好就是圖片裡沒有的那四樣東西。

C++

代理通常會回覆它從參考圖裡拿了哪些東西，並修改檔案。第一次的結果是個方向，不是複製品。接下來用文字微調，而且可以講得很短，因為參考圖已經在對話裡了，不需要再貼一次：

卡片再更貼近參考圖一點：陰影再柔和一些，圓角再大一點，卡片之間再多留一點空間。

等代理說"完成了"，就把參考圖和自己的頁面並排打開，照您那四行逐一核對。如果結果整體上都跟參考圖差很多，不要拿同一張圖重複同一個請求：先找出差最多的那一個點，一次改一個。"照著圖片做好了"這種回報不能代替核對，講得越有把握越是如此。

6. 該記住的重點

  • 圖片定樣子，文字定邊界。少了任何一邊，結果不是"不對"就是"拖很久"。
  • 代理從圖片裡拿到的是大方向：結構、比例、色調、整體感覺。細節和互動行為要靠您自己補。
  • 第一輪只是給個方向。之後的微調可以很短，因為參考圖已經在對話裡了。
  • 圖片不只能當風格參考。凡是用文字描述會比直接給圖還長的地方，都值得直接把圖交出去。
錯誤截圖比轉述好用

主控台裡的紅色文字、莫名跑版的區塊、看不懂的訊息視窗 - 直接截圖，原樣交給代理。您原本要手動打出來、還可能打錯字的內容，代理能直接從圖片裡讀出來。

"照著這個做"依然是個不錯的開場。加上這四行、再把結果和參考圖放在一起看一眼之後，它才會變成一份真正好用的工作說明。

快捷鍵和圖片標記的樣子可能在新版 Claude Code 裡有所不同；但傳遞圖片的方式，以及代理能看到什麼的邊界，不會隨版本改變。