以 skill 自身的术语
通过 Puppeteer 启动无头 Chrome，从正在运行的 Web 应用中生成一个自包含的 HTML 文件，捕获完全渲染后的 DOM、内联 CSSOM 规则，并将图片转换为 base64 data URI。它适用于任何框架 —— React/Vite、Next.js、Angular、Vue/Nuxt、Svelte、Storybook —— 无需 MockPage.jsx。
该 skill 会强制 Agent 在继续之前询问要使用两种捕获策略中的哪一种，并推荐使用 Puppeteer 快照方案，同时在本地服务器启动后暂停以等待确认。可用的选项涵盖等待时间、viewport、深色模式、固定元素移除、canvas 内联以及用于登录受限页面的鉴权脚本。文档附录中还提供了在应用无法本地运行时，将 React 组件手动拆解为 MockPage.jsx 的方法。
它产出什么
- 每个被捕获的路由对应一个自包含的 HTML 文件，样式已内联，图片以 base64 形式嵌入。
- 当你捕获多个视图时（例如首页、定价页和仪表盘），每个路由会生成一个文件。
- 使用 canvas 选项时，图表会从 canvas 元素序列化为 base64 图片。
工作方式
- 01让用户选择策略
在进行任何提取之前，Agent 会展示 A/B 对比，推荐 Puppeteer 方案，并等待明确的选择。
- 02按路由运行快照脚本
每个 URL 对应一条命令，将每次捕获写入 .stitch 中各自的文件，并在网络空闲后固定等待一段时间。
- 03让脚本内联页面
CSSOM 规则、链接的样式表、图片、srcset 来源以及同源图标字体都会被折叠进该文件，因此无需依赖正在运行的服务器。
- 04根据框架调整标志位
等待时间和 URL 因技术栈而异，例如框架需要对服务端渲染的标记进行 hydration 时，等待时间会更长。
- 05对受限页面进行身份验证
鉴权模块会在 Puppeteer 会话内运行，之后脚本会带着已建立的会话返回原始 URL。
- 06仅在必要时才回退到 Mock 方案
当应用完全无法启动时，附录中的方案会将组件拆解为一个 JSX 文件，而不是捕获实时渲染结果。