Antigravity + Stitch MCP + Stitch Skills：构建完整网站的 AI Agent

你 有没有 发现 一件 事 ? 过去

? 过去 一年 我们 用 AI 做 产品 的 方式 其实 很 原始 写 一个 页面 , 调 一次 prompt 改 一个 按钮 , 再调 一次

prompt 多 做 几个 页面 , 就要 重复 几十次 本质 上 你 还是 在 手动 操作 AI 但 现在 , 一种 完全

不同 的 工作 方式 出现 了 你 只 负责 下达 目标 AI 代理 替 你 完成 整个 网站 今天 这 期 视频 我 带

你 体验 一个 真正 的 代理 师 开发 工作 流 Stitch 负责 设计 Anti grav ity 负责 写 代码 和 运行 MCP

负责 让 他们 互相 沟通 最后 的 结果 是 只用 一句 话 就 能 把 最初 的 想法 变成 一个多 页面 可以 运行 的

完整 网站 应用 Google 的 Anti grav ity 已经 发布 有 一段时间 了 但 直到现在 人们 才 真正 意识 到

它 有 多么 强大 最棒 的 是 它 完全免费 它 不仅仅 是 一个 集成 开发 环境 而是 一个 代理 驱动 的

工作 区 AI 可以 直接 在 这里 规划 编写 编辑 并 运行 你 的 整个 应用程序 工作 流 与此同时 Stitch 是 Google

推出 的 AI UI UX 设计 代理 能 在 几秒钟 内 生成 生产 级别 的 设计 现在 通过 MVP 的 支持

Stitch 可以 直接 连接 到 Anti grav ity 让 AI 代理 能够 自动 创建 修改 和 迭代 多 页面 设计

第一步 是 打 扩 工具 之间 的 连接 屏障 。

过去 要 把 这些 工具 连在一起 往往 需要 一堆 复杂 的 G - Cloud 命令 和 令牌 配置 , 对 新手 来说 能 砍 很

高 。

但 现在 这 一步 只 需要 30 秒 。 我们

。 我们 打开 Stitch 官网 并 登录 , 在 首页 可以 看到 一个 新 功能 , 用 MCP 将 Stitch 和 你 的 AI

工具 连接起来 。 点击

。 点击 进入 MCP 文档 , 这里 已经 把 整个 连接 流程 写得 非常 清楚 。

在 文档 中 可以 看到 Stitch 的 MCP 服务器 支持 两种 身份验证 方式 API 密钥 和 OAuth 浏览器 授权

简单 理解 OAuth 更 适合 那些 不 支持 手动 输入 密钥 的 AI 客户端 API 密钥 是 大多数 情况 下 最快 最

直接 的 连接 方式 这次 我们 要 连接 Anti Grav ity 所以 直接 选择 API 密钥 方案 文档 里

已经 提供 了 完整 的 获取 步骤 按照 提示 操作 就 可以 拿到 自己 的 API 密钥 完成 连接 准备 。

我们 进入 Stitch 设置 页面 , 点击 创建 APIP 。 拿到

。 拿到 P 之后 我们 回到 MCP 配置 文档 说明 页面 , 找到 MCP 客户端 设置 。

这里 给出 了 在 Anti grav ity 中 配置 Stitch MCP 的 详细 操作步骤 。

接下来 我们 切换 到 Anti grav ity 按照 文档 说明 设置 MCP 客户端 。 在

。 在 Anti grav ity IDE 中 的 Agent 边栏 右上角 点击 三个 点 图标 Addi tional Opti ons

。 谈出

。 谈出 的 菜单中选择 MCP Server 打开 MCP Store 然后 选择 管理 MCP 。

Manage MCP Serv ers 点击 查看 配置 , Viewer Config 然后 粘贴 Stitch MCP 服务器 的 JSON

配置 , 并 确保 填入 你 的 API URL 。 完成

。 完成 后 点击 刷新 。

你 将 看到 Stitch MCP 服务器 已 上线 , 一系列 工具 如 Create Proj ect , List Scre ens

等 已 准备就绪 。 实战

。 实战 案例 1 把 线 有 设计 一键 变成 React 应用 。

有 了 MCP 授权 之后 , AI 代理 就 可以 直接 操作 你 的 Stitch 账户 了 。 首先

。 首先 我们 在 Anti grav ity 中 输入 一句 话 列出 我 的 Stitch 项目 。

AI 会 立刻 返回 你 账户 里 的 所有 设计 项目 。

接着 , 我们 让 它 打开 其中 一个 项目 。

只 需 输入 , 打开 这个 项目 , 项目 ID 是 。

Anti grav ity 就 会 自动 进入 这个 项目 。

比如 这里 , 我 打开 的 是 一个 包含 五个 页面 , 的 城市 探区 打卡 App 登录 页 , 城市 路线 页

。 路线

。 路线 打卡 页 等 完整 界面 , 一应俱全 。

接下来 才 是 真正 关键 的 一步 。

我们 直接 对 AI 代理 下达 指令 , 使用 这个 项目 中 的 所有 页面 设计 , 创建 一个 React 应用 。

然后 你 会 看到 , Stitch 开始 自动 生成 完整 的 React 项目 结构 , 包括 , 页面 组件 , 状态 逻辑 ,

