企业官网建设流程全解析

想用一个 AI Agent 自动创建项目、生成 UI 界面并提取 HTML 和截图吗？stitch-sdk 让你只需一句话指令就能办到：它是 Google 开源的 UI 屏幕生成 SDK，可从文本提示生成 UI 屏幕并程序化提取其 HTML 与截图。本文将带你用stitchAdkTools()把 Stitch 的全部能力"装进" Google ADK 的 LlmAgent，几分钟内拥有一个能自主干活的 AI 设计师 Agent。

一、Stitch SDK 与 Google ADK 分别是什么？

• Stitch SDK（@google/stitch-sdk）：封装了 Stitch MCP 服务器，提供创建项目、文本生成界面、编辑屏幕、生成变体、设计系统管理等 15 个工具，并支持直接下载 HTML 和截图。
• Google ADK（Agent 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 Key

1. 安装依赖

Stitch SDK 对@google/adk采用可选 peer 依赖设计——不使用 ADK 也不会强制安装。本教程需要用到它：

npm install @google/stitch-sdk @google/adk

2. 配置环境变量

配置好之后，SDK 的 singleton.ts 会读取环境变量并惰性初始化客户端，无需任何手动接线。若忘记安装@google/adk，导入@google/stitch-sdk/adk时会得到一条清晰的安装提示，而不是晦涩的模块错误——这个防护逻辑就写在 adk-adapter.ts 的顶部。

三、认识 stitchAdkTools()：一个函数打通 Stitch 与 ADK

import { stitchAdkTools } from "@google/stitch-sdk/adk"; const tools = stitchAdkTools(); // 返回全部 Stitch 工具的 FunctionTool 数组

这个函数背后做了三件"脏活"，让你在 Agent 里完全不用关心：

1. 自动接线：每个工具的execute都预绑定到StitchToolClient.callTool()，模型调用即直连 Stitch MCP 服务器；
2. Schema 清洗：Gemini API 不接受$defs、$ref等标准 JSON Schema 写法，cleanSchema()会递归展平并剔除 Gemini 校验器拒绝的字段（见 adk-adapter.ts 中的实现）；
3. 拼写校验：include里写了不存在的工具名会立刻抛错并列出全部可用工具名，避免"工具悄悄消失"这种最难排查的 Bug。

内置的 15 个 Stitch 工具一览

四、实战：三步创建一个 AI 设计师 Agent

第 1 步：定义设计师 Agent

import { 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 SDK（Vercel）生态而不是 ADK，同仓库提供对等的stitchTools()，从@google/stitch-sdk/ai导入即可，两种适配器共用同一套 tools-adapter 层。

七、常见问题与排错指南

八、总结：一张地图看懂本教程

• 一个入口：stitchAdkTools()（adk.ts）完成 Stitch 工具 → ADK FunctionTool 的全部转换；
• 一套配置：STITCH_API_KEY+ Gemini 密钥，其余全部惰性自动初始化；
• 一个结果：LlmAgent自主完成"建项目 → 生成界面 → 取回 HTML/截图"的设计闭环；
• 一份底稿：15 个工具的完整 Schema 见 tools-manifest.json，按需裁剪。

现在，把instruction换成你的产品需求，你的 AI 设计师就开工了 🚀