add official Chrome feature demos

plan/part2.md

@@ -5,7 +5,7 @@
 第二部分用于支撑 40 分钟分享中的 demo 段，目标不是泛泛介绍概念，而是生成两类明确产物：
 
 1. **PPT 主线**：分别介绍 Chrome 最近新增或正在推进的关键能力，说明每个功能解决什么问题、处在什么成熟度、适合用什么官方材料展示。
-2. **项目代码演示**：创建并维护一个配套前端项目。WebMCP 必须有可运行原始工程，其他实验能力可以用稳定页面串起官方 demo、功能对比和现场备用流程。
+2. **项目代码演示**：创建并维护一个配套前端项目。WebMCP 必须有可运行原始工程；Modern Web Guidance、DevTools for agents、HTML-in-Canvas、View Transitions 都要有明确演示入口。
 
 它不是落地教程，也不是厂商 SDK 接入课；目标是让对 Chrome 新特性不熟悉的 Web 开发者看懂：
 
@@ -19,7 +19,7 @@
 1. **官方优先**：优先使用 Chrome 官方文档、官方 demo、官方 demo collection、官方命令示例和官方截图/录屏作为展示材料。
 2. **WebMCP 必须可运行**：WebMCP 是第二部分的主 demo，当前仓库必须提供可打开、可点击、可看源码的本地工程。
 3. **官方优先但不空讲**：官方材料用于确认标准口径和 API 边界；本地工程用于承接现场演示。
-4. **不复刻重实验能力**：不在本地项目里复刻 Prompt API、HTML-in-Canvas、Chrome DevTools for agents 等环境依赖重、版本敏感或 origin trial 依赖强的能力。
+4. **不复刻重实验能力**：不在本地项目里复刻 Prompt API 等环境依赖重、版本敏感的能力；HTML-in-Canvas 只做官方 API 方向和 fallback 展示。
 5. **保持科普口径**：所有 token、耗时、成功率数据都作为具体案例，不当作普适结论；WebMCP 讲“提高可靠性”，不讲“零错误率”。
 6. **实验能力明确标注**：WebMCP、Prompt API、HTML-in-Canvas 等能力需要标注实验性、origin trial、渐进增强或浏览器支持边界。
 7. **剔除厂商私货**：OpenTiny、VAgent、WebAgent、Remote、WebSkills、遥控器组件、SDK 版本等只可作为原始材料背景，不作为 PPT 主概念。若需要表达类似思想，使用中立说法：“Agent 操作说明”“流程说明”“工具调用编排”。
@@ -31,8 +31,8 @@
 先给观众一张总览：第二部分会按“新增功能介绍”和“项目代码演示”展开。
 
 - 新增功能介绍：WebMCP、Modern Web Guidance、DevTools for agents、Prompt API、HTML-in-Canvas、Baseline / View Transitions。
-- 项目代码演示：WebMCP 提供可运行工程，其他能力用本地前端页面承接官方链接、功能卡片、三路径对比和现场备用讲述。
-- 兜底原则：WebMCP 要能跑；其他 Chrome API 不做完整复刻，只承担稳定讲述和演示组织。
+- 项目代码演示：WebMCP、DevTools for agents、HTML-in-Canvas、View Transitions 提供本地页面；Modern Web Guidance 提供官方 CLI 脚本和辅助页。
+- 兜底原则：正式 demo 都要有入口；高风险实验能力不承诺原生 API 一定可用。
 
 ### 2. 主线演示：AI 操作 Web 的三种方式
 
@@ -48,27 +48,29 @@
 
 1. PPT 用表格和流程图描述三种路径。
 2. WebMCP 打开 `/demo/webmcp/index.html` 现场跑工程。
-3. 其他能力用官方 demo 和 `/demo/index.html` 做导航、对比和兜底。
+3. 其他正式 demo 从 `/demo/index.html` 进入，或运行 `scripts/demo-modern-web-guidance.sh`。
 
 ### 3. 新增功能介绍：官方 demo 快闪
 
 每个能力只讲“它是什么、解决什么问题、现场怎么展示”，不展开完整 API 课。
 
 - **WebMCP**：使用官方文档确认 API 口径，同时打开 `/demo/webmcp/index.html` 演示声明式表单工具、指令式 `registerTool`、工具 schema 和调用日志。
-- **Modern Web Guidance**：使用官方 `npx modern-web-guidance@latest install` 和 `search/retrieve` 命令说明“给 AI 编程工具补现代 Web 知识”。
-- **Chrome DevTools for agents**：使用官方 DevTools MCP 资料说明“让 AI 看到浏览器运行时、性能 trace、network、console”。
+- **Modern Web Guidance**：运行官方 `search/retrieve` CLI，并打开 `/demo/modern-web-guidance/index.html` 辅助讲解。
+- **Chrome DevTools for agents**：使用官方 DevTools MCP 配置，让 Agent 检查 `/demo/devtools-agents/index.html` 的 console、network 和性能问题。
 - **Prompt API**：使用官方 Prompt API demos / playground 说明“浏览器内置 AI 能力，适合渐进增强”。
-- **HTML-in-Canvas**：使用官方 origin trial 文章和 demo collection 说明“DOM 进入 Canvas / 3D 场景，同时保留可访问性、搜索、翻译等能力”。
-- **Baseline / View Transitions**：使用 webstatus.dev、Baseline、view-transitions.chrome.dev 说明“哪些能力可以评估，哪些能力提升交互体验”。
+- **HTML-in-Canvas**：打开 `/html-in-canvas/index.html`，支持时跑原生 API，不支持时展示 fallback 和官方运行条件。
+- **Baseline / View Transitions**：Baseline 做方法快闪；View Transitions 打开 `/demo/view-transitions/index.html`。
 
 ## 项目代码演示职责
 
-当前仓库的本地 demo 承担四件事：
+当前仓库的本地 demo 承担六件事：
 
 1. 提供一个稳定的“官方 demo 导航页”，列出每个新增功能对应的官方资料、推荐讲法和现场备用链接。
 2. 提供一个可运行的 WebMCP 原始工程：`public/demo/webmcp/index.html`、`styles.css`、`app.js`。
-3. 提供一个“AI 操作 Web 三路径对比”页面，用表格、流程和状态卡讲清楚视觉识别、DOM/可访问性识别、WebMCP/工具调用的差异。
-4. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。
+3. 提供 Modern Web Guidance 官方 CLI 脚本和辅助页面。
+4. 提供 DevTools for agents 可检查目标页，故意包含 console、network、performance 问题。
+5. 提供 HTML-in-Canvas 和 View Transitions 演示页面。
+6. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。
 
 不做以下事情：
 
@@ -83,10 +85,11 @@
 第二部分建议 15 分钟左右：
 
 - 2 分钟：demo 交付物总览。
-- 7 分钟：WebMCP 可运行工程演示。
-- 4 分钟：三种 AI 操作 Web 路径对比。
-- 4 分钟：Chrome 官方 demo 快闪。
-- 2 分钟：本地兜底和关键风险提示。
+- 6 分钟：WebMCP 可运行工程演示。
+- 4 分钟：Modern Web Guidance 官方 CLI。
+- 4 分钟：DevTools for agents 检查本地问题页。
+- 4 分钟：HTML-in-Canvas / View Transitions。
+- 2 分钟：Prompt API / Baseline 快闪和关键风险提示。
 
 ## 参考资料