feat(newChorme)

pages/outline.md

@@ -1,33 +1,39 @@
-# 分享大纲
+# 为什么 AI 操作网页会不可靠？
 
-<div class="grid grid-cols-2 gap-6 mt-8">
+<div class="grid grid-cols-3 gap-5 mt-8">
 
-<div class="card p-5">
-<div class="text-blue-400 text-sm font-semibold mb-2">01</div>
-<div class="text-xl font-bold mb-2">Chrome 更新怎么看</div>
-<div class="text-sm text-gray-400">Release Notes · ChromeStatus · Baseline · Origin Trials</div>
+<div class="card-blue">
+<div class="font-semibold mb-3">视觉识别</div>
+<div class="text-sm op-75 mb-4">AI 看截图，猜按钮和输入框在哪里。</div>
+<div class="text-xs op-65">通用性强，但慢、贵、受 UI 变化影响。</div>
 </div>
 
-<div class="card-green p-5">
-<div class="text-emerald-400 text-sm font-semibold mb-2">02</div>
-<div class="text-xl font-bold mb-2">Web 平台新能力</div>
-<div class="text-sm text-gray-400">CSS · Web APIs · PWA · Media · AI-adjacent APIs</div>
+<div class="card-amber">
+<div class="font-semibold mb-3">DOM / 可访问性树</div>
+<div class="text-sm op-75 mb-4">AI 读取结构，寻找元素再点击。</div>
+<div class="text-xs op-65">比视觉结构化，但复杂组件和隐藏状态仍会干扰。</div>
 </div>
 
-<div class="card-amber p-5">
-<div class="text-amber-400 text-sm font-semibold mb-2">03</div>
-<div class="text-xl font-bold mb-2">DevTools 工作流</div>
-<div class="text-sm text-gray-400">Performance · Network · CSS Overview · Recorder</div>
+<div class="card-green">
+<div class="font-semibold mb-3">WebMCP 工具调用</div>
+<div class="text-sm op-75 mb-4">网页主动暴露工具，AI 调用明确能力。</div>
+<div class="text-xs op-65">把“猜 UI”变成“调业务能力”。</div>
 </div>
 
-<div class="card-red p-5">
-<div class="text-red-400 text-sm font-semibold mb-2">04</div>
-<div class="text-xl font-bold mb-2">落地与风险</div>
-<div class="text-sm text-gray-400">兼容性 · 安全边界 · 灰度策略 · 团队清单</div>
 </div>
 
+<div class="mt-8 text-2xl font-bold">
+AI 擅长结构化信息，不擅长在复杂 UI 里猜下一步。
 </div>
 
 <!--
-建议讲法：先讲信息入口，再讲能力分类，最后讲如何落地。这样听众不会只记住几个孤立 API，而是学会建立自己的 Chrome 更新雷达。
+这一页开始讲问题：为什么 AI 操作网页经常不可靠？
+
+现在让 AI 操作网页，大概有三类方案。第一类是视觉识别。它的方式很直观：AI 不断看截图，判断按钮在哪里、输入框在哪里、下一步应该点哪里。这种方式最大的好处是通用，不需要你改页面，任何网站理论上都能试一试。但它的代价也很明显：慢，贵，token 消耗大，而且 UI 一变，模型就可能误判。
+
+第二类是 DOM 或可访问性树识别。它比纯视觉更进一步，不只是看图，而是读取页面结构，找按钮、表单、菜单和文本。这当然更结构化，也更接近前端工程。但真实业务系统里有大量复杂组件：弹窗、抽屉、虚拟滚动、级联选择、树形权限、隐藏状态、动态权限。结构一复杂，Agent 仍然可能找错元素、点错按钮，甚至误删数据。
+
+第三类就是我们今天重点看的 WebMCP 思路。它不是继续让 AI 猜页面，而是让网页主动告诉 AI：我这里有哪些工具，每个工具适合什么场景，需要什么参数，调用之后会执行什么业务逻辑。这样，AI 做的事情就从“在 UI 上摸索”变成“调用明确的业务能力”。
+
+所以这页的结论很简单：AI 擅长结构化信息，不擅长在复杂 UI 里猜下一步。只要我们让它继续猜，就会慢、贵、脆弱；如果我们把网页能力结构化地交给它，它才有机会变得稳定、可控。
 -->