51 lines
1.9 KiB
Markdown
51 lines
1.9 KiB
Markdown
# Demo 2：AI 操作 Web 的三种路径
|
||
|
||
<div class="mt-8">
|
||
|
||
```mermaid {scale: 0.82}
|
||
flowchart LR
|
||
A[用户一句话任务] --> B{Agent 如何操作网页?}
|
||
B --> C[看截图<br/>Vision]
|
||
B --> D[读结构<br/>DOM / A11y]
|
||
B --> E[调工具<br/>WebMCP]
|
||
C --> F[慢 / 贵 / UI 敏感]
|
||
D --> G[更结构化 / 仍易误点]
|
||
E --> H[语义工具 / 参数明确 / 可控]
|
||
```
|
||
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-5 mt-8">
|
||
|
||
<div class="card-red">
|
||
<div class="font-semibold mb-2">视觉识别</div>
|
||
<div class="text-sm text-gray-500">通用，不改页面；但每一步都要观察、推理、点击，token 与耗时容易升高。</div>
|
||
</div>
|
||
|
||
<div class="card-green">
|
||
<div class="font-semibold mb-2">DOM / A11y</div>
|
||
<div class="text-sm text-gray-500">比截图更结构化；但复杂组件、隐藏状态、错误点击仍然会影响可靠性。</div>
|
||
</div>
|
||
|
||
<div class="card-blue">
|
||
<div class="font-semibold mb-2">WebMCP</div>
|
||
<div class="text-sm text-gray-500">页面主动暴露工具，Agent 调业务能力，不再猜按钮和表单。</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="mt-8 card-amber text-sm">
|
||
示例任务：创建“订单管理”模块，包括词条、菜单、角色权限绑定。案例数据只说明趋势，不承诺所有项目都有相同收益。
|
||
</div>
|
||
|
||
<!--
|
||
这一页参考中文实战材料中的三种方案对比，但剔除厂商封装概念。讲述重点不是某个 SDK 强，而是说明 AI 更适合处理结构化工具，而不是在复杂 UI 中不断猜测。
|
||
|
||
建议讲法：
|
||
1. 先说同一个后台任务：创建词条、创建菜单、绑定角色。
|
||
2. 视觉识别能做，但每步都需要截图和推理。
|
||
3. DOM / A11y 识别更接近结构，但仍可能点错或遗漏状态。
|
||
4. WebMCP 把动作变成工具：createEntry、createMenu、bindRole。
|
||
5. 结论：从“AI 猜 UI”转向“网页提供工具”。
|
||
-->
|