update

2026-06-14 16:23:43 +08:00
parent de690f85fa
commit 9ab5f57b85
18 changed files with 40 additions and 119 deletions
@@ -15,7 +15,3 @@ Chrome 更新不是新闻流，而是 Web 产品能力池。
 </div>

 </div>
-
-<!--
-最后强调：浏览器能力变化很快，团队需要的是可持续的更新机制。把 Chrome 新能力当作产品和工程共同评估的素材，而不是纯前端知识点。
-->
@@ -33,7 +33,3 @@
 <div class="mt-8 card-blue text-sm">
 打开总入口：<span class="font-mono">/demo/index.html</span>。正式 demo 入口都从这里进入。
 </div>
-
-<!--
-这一页对应 plan/part2.md 的本地 demo 项目职责。WebMCP 必须打开本地工程演示；其他官方 demo 或网络临时不可用时，再打开 /demo/index.html 页面继续讲官方链接、三路径对比和风险边界。
-->
@@ -34,17 +34,5 @@
 </div>

 <div class="mt-8 card text-sm">
-讲解结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
+核心结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
 </div>
-
-<!--
-官方依据：
- https://developer.chrome.com/docs/devtools/agents/get-started
- https://github.com/ChromeDevTools/chrome-devtools-mcp
-
-现场 prompt:
-Open http://localhost:3030/demo/devtools-agents/index.html.
-Inspect console and network errors.
-Then click "触发长任务" and record a performance trace.
-Summarize what you found.
-->
@@ -37,14 +37,3 @@ flowchart LR
 <div class="mt-8 card-amber text-sm">
 示例任务：创建“订单管理”模块，包括词条、菜单、角色权限绑定。案例数据只说明趋势，不承诺所有项目都有相同收益。
 </div>
-
-<!--
-这一页参考中文实战材料中的三种方案对比，但剔除厂商封装概念。讲述重点不是某个 SDK 强，而是说明 AI 更适合处理结构化工具，而不是在复杂 UI 中不断猜测。
-
-建议讲法：
-1. 先说同一个后台任务：创建词条、创建菜单、绑定角色。
-2. 视觉识别能做，但每步都需要截图和推理。
-3. DOM / A11y 识别更接近结构，但仍可能点错或遗漏状态。
-4. WebMCP 把动作变成工具：createEntry、createMenu、bindRole。
-5. 结论：从“AI 猜 UI”转向“网页提供工具”。
-->
@@ -31,10 +31,3 @@
 <div class="mt-8 card-amber text-sm">
 运行条件：Chrome Canary 149+，开启 <span class="font-mono">chrome://flags/#canvas-draw-element</span>；Chrome 官方说明该 API 在 Chrome 148-150 处于 origin trial。
 </div>
-
-<!--
-官方依据：
- https://developer.chrome.com/blog/html-in-canvas-origin-trial
-
-不要承诺现场一定能跑原生 API。演示核心是 API 方向和浏览器支持边界。
-->
@@ -13,7 +13,7 @@ npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
 </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">

 - AI coding agent 容易写旧方案
@@ -29,13 +29,3 @@ npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
 <div class="mt-8 card-amber text-sm">
 本地辅助页：<span class="font-mono">/demo/modern-web-guidance/index.html</span>；脚本：<span class="font-mono">scripts/demo-modern-web-guidance.sh</span>。
 </div>
-
-<!--
-官方依据：
- https://developer.chrome.com/docs/modern-web-guidance/get-started
-
-现场顺序：
-1. 先跑 search，看官方返回的 use case 列表。
-2. 再跑 retrieve，看具体 Markdown 指南。
-3. 打开本地辅助页展示 dialog/top-layer 动画的现代写法。
-->
@@ -30,18 +30,5 @@
 </div>

 <div class="mt-8 card-amber text-sm">
