多模态提示

多模态 LLM 的能力边界

视觉理解的五个层次

图像分析提示技巧

API 调用示例：图像分析

import base64
from openai import OpenAI

client = OpenAI()

def analyze_image(image_path: str, question: str) -> str:
    # 读取并编码图像
    with open(image_path, "rb") as f:
        image_data = base64.b64encode(f.read()).decode("utf-8")

    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[
            {
                "role": "user",
                "content": [
                    {
                        "type": "image_url",
                        "image_url": {
                            "url": f"data:image/jpeg;base64,{image_data}",
                            "detail": "high"  # high=高分辨率分析，消耗更多token
                        }
                    },
                    {
                        "type": "text",
                        "text": question
                    }
                ]
            }
        ],
        max_tokens=1000
    )
    return response.choices[0].message.content

UI/UX 设计评审提示词

请对这张 App 界面截图进行专业的 UX 评审。

分析维度：
1. 信息层次：重要信息是否突出？视觉权重是否合理？
2. 可用性：用户能否快速找到主要操作？
3. 一致性：设计风格、间距、字体是否统一？
4. 移动端适配：按钮大小是否符合 44pt 最小触控区域？
5. 无障碍：颜色对比度是否足够（WCAG AA 标准要求 4.5:1）？

输出格式：
## 优点
- [具体描述]

## 问题（按严重程度）
1. [严重] [问题描述 + 改进建议]
2. [中等] [...]

## 综合评分：X/10

文档与表格解析

PDF 财报数据提取

这是一份季度财务报告截图。请提取以下数据：

提取项目：
- 营业收入（Revenue）
- 净利润（Net Income）
- 毛利率（Gross Margin %）
- 同比增长率（YoY Growth %）
- 自由现金流（Free Cash Flow）

如果某项数据在图中不存在，填写 "N/A"。
如果数值单位不明确，请注明（如"百万美元"）。

以 JSON 格式返回：
{
  "quarter": "Q?YYYY",
  "revenue": {"value": X, "unit": "百万美元"},
  "net_income": {...},
  ...
}

代码截图理解

从图像中理解代码

这是一段代码的截图（可能存在压缩失真）。

请完成以下任务：
1. 尽可能准确地转录代码（标注不确定的字符用 [?]）
2. 识别这是什么语言（及框架）
3. 分析代码功能
4. 指出任何可见的 Bug 或潜在问题
5. 如有不清晰的部分，说明"因图像模糊无法确认第X行"

注意：OCR 可能对以下字符混淆：
1/l/I，0/O，,/. ，''/"" ——请根据语境判断。

视觉推理：图表分析

数据图表深度分析提示词

这是一张业务数据折线图。请进行深度分析：

**基础读取**
- 描述图表类型、X 轴、Y 轴和图例
- 读取关键数据点（最高值、最低值、起始值、结束值）

**趋势分析**
- 整体趋势描述（上升/下降/波动/稳定）
- 识别明显的转折点和异常值
- 计算大概的增长率（如果可以）

**深层洞察**
- 数据背后可能的业务原因（基于常识推断）
- 与行业规律对比（季节性、周期性）
- 需要注意的风险信号

**建议**
- 基于数据趋势，提出 2-3 个值得关注的问题

多图对比分析

# 一次请求发送多张图片（如 A/B 测试方案对比）
response = client.chat.completions.create(
    model="gpt-4o",
    messages=[{
        "role": "user",
        "content": [
            {"type": "text", "text": "这是两个版本的登录页面设计（图1为方案A，图2为方案B）。请从用户体验角度对比分析，指出各方案的优缺点，并给出推荐选择。"},
            {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img_a}"}},
            {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img_b}"}},
        ]
    }],
    max_tokens=1500
)

视觉 Grounding：定位图像区域

请分析这张错误截图，并准确描述问题的位置：

1. 错误信息出现在页面的哪个区域（顶部/中部/底部，左/中/右）？
2. 截图中红色部分或高亮标注的内容是什么？
3. 导航栏显示的当前页面路径是什么？
4. 请列出截图中所有可见的按钮/链接文字

注意：用坐标感知的方式描述位置，如"距页面顶部约 1/3 处，左侧导航栏下方"。

多模态提示词的质量诊断

多模态模型能力对比

多模态工作流：图生代码

【图生代码任务】

你是一名前端开发专家。请根据这张 UI 设计图，生成对应的 HTML + Tailwind CSS 代码。

要求：
1. 像素精确还原设计图中的布局（不需要完全相同，但要视觉上一致）
2. 响应式设计：同时适配桌面（≥1024px）和移动（≤768px）
3. 使用语义化 HTML（header/nav/main/section/footer）
4. 颜色用 CSS 变量定义，方便主题切换
5. 不使用任何 JavaScript，纯 HTML+CSS 实现

不确定的地方（如字体大小、精确颜色值）允许做出合理估计，在注释中说明假设。

本章小结