update

pages/demo/adoption-plan.md

@@ -1,33 +1,37 @@
-# 模拟展示 4：团队落地清单
+# Demo 4：本地兜底，不抢官方主线
 
 <div class="grid grid-cols-2 gap-8 mt-8">
 
 <div class="card-green">
-<div class="font-semibold mb-3">本周可做</div>
+<div class="font-semibold mb-3">本地页面做什么</div>
 <div class="space-y-2 text-sm">
 
-- 建一个 Chrome 更新跟踪文档
-- 选 1 个 DevTools 工作流做内部演示
-- 为 1 个新能力写最小 demo
-- 标注生产可用与仅实验的边界
+- 官方资料导航
+- 三路径对比仪表盘
+- 现场讲述卡片
+- 网络不可用时继续演示
 
 </div>
 </div>
 
 <div class="card-red">
-<div class="font-semibold mb-3">不要直接做</div>
+<div class="font-semibold mb-3">本地页面不做什么</div>
 <div class="space-y-2 text-sm">
 
-- 只因 Chrome 支持就上线
-- 忽略 Safari / Firefox 用户
-- 把实验能力写进核心链路
-- 跳过权限与隐私评估
+- 不复刻所有 Chrome API
+- 不依赖 flags 才能讲完
+- 不做厂商 SDK 接入教程
+- 不把实验能力讲成稳定能力
 
 </div>
 </div>
 
 </div>
 
+<div class="mt-8 card-blue text-sm">
+打开本地兜底页：<span class="font-mono">/demo/index.html</span>。它是演示资料台，不是生产方案样板。
+</div>
+
 <!--
-这一页把分享从“知道了”落到“接下来做什么”。建议最后留一个简单清单，让团队每月复盘一次 Chrome 更新，并把值得试验的能力进入工程 backlog。
+这一页对应 plan/part2.md 的本地 demo 项目职责。后续如果官方 demo 或网络临时不可用，就打开 /demo/index.html 页面继续讲官方链接、三路径对比和风险边界。
 -->

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”转向“网页提供工具”。
 -->

pages/demo/platform-api.md

@@ -1,28 +1,27 @@
-# 模拟展示 3：Web 平台能力评估卡
+# Demo 3：Chrome 官方新特性快闪
 
 <div class="grid grid-cols-2 gap-8 mt-8">
 
 <div class="card-blue">
-<div class="font-semibold mb-3">能力示例</div>
+<div class="font-semibold mb-3">Agentic Web 相关</div>
 <div class="space-y-2 text-sm">
 
-- CSS 新布局与交互能力
-- View Transitions
-- File System / Clipboard / Share APIs
-- PWA 安装与离线体验
-- 本地 AI 与浏览器内置能力探索
+- WebMCP：页面暴露工具给 Agent
+- Modern Web Guidance：给 AI 编程工具补现代 Web 知识
+- DevTools for agents：让 Agent 看见浏览器运行时
+- Prompt API：浏览器内置 AI 能力
 
 </div>
 </div>
 
 <div class="card">
-<div class="font-semibold mb-3">评估维度</div>
+<div class="font-semibold mb-3">体验与平台能力</div>
 <div class="space-y-2 text-sm text-gray-300">
 
-- 用户价值：解决什么真实问题？
-- 兼容性：Chrome-only 还是跨浏览器？
-- 降级方案：不可用时如何处理？
-- 风险：权限、隐私、性能、安全
+- HTML-in-Canvas：真实 DOM 进入 Canvas / 3D
+- Baseline：判断哪些 Web 能力可以放心评估
+- View Transitions：页面状态切换更自然
+- Navigation API：更现代的导航状态管理
 
 </div>
 </div>
@@ -30,9 +29,18 @@
 </div>
 
 <div class="mt-8 card-amber text-sm">
-推荐输出格式：能力名称 / Chrome 支持状态 / 业务场景 / Demo 链接 / 风险 / 下一步。
+只讲位置，不展开 API：这些官方 demo 共同说明 Chrome 正在同时升级 Agent 交互、开发工作流和用户体验。
 </div>
 
 <!--
-这里可以把每个新 API 都变成一张评估卡。不要只问“能不能用”，而是问“能解决什么问题、什么时候可上线、不能用时怎么降级”。
+官方快闪顺序建议：
+1. WebMCP: https://developer.chrome.com/docs/ai/webmcp/imperative-api
+2. Modern Web Guidance: https://developer.chrome.com/docs/modern-web-guidance
+3. DevTools for agents: https://developer.chrome.com/docs/devtools/agents/get-started
+4. Prompt API: https://developer.chrome.com/docs/ai/prompt-api
+5. HTML-in-Canvas: https://developer.chrome.com/blog/html-in-canvas-origin-trial
+6. Baseline: https://web.dev/baseline
+7. View Transitions: https://view-transitions.chrome.dev/
+
+讲法：每个只用 30-45 秒。不要现场深入配置，避免偏离 WebMCP 主线。
 -->