Hooks 基础 运行 环境 。

它 不是 从零开始 胡乱 生成 代码 , 而是 把 现有 的 设计 结构 , 直接 转化 为 清晰 的 React 代码 。

生成 后 的 页面 会 完整 保留 原始 设计 资源 , 甚至 连 Hover 等 基础 交互 效果 , 都 已经 默认 配置 好 。

也就是说 从 设计 稿到 可 运行 的 React 应用 , 只 需要 一句 话 进阶 功能 , Stitch Skills 代理 技能 。

除了 基础 的 MCP 连接 之外 , Stitch 还有 一组 更 强大 的 能力 。

Stitch Skills 也 就是 代理 技能 。

你 可以 把 它 理解 成 一套 可以 集插 集用 的 能力 模块 , 专门 为 Stitch MCP 设计 。

这套 技能 库 遵循 统一 的 代理 技能 标准 , 因此 不仅 能 在 Anti Grav ity 中 使用 也 兼容

Gemini CLI , Cloud Code , Cursor 等 主流 编码 代理 。

目前 主要 包含 四个 核心 技能 , Design MD 。

自动 拆解 设计 结构 , 生成 完整 的 设计 系统 文档 。

React Comp onents 。 把

。 把 界面设计 直接 转换成 生产 级 React 组件 。

Enha nced Prompt 。 把

。 把 模糊 的 想法 自动 精炼 成 结构 清晰 的 UI 体式 词 。

Stitch Loop 。 本期

。 本期 重点 。

默认 情况 下 , Stitch 一次 只能 生成 一个 页面 。

而 Stitch Loop 可以 根据 一句 提示 词 自动 生成 完整 的 多 页面 网站 结构 。

接下来 我们 把 整个 Scale 仓库 可 摸下来 放进 项目 录中 。

在 Anti gral ity 里 , Scale 的 默认 路径 是 。 放

。 放 好 之后 代理 就 会 自动识别 这些 技能 , 整个 多 页面 生成 能力 也 就 正式 上线 了 。 实战

。 实战 案例 2 从 一个 想法 , 到 完整 多 页面 网站 。

接下来 我们 不 使用 任何 线程 设计 。

而是 从 一个 最 简单 的 想法 开始 。

在 Anti grav ity 中 , 我 只 输入 一段 中文 提示 词 为 一个 城市 精品 咖啡 品牌

创建 一个 Stitch 网站 项目 , 并 在 创建 后 调用 Stitch Loop 技能 , 自动 生成 完整 网站 , 然后

按下 回车 。

接下来 发生 的 事情 , 才 是 这套 代理 工作 流 真正 厉害 的 地方 。

你 会 看到 , AI 代理 直接 启动 Chrome 浏览器 自动 打开 Stitch 官网 。

整个 过程 完全 不 需要 我 手动 操作 。

他会 自己 进入 登录 页面 , 自动 完成 账号 登录 , 然后 进入 Stitch 的 项目 界面 。

紧接着 代理 开始 根据 刚才 的 提示 词 在 Stitch 中 创建 一个 全新 的 项目 。

首页 的 UI 开始 一点点 生成 出来 , 品牌 主视 绝区 , 咖啡 产品 展示 模块 , 品牌 故事 区块 ,

门店 入口 , 联系 信息 , 整个 页面 的 配色 , 排版 , 图片 风格 , 都 围绕 城市 精品 咖啡 品牌 的 调性 ,

自动 生成 。

这时候 我们 其实 只 得到 了 一页 设计 。

但 关键 的 一步 来 了 。

代理会 继续执行 刚才 提示 词中 的 第二个 指令 , 调用 Stitch Loop 技能 。

你 可以 看到 , 它 开始 在 后台 一页 一页 的 自动 创建 新页面 。 我们

。 我们 回到 Stitch 项目 界面 , 整个 网站 就 像 长 出来 一样 , 首页 、 产品 列表 页 、 单品 详情页 、 门店

地图 页 、 品牌 故事 页 、 联系 我们 页 。 一个

。 一个 完整 的 多 页面 品牌 官网 , 已经 自动 生成 完成 。

整个 过程 中 我 没有 打开 浏览器 没有 登录 账号 , 没有 新建 项目 , 甚至 没有 点 一下 鼠标 。

从 一句 中文 想法 到 一个 完整 的 多 页面 网站 , 中间 只 发生 了 一次 回车 。

这 就是 代理 士 开发 工作 流 的 真正 形态 。

最后 说句 真实 体验 , 这次 生成 的 六 页面 咖啡 品牌 网站 竟然 耗时 近 50 分钟 。

从 效率 来看 , 这个 速度 确实 还 不算 理想 。

但 如果 你 把 视角 拉远 一点 就 会 发现 更 重要 的 变化 正在 发生 Anti grav ity 加上 Stit chNTP

与 Agent 技能 带来 的 不 只是 自动 生成 UI 这么 简单 它 让 应用 构建 从 手动 设计 和 编码 变成

一句 想法 就 能 由 代理 协作 自动 生成 完整 应用 这 不 只是 工具 , 而是 全自动 代理 工作 流 让

构思 快速 变位 可 运行 产品 。

这里 是 NPi 频道 , 如果 你 觉得 本期 教程 有用 , 请三连 支持 , 我们 下期 见 !