-最后用这页收束：Chrome 新能力不是孤立 API，而是同时升级 Agent 交互、开发工作流和用户体验。
+收束判断：Chrome 新能力不是孤立 API，而是同时升级 Agent 交互、开发工作流和用户体验。
 </div>
-
-<!--
-官方快闪顺序建议：
-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/
-
-讲法：这里不再逐个展开，只做总览收束和听众记忆点。
-->
@@ -3,7 +3,7 @@
 <div class="grid grid-cols-3 gap-5 mt-8">

 <div class="card-blue">
-<div class="font-semibold mb-3">PPT 讲什么</div>
+<div class="font-semibold mb-3">幻灯片内容</div>
 <div class="space-y-2 text-sm">

 - 分别介绍新增能力
@@ -45,15 +45,3 @@
 <div class="mt-8 card text-sm">
 原则：WebMCP 是主 demo；Modern Web Guidance 和 DevTools for agents 按官方流程演示；HTML-in-Canvas 和 View Transitions 用本地页面辅助展示。
 </div>
-
-<!--
-官方资料入口：
- 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 建立可信证据链”。这样可以降低现场失败风险。
-->
@@ -28,10 +28,5 @@
 </div>

 <div class="mt-8 card text-sm">
-讲解结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
+核心结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
 </div>
-
-<!--
-官方入口：
- https://view-transitions.chrome.dev/
-->
@@ -32,12 +32,3 @@ navigator.modelContext.registerTool(...)
 <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 的步骤，提高性能、可靠性和任务完成准确率”。
-->
@@ -29,12 +29,5 @@ public/demo/webmcp/
 </div>

 <div class="mt-8 card-green text-sm">
-这页要现场打开工程，不只讲链接。观众能看到“页面 UI”和“Agent 工具视角”同时存在。
+现场打开工程，不只展示链接；页面 UI 和 Agent 工具视角需要同时呈现。
 </div>
-
-<!--
-现场建议：
-1. 先打开 http://localhost:3030/demo/webmcp/index.html 或实际 dev server URL。
-2. 展示左侧 HTML 表单和右侧工具列表。
-3. 再切到 app.js，解释 registerTool 的 name / description / inputSchema / execute。
-->
@@ -33,9 +33,5 @@
 </div>

 <div class="mt-8 card text-sm">
-讲解结论：WebMCP 不是让 Agent 更会点击，而是让网页直接声明“我有哪些可调用能力”。敏感动作仍然要保留用户确认、权限和审计。
+核心结论：WebMCP 不是让 Agent 更会点击，而是让网页直接声明“我有哪些可调用能力”。敏感动作仍然要保留用户确认、权限和审计。
 </div>
-
-<!--
-不要现场陷入标准细节。演示后马上回到大图：Chrome 通过 WebMCP、DevTools for agents、Modern Web Guidance 等能力，让 Web 逐步变成 Agent 可以协作的运行环境。
-->
@@ -27,7 +27,3 @@
 </div>

 </div>
-
-<!--
-建议讲法：第一部分先建立 Agentic Web 概念，第二部分用官方 demo 和本地兜底页证明“从猜 UI 到调用工具”的转变。Chrome 其它新特性只做快闪，不抢 WebMCP 主线。
-->
@@ -1,14 +1,14 @@
-# 这次分享解决什么问题？
+# 这次分享的目标

 <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">核心收获</div>
 <div class="space-y-2 text-sm">

 - 理解 AI Agent 操作网页为什么困难
 - 看懂 Chrome 新增能力各自解决什么问题
- 知道 PPT 与项目代码分别如何演示这些能力
+- 知道幻灯片与项目代码如何配合演示
 - 建立实验能力的风险边界

 </div>
@@ -27,7 +27,3 @@
 </div>

 </div>
-
-<!--
-这一页是分享定位。第一部分讲概念，第二部分讲 demo。第二部分的产物是 PPT 加项目代码：PPT 分别介绍新增加的功能，项目代码配合官方材料完成现场演示与兜底。
-->