您手上有一张图：一个您喜欢的网站，希望自己的页面也长这样。这样的网站用文字很难说清楚。"浅色、通透、卡片分三列、无衬线字体、标题偏大" - 这段话已经比直接打开图片还长，还是说不准。于是就有了一个合理的问题：智能体处理的是文字，它到底能不能看图？
能看。您可以把截图直接粘进提示词，智能体拿到的是整张图，而不是您对它的转述。但图片只交代了任务的一半：它说明了应该长成什么样，其余的一概没说。剩下的部分要您自己补上，下面具体讲是哪些。
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 就行，不用重新粘贴。项目外的文件也可以指定，用完整路径就行。
如果终端把 Ctrl+V 占作他用，Alt+V 能救场。格式没什么特别的：PNG、JPEG、WebP，GIF 也行，只是动图的话，智能体只拿得到第一帧。手机上截的图没问题。屏幕的实拍照片就差一些：反光和角度倾斜容易读错。
顺序也有讲究：先图片，后文字。这样智能体处理得更好，对您也更方便 - 先给它看，再解释。
截图会和文字一起留在对话里，智能体每一轮都会重新读一遍。放一两张参考图没问题。连着放十张，会让会话明显变重，用完的图片也没必要带进新任务。
2. 智能体从图上看到了什么
看到的是图片本身，不是对它的描述。大尺寸截图在发送前会被缩小，所以您屏幕上的细小部分，到了智能体那里可能就糊在一起了。大的东西它能稳妥地读出来：有哪些区块、从上到下什么顺序、它们的比例、页面是浅色还是深色、强调色是什么、能看清的文字内容、整体感觉是紧凑还是通透、边角是方的还是圆的。
有个简单的办法能确认智能体和您看到的是同一件事：改动之前，先让它复述一遍参考图，不做任何改动。用不了一分钟。回答大概是这样：
浅色页面。顶部是一条窄窄的页头，左边是网站名称，右边是三个链接。
下面是一个两行的大标题，标题下面是一小段文字。
再往下是一排三张卡片，宽度一样，图片在上，文字在下。
只有一个强调色，深蓝色：页头的按钮和下划线用的都是它。
区块之间留白很多，边角是圆的，几乎没有阴影。换成您的参考图，它给出的复述会不一样，里面很可能会出现颜色代码、"间距大约 24 像素"这样的说法，还有字体名称。这些都是凭肉眼估的，不是用取色器量的，也不是用尺子量的：这类数字要拿去跟参考图核对，不能当作精确测量值。第一轮给出的是正确方向，不会做到分毫不差。这是图片本身的局限，不是智能体的失误，下面会说明原因。
3. 图上没有的东西
| 能稳妥地读出来 | 看不到，或者只能大致看出来 |
|---|---|
| 区块的位置和顺序 | 精确的像素尺寸 - 只是大概 |
| 色调和强调色 | 颜色代码 - 只是大概 |
| 字体的整体风格 | 字体名称 - 会挑一个相近的 |
| 能读清楚的文字 | 很小的文字和图标 - 缩小之后就看不清了 |
| 整体感觉：留白、圆角、对比度 | 行为：悬停、点击、动画 - 完全看不到 |
| 取景框里的内容 | 其他页面、手机上的样子、画面之外的东西 - 完全看不到 |
| 大元素的数量，一般能数对 | 小元素的精确数量 - 只是大概 |
24 像素的间距，智能体会说成"大约 24"，误差可能到三分之一；颜色代码给出的是相近值，不是准确值；字体会挑一个风格接近的。悬停、点击、动画、相邻页面、手机上的样子 - 这些截图里都没有，您不说，智能体就无从知道。
参考图里的图片、logo 和插图不会自动出现在您的页面上。智能体能理解图片，但不会画新的。您得自己把需要的图片放进项目文件夹，并告诉它放在哪里。
如果某个细节很重要，就把截图裁到那部分，作为第二张图发给智能体 -自己动手裁，或者让智能体帮忙截取那块区域。但不要为了让文字看起来更大就把周围全部裁掉：智能体需要看到这部分处在什么位置、周围是什么。
再说说手机。截图只是在一个屏幕宽度下拍的，智能体也只能看到这一个宽度。如果手机上的效果很重要，而且参考图能通过链接打开，那就再拍一张手机上的截图：两张图，两个标记。没有第二张图，窄屏的样子就只能靠文字描述，出来的结果就是智能体理解的样子，而不是参考图的样子。
4. 还要用文字补上什么
图片回答了"应该长成什么样"这个问题，但还有另外四个问题它答不了。您这边的工作，就是给出参考图，再说清楚拿它来做什么。四句话，之后也拿这四句话来核对结果。
参考图里最重要的是什么。 颜色？卡片的网格布局？页头？字体的整体风格？没有这一句，智能体会把所有东西都拿来平均一下，平均出来的结果往往不是您想要的。这句话的措辞您手头已经有了：直接用智能体一开始给出的那段复述。
自己这边要保留什么。 文字、页面结构、链接、自己的图片。不然智能体可能会照着参考图把标题也改了 - 参考图上的标题本来就是另一套。
不要照搬什么。 logo、别人的文案、别人的商品、别人的照片。参考图给的是风格，不是内容。
边界。 只改一个页面，只能改 index.html 和 style.css，不引入库，不加构建步骤。哪些地方不能动，要说清楚。
这四句话摆在图片旁边看着挺啰嗦。可没有它们，做出来的东西好看是好看，但不对，返工花的时间比写这四句话要长得多。
5. 完整的一条提示词
图片放最前面，四句话跟在后面：
[Image #1] 把我的页面调整成这张参考图的风格。
最重要的是：浅色配色，卡片分三列，标题用无衬线大字体。
文字、结构和我自己的图片保持不变。
不要照搬参考图上的 logo、照片和文案。
只能改 index.html 和 style.css，不要引入任何库。图片后面的这四句话，正好就是图片上没有的那四样东西。
智能体回复时通常会列出它从参考图上拿了哪些东西，然后去改文件。第一次的结果是个方向，不是复刻。之后用文字继续微调，而且可以说得很短，因为参考图已经在对话里了，不用再发一遍：
卡片再靠近参考图一点：阴影更柔和，圆角更大，卡片之间留白更多。智能体说"做完了"的时候，把参考图和自己的页面放在一起，照着您那四句话逐条核对。如果结果整体上和参考图差得远，不要再发一遍同一张图、同一句要求：挑出问题最大的那一点说清楚，一次改一处。"已经做得跟图上一样了"这种汇报，不算是核对过了，哪怕说得再有把握也一样。
6. 要记住的几件事
- 图片定的是外观，文字定的是边界。少了哪一个，要么做出来的不对，要么就得反复来回。
- 智能体从图片上拿到的是大的东西：结构、比例、色调、整体风格。小的细节和行为都要靠您自己补上。
- 第一轮出来的是方向。后续微调可以很短，因为参考图已经在对话里了。
- 图片不光能当参考图用。凡是用文字描述比直接给图还要长的地方，都可以拿图片来说话。
控制台里的红字、莫名跑偏的区块、看不懂的弹窗信息 - 直接截图，原样发给智能体。您自己抄一遍难免打错字，智能体从图上能直接读出来。
"照这个做"依然是个不错的开场。加上这四句话，再看一眼结果和参考图放在一起的样子，它才真正变成一份靠谱的任务说明。
快捷键和图片标记的样式在新版 Claude Code 里可能会变，但传图的方式和智能体能看到什么的边界，不会随版本变化。
GO TO FULL VERSION