Stitch导出HTML和截图:下载URL分别取回,保留同屏版本对应关系
素材身份:作者原创输入/可编辑参考。目标工具未在本轮执行。
先打开 index.html;input.csv 是原始字段,reference.csv 是验收基准,negative.csv 是故意构造的坏样例。
actual-results.csv 保留未测状态,实际执行后再填写。
前置条件:
本地练习资料可免费编辑与检查;执行Stitch需要可访问账号和已配置的官方MCP或SDK,云端额度/计划以账户页面为准。
在隔离练习项目操作,保留projectId、screenId和版本;本稿未调用目标云端,不能据此声称生成完成。
操作步骤:
1. 锁定同一屏幕
从项目读取目标screen,记录screenId和版本时间。
不要一个方法用旧引用、另一个方法重新选最新页面。
2. 获取两种下载地址
分别await screen.getHtml()和screen.getImage()。
官方SDK返回URL,不是HTML字符串或图片字节。
3. 下载并检查类型
在授权环境取回两个URL,将HTML和图片写到不同文件。
若返回错误页或鉴权失败,保存状态并停止,不按扩展名伪装成功。
4. 检查HTML内容
确认文件含HTML结构与页面文字,而非一行https链接。
如果下载页面依赖外链资源,另外记录依赖,不默认单文件离线可用。
5. 配对截图和源码
给两份文件相同screen键与取得时间,打开检查标题、布局和文案。
图片与HTML不一致时先核对来源,不手工改图掩盖版本差异。
6. 处理过期资源
地址失效时从同一目标screen重新读取新下载地址。
不要把旧URL当永久公开资源写进长期教程素材。
7. 交付导出清单
保存本地文件、内容类型和屏幕身份,删除日志中不必要的临时敏感参数。
未执行下载时仍为待验证,不称源码已运行。
验收:
HTML文件含实际页面而非下载URL字符串。
图片和HTML匹配同一screen。
错误页不被当成功资源。
官方资料:
https://github.com/google-labs-code/stitch-sdk
图片身份:assets/ 为内置image_gen生成的原创练习输入缩略版,原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。