Product Tour Capture — 产品演示捕获

SKILL：产品演示捕获 最后使用：2026-03-24 内存引用：1 状态：活动 版本：1.0 作者：Loki 创建：2026-03-24 验证：Reddi Agent Protocol（14步，agent-protocol.reddi.tech/tour） 此技能的作用 捕获一系列Playwright截图，从一个活的Web应用程序中，构建一个全屏可点击的幻灯片页面（/tour），并部署它。 为任何Web应用程序提供一个精致的“产品演示”页面，在一个playbook运行中。 输入接口 TourPlaybookInput { appRepo：字符串 // Next.js仓库的本地路径 baseUrl：字符串 // 部署应用程序的URL（https://...） outputDir：字符串 // 相对于仓库的public/tour/路径 tourPagePath：字符串 // 相对于仓库的app/tour/page.tsx路径 steps：TourStep[] } 接口 TourStep { id：字符串 // 例如“01-landing” — 用作文件名 url：字符串 // 应用程序路径，例如“/” title：字符串 // 侧边栏标签 caption：字符串 // 在游览中显示的1句话描述 scroll？：数字 // 加载后滚动的像素 clickTab？：字符串 // 点击的选项卡文本（shadcn Tabs） click？：字符串 // 点击的元素文本 fill？：字符串 // 填入第一个文本区域的文本 wait？：数字 // 填充/点击后等待的毫秒数 } 输出接口 TourPlaybookOutput { screenshotsCapured：数字 screenshotsFailed：字符串[] // 失败捕获的ID tourUrl：字符串 // 部署的游览页面的直播URL deployedAt：字符串 // ISO时间戳 } 多代理playbook 代理角色 代理 任务 输入 输出 Orchestrator（Loki） 接收请求，构造步骤列表，生成代理 用户简报 TourPlaybookInput 捕获代理（Kit/Finn） 运行Playwright，捕获截图 TourPlaybookInput screenshotManifest[] 构建代理（Kit） 生成/tour页面从模板+清单，构建，部署 screenshotManifest[] + TourPlaybookInput tourUrl QA代理（Oli） 检查截图（空？匹配标题？） screenshotManifest[] 通过/警告/失败报告 交接模式 Loki构造TourPlaybookInput → 生成Kit（捕获）→ node scripts/capture-tour.mjs → 返回：{ captured：14，failed：[]，manifest：[...] } → 生成Kit（构建）→ 写入app/tour/page.tsx从TOUR_STEPS模板 → npm run build → vercel deploy → 返回：{ tourUrl，httpStatus：200 } → 生成Oli（QA）→ 检查每个截图不是空的（文件大小> 5KB）→ 检查3个标题匹配可见页面内容 → 返回：通过/条件通过/失败 捕获脚本模板 位置：scripts/capture-tour.mjs在目标仓库中。 关键模式： page.goto（url，{ waitUntil：'networkidle'，timeout：20000 }） 选项卡点击：page.getByRole（'tab'，{ name：tabName }）。first（） 滚动：page.evaluate（y => window.scrollTo（0，y），scrollY） 填充+触发：textarea.fill（text）→ button[generate]。click（）→ waitForTimeout（ms） 始终waitForTimeout（600）在导航之前截图 视口：1280 x 800（16:10，适用于侧边栏布局） 游览页面模板 全屏布局（无滚动）： 顶部栏： “产品游览 · X of N” + 自动播放切换 + “尝试直播 →” CTA 主要：截图面板（带有上一个/下一个chevrons）+右侧边栏（步骤信息+列表） 进度条：索拉纳紫色 → 绿色渐变 模板组件位于app/tour/page.tsx。 TOUR_STEPS是唯一变化的东西。 何时使用此技能 任何需要“产品游览”页面的Web应用程序，用于演示，黑客马拉松或入职 在进行了重大UI重建后（重新捕获以保持游览当前） 对于黑客马拉松提交 —— 法官可以自行游览，无需直播演示 经验教训（来自Reddi Agent Protocol运行） 选项卡点击需要getByRole（'tab'）— 通用getByText可以击中非选项卡元素 演示管道截图：填充+点击+等待（7000）用于中间管道，等待（13000）用于完成 public/tour/中的23个文件在重新运行后 —— 旧截图仍然存在，这是可以的（被覆盖） 构建命令：使用node node_modules/next/dist/bin/next build，而不是npx next build —— .bin/next shim在Node 24的一些环境中有路径问题 自动播放4s是正确的节奏 —— 足够慢以阅读标题，足够快以感觉动态 14步是最佳选择 —— 更少的感觉很薄，更多的感觉很累 playbook架构说明 此技能是playbook架构的一个很好的测试用例，因为： 清晰的3代理交接，定义了每个步骤的I/O 捕获代理是无状态的（只是运行一个脚本） 构建代理具有一个固定模板，只有数据更改 QA代理具有一个简单的通过/失败评分（文件大小+标题检查） 总运行时间：~5-8分钟，端到端 完全参数化 —— 适用于任何Next.js应用程序，具有任何步骤列表 未来扩展 v2：接受一个Figma URL或站点地图，并自动生成步骤列表（Archie研究应用程序） v2：QA代理使用视觉模型来验证截图内容与标题匹配 v3：视频导出 —— 将截图拼接成60秒的演示视频（Finn） v3：嵌入游览作为模态窗口