update

pages/demo/devtools-workflow.md

@@ -1,32 +1,50 @@
-# 模拟展示 2：DevTools 排查链路
+# Demo 2：AI 操作 Web 的三种路径
 
 <div class="mt-8">
 
 ```mermaid {scale: 0.82}
 flowchart LR
-    A[用户反馈卡顿] --> B[Performance 录制]
-    B --> C[定位长任务]
-    C --> D[Network 查资源瀑布]
-    D --> E[Coverage 查无效代码]
-    E --> F[形成优化清单]
+    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-2 gap-6 mt-8">
+<div class="grid grid-cols-3 gap-5 mt-8">
 
-<div class="card">
-<div class="font-semibold mb-2">演示素材</div>
-<div class="text-sm text-gray-400">准备一个加载慢、交互卡顿、资源偏大的页面作为示例。</div>
+<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">观众收获</div>
-<div class="text-sm text-gray-400">把 DevTools 从“会打开”变成“按链路定位问题”。</div>
+<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>
 
 <!--
-这一页用于现场演示细节。建议讲一个真实或模拟页面，从 Performance 开始抓主线程问题，再用 Network 和 Coverage 找资源问题，最后输出可执行的优化清单。
+这一页参考中文实战材料中的三种方案对比，但剔除厂商封装概念。讲述重点不是某个 SDK 强，而是说明 AI 更适合处理结构化工具，而不是在复杂 UI 中不断猜测。
+
+建议讲法：
+1. 先说同一个后台任务：创建词条、创建菜单、绑定角色。
+2. 视觉识别能做，但每步都需要截图和推理。
+3. DOM / A11y 识别更接近结构，但仍可能点错或遗漏状态。
+4. WebMCP 把动作变成工具：createEntry、createMenu、bindRole。
+5. 结论：从“AI 猜 UI”转向“网页提供工具”。
 -->