一行代码导出UI:Stitch SDK获取HTML与截图的getHtml()、getImage()实战清单

【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载Stitch SDK 是一个开源的 UI 生成工具输入一句文本提示词就能自动生成可交互的 UI 界面再用getHtml()、getImage()一行代码导出界面的 HTML 与截图适合做设计验证、前端原型和自动化截图流程。本文面向新手带你快速上手并附完整方法对照清单。Stitch SDK 是什么3 分钟理解Stitch SDKnpm 包名google/stitch-sdk围绕三个对象工作对象作用Stitch入口管理所有项目Project设计项目调用generate()用提示词生成界面Screen生成出的界面getHtml()/getImage()就挂在这里整体流程只有四步装包 → 配密钥 → 生成界面 → 导出 HTML 和截图。最快安装与配置方法npm install google/stitch-sdk然后设置环境变量这是唯一的必填配置export STITCH_API_KEY你的API密钥想要完整可运行的示例代码可以克隆仓库后直接跑examples/目录git clone https://gitcode.com/gh_mirrors/st/stitch-sdk示例用法见 download-artifacts.ts它演示了从项目里取界面、导出 HTML 和图片并保存本地全过程。一行代码生成并导出 UIimport { stitch } from google/stitch-sdk; const project stitch.project(your-project-id); const screen await project.generate(A login page with email and password fields); const html await screen.getHtml(); // 导出 HTML const image await screen.getImage(); // 导出截图就这么三行。generate()传入一句自然语言提示词几秒到一分钟内即可拿到界面如果还没有项目先用stitch.callTool(create_project, { title: My App })创建一个即可。getHtml() 和 getImage() 到底返回什么这是新手最容易踩坑的地方这两个方法的返回值在不同大版本里语义不同。方法0.4.x 返回1.0 返回getHtml()HTML 下载链接已标记废弃HTML 文本内容getImage()截图下载链接已标记废弃截图字节PNGgetHtmlUrl()HTML 下载链接HTML 下载链接getImageUrl()截图下载链接截图下载链接readHtml()拉取 HTML 文本拉取 HTML 文本readImage()拉取截图字节拉取截图字节一句话记忆要内容就用read前缀或 1.0 的get要链接就用Url后缀。为什么会有两套因为签名下载链接会过期。当前仓库版本为 0.4.0为了不让老代码报错getHtml()保留返回链接的旧行为并标记了deprecated同时新增了readHtml()/readImage()真正拉取内容实现见 screen-ext.ts。升级到 1.0 时的完整变更见 MIGRATION-1.0.md 和 BRIDGE-0.4.0.md。4 个高频导出场景实战清单☑拿到链接直接嵌到网页里调用getHtmlUrl()/getImageUrl()把返回的签名链接填进a href或img src。链接带缓存感知生成时已有 URL 就直接复用不会多打一次 API逻辑见 screen.ts。☑下载 HTML 文本做二次加工如抽取 Tailwind 类名 调用readHtml()拿到的是完整 HTML 字符串可直接写入文件或正则解析。☑下载截图存盘做回归对比调用readImage()返回Uint8Array字节用fs.writeFile存成 PNG 即可。组合示例await fs.writeFile(screen.html, await screen.readHtml()); await fs.writeFile(screen.png, await screen.readImage());☑导出编辑后的新版本界面screen.edit(Make the background dark)返回新 Screen再对新对象调用同样的导出方法即可示例见 edit-screen.ts。 变体界面同理screen.variants(Try different color schemes)返回一组 Screen逐个导出 URL 的写法见 generate-variants.ts。整项目批量导出downloadAssets()不想一个个界面循环Project上有个手写扩展方法downloadAssets(outputDir)会把项目里所有界面及其引用的静态资源一次性下载到本地目录并自动重写 HTML 里的 URL 使其可离线打开实现位于 project-ext.tsconst result await project.downloadAssets(./out); // result.screens: 每个已下载界面的 screenId 与文件路径清单它还内置了路径穿越防护防止恶意界面 ID 写穿目录详见 spec/download.ts 的错误码定义。新手避坑指南签名链接会过期getHtmlUrl()返回的是限时签名链接隔段时间再用会 404。SDK 遇到 404 会抛出带提示的StitchError重新拉取界面即可刷新 URL见 content-handler.ts。界面还没生成完就导出getHtml()系列是缓存感知的——从generate()直接拿到的 Screen 优先用响应里的数据从screens()列表拿到的则会按需调用get_screen接口。错误要接住所有失败统一抛StitchError含code如NOT_FOUND、AUTH_FAILED、message和recoverable字段方便脚本判断是否重试。密钥只从环境变量读STITCH_API_KEY没设会在首次调用时报认证错误不要硬编码进代码。关键文件速查表文件说明README.md快速开始与完整 API 参考screen-ext.tsgetHtml()/readHtml()等手写扩展实现screen.ts生成的 Screen 类与 URL 缓存逻辑download-artifacts.ts导出 HTML 与截图的完整示例MIGRATION-1.0.md0.x → 1.0 返回值语义变更说明BRIDGE-0.4.0.md0.4.0 向后兼容桥的设计动机掌握getHtml()、getImage()及其Url/read变体后你就拥有了文本提示词 → 可交付 HTML 截图的完整自动化链路——这正是 Stitch SDK 对设计师和开发者最大的价值。赞分享【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载相关推荐VuePress 代码片段导入详解Region 区域截取与单行高亮 {11} 语法实战VuePress 代码片段导入详解Region 区域截取与单行高亮 {11} 语法实战 导读 在 VuePress 的 Markdown 文档中通过 前端文档SSR告别截图DataV图表一键导出方案3行代码实现专业级图片下载告别截图DataV图表一键导出方案3行代码实现专业级图片下载 在数据可视化领域将精心设计的大屏图表分享给团队或客户时传统的截图方式往往导致画质模糊、尺寸前端数据可视化UI组件kdmapper 实战演练从零开始构建你的第一个手动映射驱动kdmapper 实战演练从零开始构建你的第一个手动映射驱动 kdmapper 是一款利用 iqvw64e.sys Intel 驱动漏洞实现手动映射非签名驱动应用安全创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考