smart
50 lines
3.4 KiB
Markdown
50 lines
3.4 KiB
Markdown
# 同一个任务，三种完成方式
|
|
|
|
<div class="grid grid-cols-3 gap-5 mt-7">
|
|
|
|
<div class="card">
|
|
<div class="text-sm font-semibold text-blue-500 mb-2">方式 1</div>
|
|
<div class="text-xl font-bold mb-2">看截图</div>
|
|
<div class="text-sm op-70">逐屏识别、逐步点击、逐项填表。</div>
|
|
<div class="mt-5 text-3xl font-bold">分钟级</div>
|
|
<div class="text-xs op-60 mt-1">案例中 token 可到几十万级</div>
|
|
</div>
|
|
|
|
<div class="card-amber">
|
|
<div class="text-sm font-semibold text-amber-500 mb-2">方式 2</div>
|
|
<div class="text-xl font-bold mb-2">读结构</div>
|
|
<div class="text-sm op-70">读取 DOM / 可访问性树，再定位控件。</div>
|
|
<div class="mt-5 text-3xl font-bold">更快但脆</div>
|
|
<div class="text-xs op-60 mt-1">复杂交互下仍可能点错或漏选</div>
|
|
</div>
|
|
|
|
<div class="card-green">
|
|
<div class="text-sm font-semibold text-emerald-500 mb-2">方式 3</div>
|
|
<div class="text-xl font-bold mb-2">调工具</div>
|
|
<div class="text-sm op-70">调用页面暴露的业务工具。</div>
|
|
<div class="mt-5 text-3xl font-bold">秒级</div>
|
|
<div class="text-xs op-60 mt-1">案例中约 30-40 秒、约 1.7 万 token</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-7 card-blue text-sm">
|
|
案例任务：后台系统内完成“创建订单管理模块”，包括词条、菜单、角色权限绑定。数据来自仓库原始实战材料，作为特定案例结果，不代表所有场景通用值。
|
|
</div>
|
|
|
|
<!--
|
|
这一页用一个具体任务，把刚才三类方案的差异讲得更直观一些。
|
|
|
|
我们假设有一个后台管理系统，任务是创建一个“订单管理模块”。听起来很简单，但拆开看其实有好几步：先创建词条，再创建菜单，再把菜单绑定到角色权限里。对熟悉系统的人来说，这可能就是几分钟的常规操作；但对 AI 来说，这里面包含多个页面、多个表单、树形结构、权限勾选、搜索和确认动作。
|
|
|
|
如果用视觉识别，AI 需要一屏一屏截图。它要先看到菜单在哪里，再判断哪个是新增按钮，再识别表单字段，再填值，再点提交。这个过程有点像让一个人隔着截图远程操作电脑，能做，但非常绕。仓库里的实战材料里，这类方案可以完成任务，但过程是分钟级，token 消耗可以到几十万级。
|
|
|
|
如果用 DOM 或可访问性树识别，它会更快一点，因为它不只是看图，而是读结构。但这并不等于稳定。复杂组件里有很多状态，页面结构也会随着权限和交互变化。实战材料里就提到过，结构识别方案在复杂菜单和权限操作里，仍然可能点错、漏选，甚至把不该删的东西删掉。
|
|
|
|
如果用 WebMCP 思路，页面直接暴露“创建词条”“创建菜单”“绑定角色权限”这些工具。AI 不需要知道按钮在左边还是右边，不需要知道菜单有没有展开，它只需要根据用户目标选择正确的工具，传入参数，然后拿到执行结果。实战材料里，同类任务可以压到几十秒，token 也会明显下降。
|
|
|
|
这里我要特别说明一下：页面上的数字不是行业通用基准，也不是说所有场景都会有完全相同的提升。它只是一个具体案例。但它说明了一个趋势：越复杂、越业务化、越高风险的系统，越不应该让 AI 在界面里猜；我们越应该把能力封装好，让 Agent 调用明确的能力。
|
|
|
|
接下来，我们就进入核心概念：WebMCP 到底是什么。
|
|
-->
|