# 分享大纲

<div class="grid grid-cols-2 gap-6 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">浏览器的新使用者</div>
<div class="text-sm text-gray-400">Human UI · Agent layer · Structured actions</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">AI 操作网页为什么难</div>
<div class="text-sm text-gray-400">Vision · DOM / A11y · Tool calling</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">MCP / WebMCP</div>
<div class="text-sm text-gray-400">Tool schema · Structured actions · Safety boundary</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">官方 demo 快闪</div>
<div class="text-sm text-gray-400">MWG · DevTools agents · Prompt API · HTML-in-Canvas</div>
</div>

</div>

<!--
建议讲法：第一部分先建立 Agentic Web 概念，第二部分用官方 demo 和本地兜底页证明“从猜 UI 到调用工具”的转变。Chrome 其它新特性只做快闪，不抢 WebMCP 主线。
-->