update
This commit is contained in:
+16
-12
@@ -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 页面继续讲官方链接、三路径对比和风险边界。
|
||||
-->
|
||||
|
||||
@@ -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”转向“网页提供工具”。
|
||||
-->
|
||||
|
||||
+22
-14
@@ -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 主线。
|
||||
-->
|
||||
|
||||
+30
-16
@@ -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 建立可信证据链”。这样可以降低现场失败风险。
|
||||
-->
|
||||
|
||||
@@ -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 的步骤，提高性能、可靠性和任务完成准确率”。
|
||||
-->
|
||||
@@ -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。
|
||||
-->
|
||||
@@ -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 可以协作的运行环境。
|
||||
-->
|
||||
Reference in New Issue
Block a user