【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载想用一个 AI Agent 自动创建项目、生成 UI 界面并提取 HTML 和截图吗stitch-sdk 让你只需一句话指令就能办到它是 Google 开源的 UI 屏幕生成 SDK可从文本提示生成 UI 屏幕并程序化提取其 HTML 与截图。本文将带你用stitchAdkTools()把 Stitch 的全部能力装进 Google ADK 的 LlmAgent几分钟内拥有一个能自主干活的 AI 设计师 Agent。一、Stitch SDK 与 Google ADK 分别是什么Stitch SDKgoogle/stitch-sdk封装了 Stitch MCP 服务器提供创建项目、文本生成界面、编辑屏幕、生成变体、设计系统管理等 15 个工具并支持直接下载 HTML 和截图。Google ADKAgent Development Kit for TypeScript构建 LLM Agent 的官方框架LlmAgent能自主决策调用哪些工具、按什么顺序调用。两者的结合点就是stitchAdkTools()——一行调用把 Stitch 的所有 MCP 工具转成 ADK 可直接使用的FunctionTool数组。 适配源码位于 packages/sdk/src/adk-adapter.ts入口文件为 packages/sdk/src/adk.ts完整工具清单见 tools-manifest.json。二、环境准备安装 Stitch SDK 与配置 API Key1. 安装依赖Stitch SDK 对google/adk采用可选 peer 依赖设计——不使用 ADK 也不会强制安装。本教程需要用到它npm install google/stitch-sdk google/adk2. 配置环境变量变量说明STITCH_API_KEYStitch 服务认证密钥必需除非使用 OAuthGOOGLE_GENERATIVE_AI_API_KEYGemini 模型密钥ADK Agent 的大脑配置好之后SDK 的 singleton.ts 会读取环境变量并惰性初始化客户端无需任何手动接线。若忘记安装google/adk导入google/stitch-sdk/adk时会得到一条清晰的安装提示而不是晦涩的模块错误——这个防护逻辑就写在 adk-adapter.ts 的顶部。三、认识 stitchAdkTools()一个函数打通 Stitch 与 ADKimport { stitchAdkTools } from google/stitch-sdk/adk; const tools stitchAdkTools(); // 返回全部 Stitch 工具的 FunctionTool 数组这个函数背后做了三件脏活让你在 Agent 里完全不用关心自动接线每个工具的execute都预绑定到StitchToolClient.callTool()模型调用即直连 Stitch MCP 服务器Schema 清洗Gemini API 不接受$defs、$ref等标准 JSON Schema 写法cleanSchema()会递归展平并剔除 Gemini 校验器拒绝的字段见 adk-adapter.ts 中的实现拼写校验include里写了不存在的工具名会立刻抛错并列出全部可用工具名避免工具悄悄消失这种最难排查的 Bug。内置的 15 个 Stitch 工具一览工具名作用create_project/get_project/list_projects/delete_project项目管理generate_screen_from_text文本生成界面核心工具⭐edit_screens/generate_variants编辑与变体生成get_screen/list_screens获取屏幕详情、HTML、截图create_design_system/update_design_system/apply_design_system/list_design_systems设计系统主题/品牌create_design_system_from_design_md/upload_design_md从 Design.md 导入设计系统四、实战三步创建一个 AI 设计师 Agent第 1 步定义设计师 Agentimport { stitchAdkTools } from google/stitch-sdk/adk; import { LlmAgent } from google/adk; const designerAgent new LlmAgent({ name: Designer, model: gemini-2.5-pro, instruction: You are a designer. Create a project and generate a screen., tools: stitchAdkTools(), });instruction写得越具体Agent 的工具编排就越靠谱——官方 README 中的推荐写法就是让它创建项目并生成界面。第 2 步用 InMemoryRunner 发起对话import { InMemoryRunner } from google/adk; const runner new InMemoryRunner({ agent: designerAgent }); const events runner.runEphemeral({ userId: demo-user, newMessage: { role: user, parts: [{ text: 创建一个登录页面包含邮箱和密码输入框 }], }, }); for await (const event of events) { console.log(event); // 流式观察模型思考与工具调用 }第 3 步观察 Agent 自主编排你会看到模型依次自动调用create_project→generate_screen_from_text→get_screen全程零干预。完整可运行的端到端演示可以参考仓库自带的集成测试 adk-e2e.test.ts它演示了从对话创建项目到生成仪表盘卡片并取回 HTML的全过程。五、给 Agent 精准配权include 白名单过滤把 15 个工具全交给 Agent 没问题但小任务场景下收窄工具面能让模型决策更快、更稳const tools stitchAdkTools({ include: [create_project, generate_screen_from_text, get_screen], });拼错工具名立即抛错错误信息中列出所有可用工具名传apiKey可通过stitchAdkTools({ apiKey: ... })覆盖环境变量适合多租户场景。单元测试 adk-adapter.test.ts 覆盖了过滤、runAsync委托callTool等关键行为可作为断言参考。六、从设计稿到可运行代码AI 设计师的进阶玩法get_screen的返回中带有htmlCode.downloadUrl下载后即可拿到完整 HTML内含 Tailwind 配置与字体链接。仓库的 E2E 测试还展示了更酷的链路再用一个 LLM Agent 把 Stitch 的 HTML 设计稿转换成完整的 Vite React TypeScript 应用最后通过 SWC 校验组件——文本提示 → 设计稿 → 可运行代码的全自动流水线。如果你只需要 AI SDKVercel生态而不是 ADK同仓库提供对等的stitchTools()从google/stitch-sdk/ai导入即可两种适配器共用同一套 tools-adapter 层。七、常见问题与排错指南现象原因与解决提示缺少google/adk执行npm install google/adk可选 peer 依赖AUTH_FAILED错误检查STITCH_API_KEY是否已设置errors.ts 中定义了统一错误码429 / 503 限流SDK 对只读工具get_*、list_*内置指数退避重试一般无需处理Agent 调用工具过多用include白名单收窄工具面八、总结一张地图看懂本教程一个入口stitchAdkTools()adk.ts完成 Stitch 工具 → ADK FunctionTool 的全部转换一套配置STITCH_API_KEY Gemini 密钥其余全部惰性自动初始化一个结果LlmAgent自主完成建项目 → 生成界面 → 取回 HTML/截图的设计闭环一份底稿15 个工具的完整 Schema 见 tools-manifest.json按需裁剪。现在把instruction换成你的产品需求你的 AI 设计师就开工了 赞分享【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载相关推荐为 Google Stitch 生成语义化设计系统taste-skill 的 stitch-skillStitch Design Taste完整实战指南为 Google Stitch 生成语义化设计系统taste skill 的 stitch skillStitch Design Taste完整实战指南AI 技能前端设计系统Google Stitch SDK 完整入门指南用一句话文字生成 UI 界面的 AI 设计工具Google Stitch SDK 完整入门指南用一句话文字生成 UI 界面的 AI 设计工具 Google Stitch SDK 是 Google Labs用 taste-design 打造高级感设计系统Stitch DESIGN.md 品味标准的完整实现指南用 taste design 打造高级感设计系统Stitch DESIGN.md 品味标准的完整实现指南 导读 本文以 stitch skills 仓库中AI 技能AI 插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考