# Demo 2：AI 操作 Web 的三种路径
```mermaid {scale: 0.82}
flowchart LR
A[用户一句话任务] --> B{Agent 如何操作网页?}
B --> C[看截图
Vision]
B --> D[读结构
DOM / A11y]
B --> E[调工具
WebMCP]
C --> F[慢 / 贵 / UI 敏感]
D --> G[更结构化 / 仍易误点]
E --> H[语义工具 / 参数明确 / 可控]
```
视觉识别
通用，不改页面；但每一步都要观察、推理、点击，token 与耗时容易升高。
DOM / A11y
比截图更结构化；但复杂组件、隐藏状态、错误点击仍然会影响可靠性。
WebMCP
页面主动暴露工具，Agent 调业务能力，不再猜按钮和表单。
示例任务：创建“订单管理”模块，包括词条、菜单、角色权限绑定。案例数据只说明趋势，不承诺所有项目都有相同收益。