pages/demo/release-scan.md

@@ -1,44 +1,58 @@
-# 模拟展示 1：快速扫一版 Chrome 更新
+# Demo 1：演示交付物总览
 
 <div class="grid grid-cols-3 gap-5 mt-8">
 
 <div class="card-blue">
-<div class="font-semibold mb-3">信息源</div>
+<div class="font-semibold mb-3">PPT 讲什么</div>
 <div class="space-y-2 text-sm">
 
-- Chrome Developers Blog
-- ChromeStatus
-- DevTools Release Notes
-- MDN Baseline
+- 分别介绍新增能力
+- 说明解决的问题
+- 标注成熟度和限制
+- 给出官方资料来源
 
 </div>
 </div>
 
 <div class="card-green">
-<div class="font-semibold mb-3">筛选标准</div>
+<div class="font-semibold mb-3">工程演示什么</div>
 <div class="space-y-2 text-sm">
 
-- 是否默认启用
-- 是否跨浏览器可用
-- 是否影响现有代码
-- 是否带来明显产品收益
+- WebMCP 可运行页面
+- 声明式表单工具
+- 指令式 registerTool
+- 工具 schema 和调用日志
+- mock runtime 兜底
 
 </div>
 </div>
 
 <div class="card-amber">
-<div class="font-semibold mb-3">输出物</div>
+<div class="font-semibold mb-3">官方快闪</div>
 <div class="space-y-2 text-sm">
 
-- 3 个可试验能力
-- 2 个需要关注的变更
-- 1 个团队落地建议
+- Modern Web Guidance
+- DevTools for agents
+- Prompt API / HTML-in-Canvas
+- Baseline / View Transitions
 
 </div>
 </div>
 
 </div>
 
+<div class="mt-8 card text-sm">
+原则：WebMCP 至少要有可运行工程；其他 Chrome 新能力用官方 demo 快闪，避免把现场变成环境配置课。
+</div>
+
 <!--
-这一页可以模拟现场打开 release notes。重点不是最新版本号，而是演示方法：先看默认启用与兼容性，再看是否影响我们现有业务，最后只挑少数真正需要行动的条目。
+官方资料入口：
+- WebMCP imperative API: https://developer.chrome.com/docs/ai/webmcp/imperative-api
+- Modern Web Guidance: https://developer.chrome.com/docs/modern-web-guidance
+- Chrome DevTools for agents: https://developer.chrome.com/docs/devtools/agents/get-started
+- Prompt API: https://developer.chrome.com/docs/ai/prompt-api
+- HTML-in-Canvas: https://developer.chrome.com/blog/html-in-canvas-origin-trial
+- Chrome demos index: https://chrome.dev/
+
+讲法：先告诉观众“这不是现场复刻所有实验 API，而是用官方 demo 建立可信证据链”。这样可以降低现场失败风险。
 -->

pages/demo/webmcp-contract.md

@@ -0,0 +1,43 @@
+# Demo 2：WebMCP 到底演示什么？
+
+<div class="grid grid-cols-2 gap-8 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">一句话</div>
+<div class="space-y-3 text-sm">
+
+WebMCP 让网页把业务能力暴露成结构化工具，Agent 看到的是工具名、描述、参数 schema 和执行结果，而不是只靠截图或 DOM 猜按钮。
+
+<div class="font-mono text-xs opacity-80">
+navigator.modelContext.registerTool(...)
+</div>
+
+</div>
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-3">两种 API</div>
+<div class="space-y-2 text-sm">
+
+- 声明式：给标准 HTML 表单添加工具属性
+- 指令式：用 JavaScript 注册复杂工具
+- 共同目标：把页面能力变成 Agent 可理解的契约
+- 演示口径：提高可靠性，不承诺零错误率
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-amber text-sm">
+实验边界：Chrome 官方文档标注 WebMCP 仍处于 proposed / origin trial / flag 阶段；现场 demo 必须有 mock 兜底。
+</div>
+
+<!--
+官方依据：
+- https://developer.chrome.com/docs/ai/webmcp
+- https://developer.chrome.com/docs/ai/webmcp/imperative-api
+- https://developer.chrome.com/docs/lighthouse/agentic-browsing/registered-webmcp-tools
+
+讲法：不要说“零错误率”。更稳妥的表达是“减少 Agent 猜 UI 的步骤，提高性能、可靠性和任务完成准确率”。
+-->

pages/demo/webmcp-project.md

