【免费下载链接】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 界面、并程序化提取其 HTML 和截图的 TypeScript SDK。它的有趣之处在于SDK 本身并不是靠大模型写出来的而是一条零LLM代码生成管线——先抓取 MCP 工具清单再由确定性脚本编译成强类型 TypeScript SDK。本文将带你完整看懂这条管线的三个阶段、锁文件机制以及那些防止悄悄丢数据的护栏设计。️ 先看懂全貌一条 3 阶段管线传统做法是把 API 文档丢给 LLM 让它生成 SDK但输出不稳定、每次都不一样。Stitch SDK 走的是另一条路LLM 只在设计阶段提供领域知识代码生成本身 100% 确定、可复现。整条管线在 RELEASING.md 中有明确顺序阶段做什么产物谁来做Stage 1 · 抓取连接 Stitch MCP 服务器调用tools/listtools-manifest.json脚本 scripts/capture-tools.tsStage 2 · 设计把工具映射到领域模型类与方法绑定domain-map.json人 / Agent 依据 IR 规范Stage 3 · 生成校验 IR 并发射 TypeScript 源码packages/sdk/generated/src/脚本 scripts/generate-sdk.tsStage 4构建、测试、锁文件完整性校验可发布的 npm 包CI scripts/validate-generated.ts文件头注释直接写明了原则见 scripts/generate-sdk.tsDeterministic — no LLM involved.确定性生成无 LLM 参与 第一阶段从 MCP 服务器抓取原始工具清单第一步是最老实的一步scripts/capture-tools.ts 用真实的StitchToolClient连上 Stitch 的 MCP 端点调用listToolsRaw()把服务器原样返回的工具 schema一字不改地写入 tools-manifest.json。当前清单共收录了 15 个工具比如create_project、generate_screen_from_text、edit_screens、get_screen等每个工具都带有完整的inputSchema/outputSchemaJSON Schema例如设备类型的枚举值、projects/{project}这样的资源名格式全部原样保留。两个值得注意的工程细节原始即真相manifest 存的是RAW数据如果服务器 schema 有缺陷修复动作发生在加载时见 packages/sdk/src/schema-repair.ts修复记录会写进锁文件而不是悄悄改掉原始事实来源。原子写入先写.tmp再rename配合 stitch-sdk.lock 的 SHA-256 哈希防止半截文件污染管线。 第二阶段domain-map.json——管线的中间表示这是整条管线里唯一需要设计品味的一步。domain-map.json 把 15 个平铺的 MCP 工具组织成 4 个领域类Stitch → Project → Screen / DesignSystem也就是你最终看到的面向对象 API。它由两部分构成结构由 scripts/ir-schema.ts 中的 Zod schema 严格约束1.classes——领域类声明声明每个类的构造参数、工厂方法如stitch.project(id)这种不发 API 调用就能拿到句柄的方法、以及手写的副作用方法。例如 Screen 类的getHtml/getImage属于二进制下载无法生成必须手写见 domain-map.json。2.bindings——工具到方法的绑定每条绑定声明调用哪个工具、挂在哪个类的哪个方法上、参数从哪来、返回值如何从响应中投影出来。看一个真实例子——generate方法domain-map.json{ tool: generate_screen_from_text, class: Project, method: generate, args: { projectId: { from: self }, prompt: { from: param }, deviceType: { from: param, optional: true, default: DESKTOP } }, returns: { class: Screen, kind: generation, projection: [ { prop: outputComponents, each: true }, { prop: design }, { prop: screens, each: true } ] } }参数来源ArgSpec有四种self实例自身字段、selfArray、param调用者传入、computed模板拼接如projects/{projectId}/screens/{screenId}。而projection是精华所在——它把如何从原始响应里取出屏幕列表写成了结构化步骤prop/index/each/find取代了不可校验的字符串路径。返回值为kind: generation时强制要求用each收集全部结果防止一次生成多个屏幕却只取到第一个的经典 bug。⚙️ 第三阶段确定性发射 TypeScriptscripts/generate-sdk.ts 读取两份输入经过校验后输出 packages/sdk/generated/src/ 下的 8 个文件。核心机制有四个① JSON Schema → TypeScript 类型jsonSchemaToTs()把工具 schema 递归翻译成 TS 类型enum变联合类型MOBILE | DESKTOP | ...$defs变具名接口数组元素是联合类型时还会自动加括号(A | B)[]以避免优先级陷阱。② 投影步骤 → 投影代码emitProjection()把上面的 projection 步骤翻译成真实代码简单链变成可选链raw?.outputComponents?.[0]each步骤展开成flatMapfind步骤生成(arr ?? []).find(c ...)扫描式取值。③ 参数签名必需参数在前可选项归入 options所有可选参数被收集成一个尾部的options?: { ... }对象。好处是未来服务器新增参数时老签名不破坏——这也是 screen.ts 里edit(prompt, deviceTypeOrOptions?, modelId?)这种签名的由来。④ 响应对象自动缓存带cache声明的方法如getHtmlUrl会先生成一段缓存检查生成响应里已经有这个 URL 就直接返回不发新请求调用后还会writeBack合并回this.data。这些细节能省掉大量重复 API 调用。生成结果长什么样看 packages/sdk/generated/src/screen.ts——每个方法都有 JSDoc 注明它来自哪个 MCP 工具参数类型从 schema 推导返回PromiseGenerationScreen, EditScreensResponse连枚举值都是精确的联合类型async edit(prompt: string, deviceTypeOrOptions?: ... | { ... }): PromiseGenerationScreen, EditScreensResponse 锁文件让重新生成变得可审计每份生成文件的头部都写着AUTO-GENERATED ... DO NOT EDIT并嵌入两个源文件的 SHA-256 前缀。stitch-sdk.lock 则记录了三段哈希manifest、domain-map 和整个生成目录。这带来三个可验证的性质字节级可复现同一份输入任意机器上生成出的文件逐字节一致哈希用相对路径、POSIX 规范化跨机器可移植幂等连续跑两次内容没变就零 diff连generatedAt时间戳都不动CI 可校验scripts/validate-generated.ts 在 CI 里重新计算哈希发现提交了与锁文件不符的旧代码会直接红灯杜绝发布过期 SDK。️ 护栏把LLM 容易犯的错变成硬错误这条管线最有意思的部分是它把历史上真实踩过的坑全部变成了编译期/生成期就爆炸的检查护栏触发条件效果.strict()的 IR schemadomain-map 里出现未知字段直接报错——被静默丢弃的键意味着设计者以为生效了投影校验validateProjection()对数组 schema 直接取属性、路径不存在的属性生成前抛出并给出修复提示无界数组 lint对无maxItems的数组取index/find单元素警告可能悄悄截断数据对generate_*/edit_*/apply_*等生成类工具升级为硬错误generate-sdk.ts副作用冲突检查手写扩展方法与生成方法同名报错扩展方法不得遮蔽生成方法并校验 spec 文件存在损坏的锁文件锁不是合法 JSON拒绝运行绝不静默重置那会无声丢弃历史记录换句话说以前靠人肉 review 才能发现的生成类工具只返回第一个屏幕这类数据截断问题现在会在bun run generate阶段直接以❌报错并终止。 小结零 LLM 到底省掉了什么可复现同样的输入永远得到同样的 SDK哈希可审计而不是再生成一次试试可校验IR 的每个字段都被 schema 约束投影路径在生成前就对着 outputSchema 逐段验证可演化服务器新增工具时重跑 Stage 1 抓取 Stage 3 生成即可手写扩展方法与生成代码有清晰的边界和命名保护。如果你想动手体验仓库是只读的公开镜像完整流程命令capture → generate → build → test → validate都列在 RELEASING.md 中测试套件里还有 scripts/test/codegen-snapshot.test.ts 用 fixture 对真实管线做快照回归。对 SDK 使用侧的入门如何用stitch.project()生成屏幕、取 HTML 与截图可继续阅读 packages/sdk/README.md。赞分享【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载相关推荐Wails自动绑定生成机制揭秘从Go代码到TypeScript类型定义的完整指南Wails自动绑定生成机制揭秘从Go代码到TypeScript类型定义的完整指南 Wails框架的自动绑定生成机制是其最强大的功能之一能够将Go语言的后端代桌面应用跨平台CLI前端Higress WASM Go SDK 实现 MCP Server 完整指南从工具开发到 REST-to-MCP 零代码转换Higress WASM Go SDK 实现 MCP Server 完整指南从工具开发到 REST to MCP 零代码转换 本篇技术指南围绕 HigressAPI网关后端云原生LLM 网关人工智能MCP 服务Stitch SDK接入Vercel AI SDK:让Gemini自主调用MCP工具生成UI界面Stitch SDK接入Vercel AI SDK:让Gemini自主调用MCP工具生成UI界面 Stitch SDK 是一款开源的 Text to UI 开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
