From 8739f31492ea263cca2725c69a8c29753f275580 Mon Sep 17 00:00:00 2001
From: xinbao <fa@ijust.cc>
Date: Sun, 14 Jun 2026 14:39:50 +0800
Subject: [PATCH] docs: add agentic web outline

---
 README.md | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/README.md b/README.md
index 264301c..6554601 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,97 @@
 
 这是一个基于 [Slidev](https://github.com/slidevjs/slidev) 的 Chrome 新特性分享项目骨架。
 
+## 内容定位
+
+这次分享面向对 Chrome 新特性不太熟悉、但有 Web 开发经验的开发者。内容不做落地教程，不展开 SDK 接入和企业级架构，也不覆盖所有业务场景；核心目标是用科普方式讲清楚一个方向：
+
+> Web 正在进入 Agentic 时代。网页未来不只是给人看的，也会被 AI Agent 理解、调用和操作。
+
+因此，分享主线选择 **Agentic Web / WebMCP**。Chrome 的其它新特性作为辅助背景，用来说明浏览器正在同时升级用户体验、开发者工作流和 Agent 交互能力。
+
+## 推荐讲述大纲
+
+### 1. 背景：浏览器的新变化
+
+以前 Web 页面主要服务人类用户：看、点、输入、提交。现在 AI Agent 也开始成为一种新的使用者：它要理解网页、执行任务、跨页面操作、帮用户完成流程。
+
+这一部分只建立认知，不急着讲 API。重点让听众先接受一个判断：Web 开发者未来可能要同时设计“人类层”和“Agent 层”。
+
+### 2. 问题：为什么 AI 操作网页不可靠
+
+用三种方案做对比：
+
+- **视觉识别**：AI 看截图，判断按钮在哪里。优点是通用、不需要改页面；问题是慢、贵、token 高，UI 一变就容易失误。
+- **DOM / 可访问性树识别**：AI 读取页面结构，寻找按钮、表单、菜单。它比纯视觉更结构化，但仍然容易被复杂组件、隐藏状态和错误点击影响。
+- **WebMCP / 工具调用**：网页主动告诉 AI：“我这里有这些工具，参数是这些，调用后会执行这些业务逻辑。”AI 不再猜 UI，而是调用明确的工具。
+
+这一段的核心结论是：AI 最擅长处理结构化信息，不擅长猜复杂 UI。WebMCP 的价值就是把网页能力结构化地交给 Agent。
+
+### 3. Demo 对比：同一个任务，三种方式
+
+Demo 只做科普对比，不做现场代码改造。
+
+建议任务设定为：在一个后台系统里完成“创建订单管理模块”，包括创建词条、创建菜单、绑定角色权限。
+
+对比讲法：
+
+- 视觉识别：一步一步截图、找菜单、填表单，可能能完成，但过程慢，token 消耗高。
+- DOM / 结构识别：可能更快，但复杂交互下容易点错、漏选、误删或陷入错误流程。
+- WebMCP：直接调用页面暴露的业务工具，速度快，过程清晰，token 更少，行为也更可控。
+
+注意：中文实战材料里的 token 和耗时数据可以作为案例素材，但要标注为特定案例结果，不作为所有场景的通用结论。
+
+### 4. 核心概念：WebMCP 是什么
+
+WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具说明书”。
+
+一个工具通常包含：
+
+- 名字：这个工具叫什么
+- 描述：它适合什么时候用
+- 参数：需要哪些输入
+- 执行逻辑：调用后网页做什么
+- 返回结果：告诉 Agent 成功还是失败
+
+可以用 `document.modelContext.registerTool` 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。
+
+### 5. 核心概念：WebSkills
+
+WebMCP 解决“能调用什么工具”。WebSkills 解决“复杂任务应该怎么走”。
+
+例如用户说“帮我申请价保”，这不是一个单工具任务。它可能需要：
+
+1. 去订单页查订单
+2. 拿到订单号
+3. 跳到价保页
+4. 填申请单
+5. 最后让用户确认提交
+
+WebSkills 的角色就是告诉 Agent 这些流程规则。可以用一句话总结：
+
+> WebMCP 是工具箱，WebSkills 是操作手册。
+
+### 6. Chrome 新特性快闪
+
+这一部分只做快速展示，不展开细节：
+
+- **Modern Web Guidance**：给 AI 编程工具补现代 Web 知识，避免写过时代码。
+- **Chrome DevTools for agents**：让 AI 能读取 console、network、performance、Lighthouse 等真实浏览器信息。
+- **Prompt API / Built-in AI**：浏览器内置本地 AI 能力，适合渐进增强。
+- **HTML-in-Canvas**：把真实 DOM 放进 Canvas / 3D 场景。
+- **Baseline**：告诉开发者哪些 Web 能力已经可以跨浏览器放心用。
+- **View Transitions / Navigation API**：让 Web 应用切换体验更自然。
+
+这一章服务于主线：Chrome 正在让 Web 同时面向人、开发者工具和 AI Agent 进化。
+
+### 7. 收束：开发者现在该记住什么
+
+- Web 页面未来不只是给人看的，也会被 Agent 使用。
+- 语义化、可访问性、清晰的业务函数边界会变得更重要。
+- WebMCP 代表一种方向：从“AI 猜 UI”转向“网页主动提供能力”。
+- 高风险操作仍然需要权限、确认和审计边界。
+- 新能力要渐进增强，不要假设所有浏览器都已支持。
+
 ## 本地开发
 
 - `pnpm install`