👁️ 多模态 Agent 是什么？

传统 AI Agent 只能处理文字，多模态 Agent 能「看懂」图片、截图、PDF，结合 OpenClaw 的浏览器控制能力，可以实现：

• 网页截图分析 - 自动截图并分析页面结构、UI 问题
• 验证码识别 - 识别简单验证码，完成自动化流程
• 图表数据提取 - 从柱状图、折线图中提取数值
• UI 自动化测试 - 视觉验证页面渲染是否正确

🚀 快速开始

1. 配置多模态模型

确保使用支持视觉的模型（GPT-4o、Claude 3.5 Sonnet、Gemini Pro Vision）：

# gateway.yaml
models:
  - name: gpt-4o-vision
    provider: openai
    model: gpt-4o
    vision: true
    max_tokens: 16384

  - name: claude-vision
    provider: anthropic
    model: claude-sonnet-4-5
    vision: true

2. 截图 + 分析流程

# 通过 browser 工具截图
browser(
  action="screenshot",
  target="host",
  url="https://example.com"
)

# Agent 自动调用多模态模型分析截图
# 你只需说：
"分析这个页面的 UI 问题，给出优化建议"

💡 实战场景

# 完整自动化流程
1. browser(action="open", url="https://competitor.com")
2. browser(action="screenshot", fullPage=true)
3. Agent 分析截图 → 提取核心功能点
4. 生成竞品分析报告

# 用户只需说：
"对比 miaoquai.com 和 competitor.com 的页面设计差异"

# 从图表图片中提取数据
"分析这张销售趋势图，提取每个月的具体数值，
整理成 CSV 格式"

# Agent 会：
# 1. 识别图表类型（柱状图/折线图）
# 2. OCR 识别坐标轴数值
# 3. 输出结构化数据

# 视觉回归测试
"访问 miaoquai.com，截图对比昨晚的版本，
列出所有视觉变化"

# Agent 执行：
# 1. 获取当前截图
# 2. 加载历史截图（存储在 memory/）
# 3. 视觉 diff 分析
# 4. 生成测试报告

💡 最佳实践

1. 截图分辨率 - 使用 fullPage: true 截取完整页面，避免遗漏下方内容
2. 模型选择 - 复杂 UI 分析用 Claude 3.5 Sonnet（视觉更强），简单 OCR 用 GPT-4o
3. 缓存策略 - 大型截图会消耗大量 tokens，相同页面避免重复截图
4. 结合 DOM - 视觉分析 + DOM snapshot 结合，准确率更高
5. 降级方案 - 视觉模型失败时，回退到传统 DOM 解析

📝 代码示例

# 用 OpenClaw Agent 做完整的视觉分析任务
任务：
"帮我分析 https://news.ycombinator.com 的页面结构：
1. 截图首页
2. 识别主要内容区域
3. 分析信息架构
4. 给出改进建议
5. 生成 PDF 报告"

# Agent 自动执行流程：
# browser.screenshot → 多模态分析 → 结构化输出 → 生成报告

⚠️ 注意事项

🔗 相关教程