在前面的文章中，咱们研究的主要是 “文本提示词” 。不管是思维链、思维树、提示词链，还是给推理模型编写提示词，本质上都是通过文字告诉 AI：
- 你要完成什么任务。
- 有哪些资料可以使用。
- 哪些规则不能违反。
- 最终结果应该如何输出。
但有些需求，光靠文字真的很难说清楚。例如，你想让 AI 帮你实现一个网页卡片。为了描述页面布局，你可能得写上这么一大段：
左边是一张圆角图片，右边分成上下两部分，上面是加粗标题，下面是灰色说明文字。图片和文字需要垂直居中，按钮放在右下角，还要留出适当间距……写着写着，你可能会就在想： “要是能直接给它看一眼设计图该多好！”
好消息是，现在的 AI 早就长出了 “眼睛” 和 “耳朵”。这也就是提示词工程里的最后一块重要拼图——多模态（Multimodal）提示词。
什么是多模态？
“多模态” 这个词听起来很有学术味，但理解起来其实是非常简单的。所谓的 “模态”，指的就是信息的表现形式。比如：
- 文本是一种模态。
- 图片是一种模态。
- 音频是一种模态。
- 视频也是一种模态。
以前的大模型是单模态的，只能处理文本相关的内容。而现在的 ChatGPT、Claude、Gemini 等大模型，基本都是 “多模态模型” 了。
也就是说，你可以把一张截图、一份 PDF、甚至一段语音直接扔给它，然后加上文字指令，让它帮你干活。其中最实用、也是我们日常工作中最常用的，就是 “图片 + 文本” 的组合。
场景一：把图片整理成结构化数据
假设你手里有一张销售报表截图，里面包含商品名称、销售数量和单价。如果只是想把其中的数据整理出来，当然可以自己对着图片一行一行敲。
不过，敲到第 20 行以后，眼睛可能就开始抗议了。这时候，我们可以把图片上传给 AI，并明确需要提取哪些字段。
示例：
【上传销售报表截图】
# 任务
请读取图片中的销售数据，并整理成 Markdown 表格。
# 输出字段
只提取下面三列：
1. 商品名称。
2. 销售数量。
3. 单价。
# 处理规则
1. 单价统一使用人民币 “元”。
2. 保留图片中的原始数据，不要自行修改数值。
3. 如果某个文字或数字无法清楚辨认，请填写 “待核实”。
4. 不要根据上下文猜测模糊内容。
5. 只输出最终表格，不需要额外解释。多模态模型不仅可以识别图片中的文字，还能结合表格布局，理解哪些数字属于哪一行、哪一列。
不过要注意，它并不一定在所有情况下都比专业的 OCR 或文档解析工具更准。如果你需要批量处理上千张票据或合同，专业工具或人工复核往往更加稳定。AI 的优势在于，它不仅能识别内容，还能进一步理解、整理和解释这些数据。
场景二：对比两张图片，找出差异
在日常工作中，我们经常需要对比不同的文件或界面，找出不一致的地方。这时候，我们可以直接把多张图一起扔给 AI，让它帮忙 “找茬”。
比如在前端开发中，有 2 张图片：
- 图 1 是设计师提供的 UI 设计稿。
- 图 2 是开发完成后的网页截图。
页面看起来大差不差，但总感觉哪里不太对。盯了半天，只看出按钮好像有点歪，这时候，就可以让 AI 帮忙做个初步对比。
示例：
【上传图 1：设计师的 UI 原型稿】
【上传图 2：我实际开发出来的网页截图】
# 任务
我是一名前端开发工程师。请仔细对比这两张图片，指出我开发出来的页面（图 2）在视觉还原上存在哪些问题。
# 检查重点
重点检查以下几个维度：
1. 字体大小、粗细、颜色是否一致。
2. 元素之间的间距（Margin / Padding）是否合理。
3. 整体对齐方式是否偏离。
请逐条列出不同之处，并给出大概的修改建议。有了明确的对比目标和 “检查重点”，AI 就不会漫无目的地乱猜，而是会精准地帮你指出：“你的登录按钮圆角小了大概 4px，并且标题文字的灰色偏深了。”
场景三：从草图生成前端代码
对于多模态提示词来说，还有一个非常强大的用法：根据一张草图（设计稿、截图、手绘等）生成代码。
假设你在纸上简单画了一个登录卡片：
- 顶部是标题。
- 中间有邮箱和密码输入框。
- 底部是登录按钮。
- 右上角还有一个关闭图标。
就算草图画得歪歪扭扭，只要结构能看懂，AI 通常就能帮你生成一个基础版本。
示例：
【上传登录页面手绘草图】
# 任务
请根据这张草图，帮我生成一个可以直接运行的登录卡片。
# 技术要求
- 使用 HTML 和原生 CSS；
- 不要使用 Bootstrap、Tailwind CSS 等第三方 UI 库；
- HTML 和 CSS 分开输出，保证代码结构清爽。
# 界面要求
- 登录卡片在页面中必须水平、垂直居中；
- 卡片使用浅色背景、圆角和轻微阴影；
- 包含邮箱输入框、密码输入框和登录按钮；
- 按钮要有 hover 悬浮效果；
- 页面需要做好手机屏幕的响应式适配。
# 处理规则
- 草图里没标明白的颜色和尺寸，你可以采用合理的默认值；
- 如果某个区域实在看不清，请先说明你的理解；
- 不要给自己加戏，别补充草图里没出现的大量额外功能；
- 在输出代码前，先简单列出你识别到的页面结构。AI 收到任务后，生成的 CSS 代码往往长这样：
.login-card {
width: min(360px, calc(100% - 32px));
padding: 24px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}不过，我们也得认清现实：根据图片生成代码，通常只是个帮你省去敲基础骨架时间的 “初稿”，远达不到百分百还原、直接能上线的最终形态。
代码拿回来之后，咱们还是得人工走一遍验收流程，比如：页面结构是否合理、响应式布局是否正常、表单是否可用等等。
多模态提示词的 “避坑指南”
很多时候，我们直接把图片、截图和图表直接丢给 AI，确实比用文字描述方便得多。但 AI 能看图，不代表它什么图都能看懂。
使用多模态模型时，建议避开下面几个常见的坑。
1. 图片不要太模糊，AI 不会魔法
多模态模型的识图能力越来越强，但如果截图分辨率太低、字太小，或者被严重压缩，它往往也看不准。比较麻烦的是，它有时候为了 “交差”，会顺着模糊的轮廓瞎猜，给出完全跑偏的结论。
所以，发图前最好自己先瞄一眼：
- 关键文字能看清吗？
- 重要的表格行列完整吗？
- 有没有被水印或弹窗挡住关键信息？
如果连你自己放大三倍都看不清，就别指望 AI 能看懂了。遇到这种情况，老老实实重新截个局部高清图，或者手动把关键文字打在提示词里。
2. 不要只扔一张图，要给足背景
图片只能告诉 AI “画面里有什么”，却没法告诉它 “你为什么要看这张图”。比如你扔一张数据报表过去，只问一句：
这张图怎么看？这就太难为 AI 了。它可能去分析趋势，也可能介绍横纵坐标，但往往给不到你真正想要的答案。
更有效的写法是交代清楚背景和目标：
这是某电商平台第三季度的用户活跃度报表。请重点分析 9 月份活跃用户明显下滑的可能原因，并指出还需要哪些数据才能进一步验证。这样一来，AI 就知道：
- 这是什么业务的数据。
- 你重点关注哪个时间段。
- 你希望它完成什么任务。
- 哪些结论只是推测，还需要进一步验证。
总而言之：
图片提供的是画面，提示词提供的是任务。两者缺一不可。
背景越清楚，AI 越容易抓住重点；问题越模糊，它就越容易自由发挥。
3. 图片内容太多时，明确指出重点区域
有些图片的信息量非常大。例如，一整页后台管理系统截图里，可能同时包含导航栏、数据表格、折线图、筛选条件、错误提示和几十个按钮。
如果你只说：
帮我分析一下这张截图。AI 就得自己猜测你到底想看哪里。它可能盯着你根本不关心的左侧菜单分析半天，却错过右上角那个真正有问题的异常图表。
因此，图片内容较多时，最好主动圈定分析范围：
- 请只分析图片右上角的折线图。
- 请查看表格第三行的异常数据。
- 请解释红色提示框中的报错信息。
- ……
如果工具支持，直接在原图上画个红圈、打个箭头，标个 “区域 A”，然后在提示词里让它重点看 “区域 A”，往往比用文字描述方位准确得多。
4. 涉及关键数字，最好进行二次核对
AI 看懂一张图片，不代表它能百分之百识别图片里的每一个数字。尤其是在下面这些情况下，更容易出现识别错误：
- 数字字体较小。
- 小数点不明显。
- 0 和 O、1 和 I 容易混淆。
- 表格行列很多。
- 图表颜色相近。
- ……
例如，图片中的销售额是 1.8 million，模型可能看成 18 million。只差一个小数点，结论就从 “正常增长” 变成 “公司准备起飞” 了。
因此，涉及财务数据、考试成绩、合同金额、药品剂量和生产参数时，不能只看 AI 的识图结果。更稳妥的做法是要求它先提取数据，再进行分析：
请先将图表中的月份和销售额整理成表格。我确认数据无误后，再分析销售额变化趋势。
通过 “先识别、后分析”，我们可以在中间多设置一道检查关卡。
5. 不要在截图中泄露隐私和敏感信息
给 AI 上传图片之前，还要注意一个经常被忽略的问题：图片里可能藏着不该上传的信息。例如：
- 姓名、手机号和家庭住址。
- 身份证、护照和银行卡信息。
- 公司内部数据。
- 客户名单和订单信息。
- API Key、密码和验证码。
- 浏览器标签页中的私人内容。
- 系统后台中的访问令牌和服务器地址。
有时候咱们只是想让 AI 帮忙看看一行报错代码，结果咔嚓一截图，顺手把客户名单、服务器地址、API Key 甚至是私人浏览器标签页全给截进去了。
发图前，记得把不相干的区域裁掉，或者给真实姓名、手机号、密码这些敏感信息打个马赛克。只给 AI 喂它干活真正需要的部分就行，没必要把整个 “仓库” 都搬过去。
6. 重要的结论，不能只依赖一张图片
图片可能过期、缺少上下文，也可能只展示了局部结果。例如，一张网站流量下滑的折线图，并不能直接证明 “网站被搜索引擎惩罚了”。流量下降还可能与节假日、统计异常、广告停止、页面改版或数据延迟有关。
因此，当 AI 根据图片给出原因时，要注意区分：
- 图片中可以直接观察到的事实。
- 根据画面作出的合理推测。
- 目前无法验证的猜测。
为了防止 AI 看着图一本正经地下定论，我们可以直接给它立个规矩：
请将结论分成 “图中可以确认的事实” 和 “仍需数据验证的推测” 两部分。不要把推测写成确定事实。
