第 2 章 · 第 1 课 · 日常工具箱
活动执行单能用,但丑。你脑子里有画面,甚至已经在纸上画了一张海报草图——可版式这种东西,用文字怎么说都说不清。能不能直接把图给它看?
能。Claude Code 看得懂截图、照片,甚至手绘线稿。这节课让它照你的草图换掉执行单的头部版式,顺手学会贴图的另外两种日常用法。
- 01脑子里的画面,怎么原样给它看,而不是费劲翻译成文字?
- 02桌面拖拽、终端拖拽、@ 引用,三种给图方式各在什么时候用?
- 03它照着图改完,怎么确认正文四个区域一个字没动?
这是整门课门面成品的第一次视觉跃迁——而且是照你手绘的草图改的。
活动执行单和 4 份素材原样保留。本课新增一张手绘草图,建议下载后放进项目文件夹——想用 @ 引用,图就必须在项目里。
01先看清三种给图方式:图真正进了消息,它才看得到
给图的手法一共三种,点下面的按钮逐个看清“怎么做、发送前确认什么、什么时候顺手”。
三种方式殊途同归:图真正进了这条消息,它才看得到。只嘴上说“我有一张草图”,它什么也看不见。
把脑子里的画面画出来给它看。本课主线。
红字报错、弹窗、页面错乱——截图比你转述准确得多。
把别人成品的截图给它:“照这个感觉做我的页面。”
为什么它能看懂手绘草图?
因为它看的是图像本身,不是文件名。把「海报草图.png」改名成「随便.png」,它看到的内容一模一样;反过来,文件名起得再准确,图没附上就等于没给。
手绘线稿之所以够用,是因为它从图里读的是版式关系:什么在上、什么更大、什么成组。这些信息粗线条就能表达,不需要你画得好看。
02真实操作:把草图交给它,让它照着改头部
- 把草图放进消息
桌面端:把 png 拖进输入框,或复制后粘贴。CLI:把文件拖进终端窗口(会变成文件路径,最稳),或输入
@海报草图.png引用项目里的图。 - 复制下面整段任务一起发送
发送前确认:这条消息里既有图(或文件路径),也有任务文字。
- 先看它的复述,再看它动手
任务里要求它先描述草图。复述错了立刻纠正,别等它改完。
随消息附上 海报草图.png,任务文字如下:
这张手绘草图是「活动执行单.html」头部的目标版式。 动手前,先用几句话描述你在草图里看到了什么。 然后只改头部:照草图做出超大标题、右上角圆形日期贴纸、底部一排信息胶囊。 头部原有的关键信息(日期、时间、地点、人数、负责人)一个都不能丢,只是换版式呈现。 硬性边界:「开放日素材」文件夹保持只读;“流程安排”“人员分工”“物料状态”“现场提醒”四个区域一个字不动。 改完逐项汇报:头部改了什么、四个区域是否原样。
03应该看到什么,以及不像的时候怎么办
发出后你应该看到:它先复述草图——超大标题、右上角日期贴纸、底部三个胶囊——然后才开始改文件。改完打开(或刷新)执行单,应该看到头部换成海报版式;往下滚,四个区域原文未动。记住上一课的教训:汇报不是证据,自己滚一遍才算数。
走错了怎么办:版式不像,先把差异用一句话说死——“日期贴纸要压在标题右上角,不是并排”。还不像,就再贴一次图,这回先用系统标注工具在图上把重点圈出来再发。要是四个区域被动了,让它按汇报逐项恢复,再用上一课的验收工具重跑一遍——素材指纹应该依旧全部一致。
什么图它看不清?
两类图最容易翻车:一是过小的文字,比如整页缩成一团的长截图;二是太密的表格,几十行小字挤在一张图里。发之前自己先眯眼看一下:你都看不清的,它多半也看不清。
对策:把关键区域裁剪放大再发;密表格别截图,直接把文件给它。支持的图片格式和大小上限,以官方文档为准。
04第二用法实练:把屏幕上的问题原样截给它
新头部多半有小瑕疵:也许贴纸压住了标题一角,也许窗口拉窄后胶囊挤成两行。这次别翻译成文字,直接截一张当前页面的屏,先用标注工具把问题处圈出来。
(附上你截的屏幕图)按截图里我圈出来的位置改:____。只动这一处,其他都不要动。
应该看到:它的回复对得上你圈的那个位置,改动只落在那一处。要是它改了别的地方,说明圈得不够小、话说得不够死——圈更小,加一句“只动 XX,其余不动”,再来一次。
大图、多图会让会话变长变慢。一次给关键的一两张就够,别把十几张截图一股脑倒进去。会话真被图撑得又长又慢怎么办?第 3 课《刹车》专门处理这件事。
05把「贴图三用法」揣走
草图改版式、报错截图排错、照着成品截图做——这三件事从今天起不需要再翻译成文字。
最常见原因是只发了文字没带上图。桌面端发送前确认图片已附在这条消息里;CLI 确认输入框里出现了文件路径(把图拖进终端窗口会自动变成路径),或者改用 @海报草图.png——用 @ 引用时草图必须在项目文件夹里。三种方式换一种再试。
它的眼睛已经打开:你给什么图,它就能看什么。但现在它还只能看你喂到眼前的东西。下一课把查资料的活也交出去,让它自己上网核对事实。
进入第 2 课:让它自己上网查证 →翻出手机里随手拍的一张纸质笔记照片,喂给它:整理成一份 md 文件,按原笔记的条目分段。提示:字迹潦草没关系——先让它复述读到了什么,读错的地方你口头纠正,确认无误再让它落文件。
找一个你喜欢的网页,截图给它:照这张截图的配色改活动执行单的头部。改完再撤回。提示:撤回可以先让它“把头部改回原样”手动完成;本章第 3 课会教 /rewind,一条命令回到改动之前——先记住这个名字。
最后验收
不要只确认“AI 说做完了”,请打开真实结果检查。
照草图完成海报级改版的活动执行单.html,以及一张贴图三用法速查卡它是你和 Claude 一起做出来的真实文件。想看就对 Claude 说「打开本课的成品」,或者在访达 / 资源管理器里进入项目文件夹双击它。查看参考样例 ↗