用途:从本地运行的 Web 应用或模拟组件中提取单文件、自包含的静态 HTML 快照,用于审阅或上传至 Stitch。使用前必须让用户选择策略,推荐 Strategy A(Puppeteer)。
主要能力(Strategy A):启动无头 Chrome,捕获完整渲染后的 DOM,将所有 CSS 内联、图片转为 base64,生成自包含 HTML。自动采集 document.styleSheets 的 CSSOM 规则、内联 link stylesheet、转换 img src/srcset 与同源图标字体为 base64、移除 script 与 Vite HMR 样式块、解析相对 CSS url()。
必要用法:先启动本地应用并记录端口,向用户确认后再运行脚本: npx tsx <SKILL_DIR>/scripts/snapshot.ts --url http://localhost:5173 --output .stitch/home.html --wait 2000 多路由每页运行一次。常用参数:--url(必填)、--output(必填)、--wait(默认 1000)、--viewport(默认 1280x800)、--html-class(如 dark)、--remove-fixed、--full-height、--title、--auth-script、--inline-canvas。完成后停止临时启动的开发服务器。
适用场景:React+Vite、Next.js(--wait 3000)、Angular、Vue/Nuxt、Svelte、Storybook、SSR;需登录的页面用 --auth-script 传入导出默认 async (page)=>void 的模块;图表用 --inline-canvas。
限制与注意:Strategy B(浏览器子代理)适合需先交互的页面,但大页面可能截断;静态回退 MockPage.jsx 仅在应用无法本地运行时使用。不得在用户未批准的情况下上传产物、不得读取或提交密钥与凭证、不得声称宿主未暴露的 MCP 调用成功。验证需确认 .stitch/ 下输出存在、记录路由/视口/等待/标志、图片已内联或为稳定外链、无个人隐私数据。具体收费与平台要求暂未提供。