@@ -0,0 +1,40 @@
+# Demo 3：WebMCP 原始工程能跑起来
+
+<div class="grid grid-cols-[1.05fr_0.95fr] gap-8 mt-8">
+
+<div class="card">
+<div class="font-semibold mb-3">工程文件</div>
+
+```txt
+public/demo/webmcp/
+├── index.html   # 业务 UI + 声明式表单工具
+├── styles.css   # 演示界面样式
+└── app.js       # registerTool + mock runtime + 执行日志
+```
+
+</div>
+
+<div class="card-blue">
+<div class="font-semibold mb-3">运行入口</div>
+<div class="space-y-3 text-sm">
+
+- 启动：`pnpm dev`
+- 打开：`/demo/webmcp/index.html`
+- 无 WebMCP 环境：走本地 mock runtime
+- 有 WebMCP 环境：优先调用 `navigator.modelContext`
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-green text-sm">
+这页要现场打开工程，不只讲链接。观众能看到“页面 UI”和“Agent 工具视角”同时存在。
+</div>
+
+<!--
+现场建议：
+1. 先打开 http://localhost:3030/demo/webmcp/index.html 或实际 dev server URL。
+2. 展示左侧 HTML 表单和右侧工具列表。
+3. 再切到 app.js，解释 registerTool 的 name / description / inputSchema / execute。
+-->

pages/demo/webmcp-script.md

@@ -0,0 +1,41 @@
+# Demo 4：现场操作脚本
+
+<div class="grid grid-cols-4 gap-4 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">1. 人类 UI</div>
+<div class="text-sm">
+提交售后工单表单，说明原有页面流程没有被替换。
+</div>
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-3">2. 工具发现</div>
+<div class="text-sm">
+右侧展示工具名、描述、schema：这是 Agent 看到的契约。
+</div>
+</div>
+
+<div class="card-amber">
+<div class="font-semibold mb-3">3. 单工具调用</div>
+<div class="text-sm">
+点击查询订单、生成回复、退款审核，观察状态和日志变化。
+</div>
+</div>
+
+<div class="card-red">
+<div class="font-semibold mb-3">4. 复合任务</div>
+<div class="text-sm">
+执行复合任务：查询订单 → 进入审核 → 生成回复草稿。
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card text-sm">
+讲解结论：WebMCP 不是让 Agent 更会点击，而是让网页直接声明“我有哪些可调用能力”。敏感动作仍然要保留用户确认、权限和审计。
+</div>
+
+<!--
+不要现场陷入标准细节。演示后马上回到大图：Chrome 通过 WebMCP、DevTools for agents、Modern Web Guidance 等能力，让 Web 逐步变成 Agent 可以协作的运行环境。
+-->

pages/outline.md

@@ -4,30 +4,30 @@
 
 <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="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">Web 平台新能力</div>
-<div class="text-sm text-gray-400">CSS · Web APIs · PWA · Media · AI-adjacent APIs</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">DevTools 工作流</div>
-<div class="text-sm text-gray-400">Performance · Network · CSS Overview · Recorder</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">落地与风险</div>
-<div class="text-sm text-gray-400">兼容性 · 安全边界 · 灰度策略 · 团队清单</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>
 
 <!--
-建议讲法：先讲信息入口，再讲能力分类，最后讲如何落地。这样听众不会只记住几个孤立 API，而是学会建立自己的 Chrome 更新雷达。
+建议讲法：第一部分先建立 Agentic Web 概念，第二部分用官方 demo 和本地兜底页证明“从猜 UI 到调用工具”的转变。Chrome 其它新特性只做快闪，不抢 WebMCP 主线。
 -->

pages/overview.md

@@ -6,10 +6,10 @@
 <div class="font-semibold mb-3">听众能获得</div>
 <div class="space-y-2 text-sm">
 
-- Chrome 近期值得关注的新能力地图
-- 哪些能力已经适合进入生产评估
-- 如何用 DevTools 更快定位性能与兼容性问题
-- 如何把浏览器更新转成团队行动项
+- 理解 AI Agent 操作网页为什么困难
+- 看懂 Chrome 新增能力各自解决什么问题
+- 知道 PPT 与项目代码分别如何演示这些能力
+- 建立实验能力的风险边界
 
 </div>
 </div>
@@ -19,9 +19,9 @@
 <div class="space-y-2 text-sm text-gray-300">
 
 - 不逐条朗读全部 release notes
-- 不做浏览器内核源码分析
-- 不承诺所有实验能力都可直接上线
-- 不替代真实项目的兼容性验证
+- 不做厂商 SDK 接入教程
+- 不复刻每一个 Chrome 实验 API
+- 不承诺实验能力可直接进入生产核心链路
 
 </div>
 </div>
@@ -29,5 +29,5 @@
 </div>
 
 <!--
-这一页是分享定位。Chrome 更新频率很高，真正有价值的不是把每个版本的新字段都念一遍，而是帮助团队快速判断：哪些变化影响我们现在的产品，哪些能力值得试验，哪些 DevTools 工作流可以马上提高排查效率。
+这一页是分享定位。第一部分讲概念，第二部分讲 demo。第二部分的产物是 PPT 加项目代码：PPT 分别介绍新增加的功能，项目代码配合官方材料完成现场演示与兜底。
 -->