为什么多模态 Prompting 是 2026 年的必备技能
2024 年底之前，AI 主要处理文字。2025 年开始，Claude、GPT-4o、Gemini 全面支持图像输入，现在这已经是日常工作流的标准能力：
- 产品经理：截一张 Figma 设计图，让 AI 直接写前端代码
- 运营人员：把竞品截图发给 AI，让它分析差异、生成对比报告
- 开发者：截一张报错截图，AI 比纯文字描述更准确地定位问题
- 分析师：上传图表/PDF，AI 提取数据并给出洞察
写多模态 Prompt 和写纯文字 Prompt 有几个关键区别。这章专门讲这些区别。
图像在 API 中怎么传
主流做法有三种，选哪种取决于你的场景：
方法 1：URL 引用（最简单）
import anthropic
client = anthropic.Anthropic()
response = client.messages.create(
model="claude-opus-4-6",
max_tokens=1024,
messages=[
{
"role": "user",
"content": [
{
"type": "image",
"source": {
"type": "url",
"url": "https://example.com/product-screenshot.png",
},
},
{
"type": "text",
"text": "这是我们产品的首页截图。分析用户体验的 3 个主要问题，每个问题附上修改建议。"
}
],
}
],
)
print(response.content[0].text)
适合场景：图片已有公开 URL，不需要上传，最省事。
方法 2：Base64 编码（本地图片）
import anthropic
import base64
# 读取本地图片
with open("design-mockup.png", "rb") as f:
image_data = base64.standard_b64encode(f.read()).decode("utf-8")
client = anthropic.Anthropic()
response = client.messages.create(
model="claude-opus-4-6",
max_tokens=2048,
messages=[
{
"role": "user",
"content": [
{
"type": "image",
"source": {
"type": "base64",
"media_type": "image/png",
"data": image_data,
},
},
{
"type": "text",
"text": "根据这个设计稿，用 React + Tailwind CSS 写出对应的组件代码。"
}
],
}
],
)
适合场景：处理本地文件、用户上传的图片、不能公开暴露 URL 的内容。
方法 3：Files API（批量处理首选）
import anthropic
client = anthropic.Anthropic()
# 第一步：上传图片（只需上传一次）
with open("analytics-chart.png", "rb") as f:
uploaded_file = client.beta.files.upload(
file=("analytics-chart.png", f, "image/png"),
)
file_id = uploaded_file.id # 保存这个 ID，可以复用
# 第二步：用 file_id 引用图片（不需要重复上传）
response = client.messages.create(
model="claude-opus-4-6",
max_tokens=1024,
messages=[
{
"role": "user",
"content": [
{
"type": "image",
"source": {"type": "file", "file_id": file_id},
},
{
"type": "text",
"text": "提取这张图表里的所有数据点，输出为 JSON 格式。"
}
],
}
],
betas=["files-api-2025-04-14"],
)
适合场景：同一张图要问多个问题（比如多轮对话），或者批量处理大量图片。每次请求不重新传图，省 token 也省钱。
多模态 Prompt 的核心原则
原则 1：图片放在文字前面
Claude 处理图像时，图片放在 Prompt 前面比放在后面效果更好：
# ✅ 正确顺序：图片 → 文字
content = [
{"type": "image", "source": {...}},
{"type": "text", "text": "分析这张图片中的..."}
]
# ❌ 效果稍差：文字 → 图片
content = [
{"type": "text", "text": "请分析以下图片中的..."},
{"type": "image", "source": {...}}
]
原因：模型处理时按顺序建立上下文，先看到图像再读指令，视觉信息能更好地整合到后续推理中。
原则 2：用指令动词明确任务类型
不同任务用不同的动词，让模型知道你要什么深度的分析：
| 动词 | 场景 | 示例 |
|---|---|---|
| 描述 | 快速了解图片内容 | "描述这张截图的主要 UI 元素" |
| 分析 | 深度解读 | "分析这张图表的趋势，找出异常点" |
| 提取 | 结构化输出 | "提取图片中的所有文字，输出 JSON" |
| 对比 | 多图比较 | "对比这两张设计稿，列出差异" |
| 评估 | 质量判断 | "评估这个 UI 设计的可用性问题" |
原则 3：告诉 AI 你知道什么，让它专注于你不知道的
❌ "分析这张图"
→ AI 不知道你的目标，会给出泛泛的描述
✅ "这是我们 SaaS 产品的用户注册页面截图，转化率只有 3%（行业均值 8%）。
分析可能导致转化率低的 UX 问题，不需要描述你能看到什么，直接给问题和改进建议。"
→ 明确背景 + 目标 + 约束，AI 直接给有价值的输出
四种典型场景的 Prompt 模板
场景 1：截图转代码
最常见的用法，把设计稿或界面截图变成可运行代码：
你是一个 React + Tailwind CSS 专家。
根据截图，实现这个 UI 组件：
- 技术栈：React 18 + TypeScript + Tailwind CSS
- 要求像素级还原，包括颜色、间距、字体大小
- 使用语义化 HTML
- 组件接受 props：[列出你需要的 props]
- 不需要解释，直接输出完整的 .tsx 文件
实际效果：设计稿截图 → Claude 输出 React 组件，通常一次成功率 70-80%，比口头描述高得多。
场景 2：图表数据提取
CHART_EXTRACTION_PROMPT = """
从这张图表中提取数据，严格按以下 JSON 格式输出：
{
"chart_type": "bar/line/pie/scatter",
"title": "图表标题（如有）",
"x_axis": {"label": "", "unit": ""},
"y_axis": {"label": "", "unit": ""},
"data_points": [
{"x": "", "y": 0, "label": ""}
],
"source": "图表来源（如有）",
"notes": "你对数据准确性的信心和任何不确定的地方"
}
规则：
- 数字尽量精确到图表显示的精度
- 如果某个值看不清楚，在 notes 里说明
- 不要猜测，宁可标注为 null
"""
场景 3：错误截图诊断
这是一个 [Python/JavaScript/浏览器] 的错误截图。
帮我诊断：
1. 错误的根本原因是什么（一句话）
2. 最可能的触发场景
3. 修复步骤（给出具体代码）
上下文：
- 这段代码是做 [功能描述]
- 这个错误 [总是出现/偶尔出现，触发条件是...]
场景 4：多图对比分析
# 同时发两张图进行比较
response = client.messages.create(
model="claude-opus-4-6",
max_tokens=2048,
messages=[
{
"role": "user",
"content": [
{"type": "text", "text": "图片 1：我们的产品首页"},
{"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": our_page}},
{"type": "text", "text": "图片 2：竞品 A 的首页"},
{"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": competitor_page}},
{
"type": "text",
"text": """对比这两个首页，从以下维度分析：
1. 视觉层级（用户眼睛先看哪里）
2. 核心价值主张的清晰度
3. CTA 按钮的设计和位置
4. 信息密度（是否过载）
总结：我们在哪些方面落后，哪些方面更好。"""
}
],
}
],
)
成本和性能注意事项
图像会消耗 token，不是免费的：
token 计算公式：tokens ≈ (width × height) / 750
1000×1000 像素的图 ≈ 1,334 tokens
以 Claude Sonnet 4.6 计算 ≈ $0.004/张图
控制成本的实际建议：
- 提交前压缩图片：长边不超过 1568px，超过了 API 会自动缩小但你白付了传输时间
- 截图时裁剪到关键区域：不要发整个 4K 屏幕截图，只截你要分析的部分
- 批量任务用 Files API：同一张图问多个问题，用
file_id引用，不重复计费
多模态 Prompt 的常见坑
坑 1：AI 描述了图片但没有完成任务
❌ "看看这张截图"
→ AI 开始详细描述图片内容，不是你要的
✅ "不需要描述图片内容，直接：[你的具体任务]"
坑 2：AI 对图中文字识别出错但没有告诉你
小字体、中文手写、艺术字体的 OCR 准确率下降。在 Prompt 里加：
如果图中有文字你无法确定，请标注 [?] 而不是猜测。
坑 3：发了截图但 AI 说"作为文字 AI 我没法看图"
这不是模型能力问题，是代码里没有正确传入图像内容块。检查你的 content 数组是否包含 {"type": "image", ...}。
坑 4：期望 AI 分析图表时像素级准确
AI 读图表时的误差约为 ±5-10%，用于快速洞察没问题，如果需要精确数据应该用表格数据而不是图片。
