openclaw如何把stitch生成的UI变成代码

上个月，我朋友给我发了个链接，说他用 Google Stitch 生成了一个界面设计，让我看看怎么样。

我点开一看，卧槽，直接惊了。

那界面做得挺漂亮的，问题是——它只是一张图啊。

我说：你这玩意儿没法直接用啊，还得自己写代码。

结果他跟我说：不用，我让 AI 帮我写。

我当时的反应就是：NB啊。

所以 Stitch 到底是啥？

简单说，Google Stitch 是一个 AI UI 设计工具。

你用自然语言描述一个界面，它就能给你生成对应的设计。

但设计只是图啊，要变成能用的代码，还得靠 MCP。

MCP 就是那个桥梁。

Stitch MCP 是一个 CLI 工具，它把 Stitch 的能力封装成 AI Agent 能调用的工具。

有了它，你的 AI 就能：

从设计生成完整的 Astro 项目
直接获取屏幕的 HTML 代码
还能拿到截图（ base64 格式）

听起来是不是有点爽？

接入 OpenClaw拢共分几步？

我来手把手教你，保姆级教程，看完就能上手。

第一步：安装 stitch-mcp

你需要一个 Node.js 环境，然后直接用 npx 运行：

npx @_davideast/stitch-mcp init

或者全局安装：

npm install -g @_davideast/stitch-mcp

初始化的时候会提示你登录 Google 账号，按提示操作就行。

如果你有 API Key，也可以直接用：

export STITCH_API_KEY="你的API_KEY"

这样就不用每次都走 OAuth 了。

第二步：配置 OpenClaw 添加 MCP 服务器

找到 OpenClaw 的配置文件 ~/.openclaw/openclaw.json，打开它。

在文件里加上 mcpServers 字段，完整配置大概长这样：

{"mcpServers":{"stitch":{"command":"npx","args":["@_davideast/stitch-mcp","proxy"]}}}

注意：如果你的文件里已经有其他内容，只需要追加 mcpServers 这部分就行。

保存文件。

第三步：重启 OpenClaw 让配置生效

这是很多人会漏掉的一步！

配置写好了，但 OpenClaw 还在用旧的配置运行。你需要重启：

openclaw gateway restart

第四步：验证 MCP 服务器是否加载成功

运行这个命令看看：

openclaw mcp list

如果看到 stitch 在列表里，显示 running，说明搞定了。

如果没有，检查一下：

配置文件路径对不对？（~/.openclaw/openclaw.json）
JSON 格式有没有写错？（可以用 JSON 校验工具检查一下）
npx 能不能正常执行？

第五步：开始使用

配置好之后，你就可以在 OpenClaw 里调用 Stitch 了。

可用工具就三个：

工具	功能
`build_site`	从设计生成 Astro 项目，映射屏幕到路由
`get_screen_code`	获取屏幕 HTML 代码
`get_screen_image`	获取屏幕截图（ base64 ）

比如你可以说：

帮我用 Stitch 设计一个登录页面，然后用 build_site 生成代码。

AI 就会：

调用 Stitch 生成登录页设计
把设计变成可运行的 Astro 项目
返回完整的代码给你

整个过程你只需要说一句话。

实际场景怎么用？

我给你举几个例子：

场景 1：快速原型

跟产品经理沟通需求的时候，直接让 AI 用 Stitch 生成几个界面设计方案，选中意的再深入。

场景 2：代码还原

看到某个不错的网站界面，截图让 AI 用 Stitch 解析，然后生成代码二次开发。

场景 3：批量生成

同一个产品不同页面的设计，一次性全给你生成出来，省时省力。

我的感受

说实话，之前我觉得 AI 生成 UI 这事儿有点鸡肋。

因为生成的界面再好看，不能变成代码也白搭。

但 Stitch MCP 解决了这个问题。

它让 AI 生成的設計可以直接变成可运行的代码，这才是真正的"一句话开发"。

而且 OpenClaw 本身就支持 MCP，配置一下就能用，门槛并不高。

如果你正好在用 OpenClaw，完全可以试试这个组合。

你是怎么看的？有没有遇到过"设计很好但代码难写"的情况？评论区聊聊 🐱