Stitch静态HTML快照:内联响应式图片与canvas,断开服务后检查缺图 素材身份:作者原创输入/可编辑参考。目标工具未在本轮执行。 先打开 index.html;input.csv 是原始字段,reference.csv 是验收基准,negative.csv 是故意构造的坏样例。 actual-results.csv 保留未测状态,实际执行后再填写。 前置条件: 本地练习资料可免费编辑与检查;执行Stitch需要可访问账号和已配置的官方MCP或SDK,云端额度/计划以账户页面为准。 在隔离练习项目操作,保留projectId、screenId和版本;本稿未调用目标云端,不能据此声称生成完成。 操作步骤: 1. 准备两类媒体 本地样本放一张带srcset的活动图和一个canvas柱图。 为二者记录实际像素和文字说明,不把纯色占位块当图表。 2. 固定视口和状态 选择1280x800、筛选项“本周”,等待图片加载。 截图状态和保存状态必须相同,避免快照拿到默认空图。 3. 使用快照脚本 读取官方extract-static-html的snapshot.ts参数,指定输出文件。 canvas需启用--inline-canvas,普通DOM提取不会自动保存canvas像素。 4. 检查资源内联 检查img src与srcset、source srcset是否已内联或清除失效项。 保留一个故意未内联的负例,看浏览器是否退回错误网络地址。 5. 断开本地服务复查 只在作者练习副本停止服务后打开standalone.html。 外部字体可能仍依赖网络,单独记录,不能一概宣称所有资源全离线。 6. 比对图表数据 将快照中的三根柱子与原始值12、18、9对应。 图像保留不代表图表仍可交互或筛选,应明确静态边界。 7. 交付静态输入 保存HTML、资源检查表和在线/断开服务对照。 后续上传Stitch需另行实际执行,不把文件生成等同云端导入成功。 验收: 停止服务后图片和canvas柱图仍显示。 srcset无死链覆盖已内联src。 静态图表不冒充可交互图表。 官方资料: https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/SKILL.md 图片身份:assets/ 为内置image_gen生成的原创练习输入缩略版,原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。