睡个午觉，OpenClaw 已经帮我把网站写好部署上线了！

OpenClaw 实战指南 - 用 CloudBase 自动化开发一个网站并部署上线

*基于周周黑客松小龙虾家长会现场分享真实经验，直接解决分享嘉宾的实际问题*

我以为"AI 辅助开发"只是帮我写代码，直到我用了 CloudBase × OpenClaw——

我在 OpenClaw 里说了一句：「帮我创建一个带数据库的 Web应用」。然后云数据库配好了。云存储初始化了。云函数模板也生成了。

我没有打开控制台。没有写一行配置。没有查文档。这才叫 **AI 辅助开发**。

一站式满足AI 应用开发所需资源，一句话完成部署，一键安装 OpenClaw，分钟级搭建 AI 轻应用。

**基础设施的事，AI 替你操心了。你只管做产品。**

---

这份教程解决什么问题？

**本指南不教你审美，只教你工程实现如何通过openclaw创建一个可分享的网站：**

1. ✅ 5 步快速上手（30 分钟从安装到部署）
2. ✅ 直接推荐配置：**Minimax coding plan + QQ 通道**（简单、便宜、快）
3. ✅ 解决 3 个实际踩坑：设计统一、保存图片、赞赏码
4. ✅ 获得1份**OpenClaw 调教指南** https://cloud1-1gkqfpb09dd42c96-1324952157.tcloudbaseapp.com （复制链接到浏览器或者微信）带你手把手玩转 OpenClaw，所有链接均可访问

核心理念：你不需要写代码

**OpenClaw 的工作方式是**：你用自然语言描述需求 → 它自动生成代码 → 自动部署上线。

---

第一部分：5 步快速上手，快速搭建你的“生产线”

步骤 1：创建 OpenClaw 实例（5 分钟）

1. 打开 [腾讯云 CloudBase](https://tcb.cloud.tencent.com/dev)（新用户需要创建环境，参考 [开通云开发环境](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fdocs.cloudbase.net%2Fquick-start%2Fcreate-env&objectId=2552198&objectType=1&contentType=undefined) 进行云开发环境的开通）
2. 进入「云函数/托管/主机」→「云服务器」→「轻量应用服务器」
3. 点击「创建实例」

1. 选择 **OpenClaw 模板**
2. 套餐配置：**选择 2C4G 及以上**（很重要！低配会卡死）

💡 **为什么要 2C4G？** OpenClaw 需要运行 AI 模型，低配会响应慢、超时。2C4G，日常够用。

1. 等待 3-5 分钟创建完成

---

步骤 2：配置模型和通道（10 分钟）

点击「管理」按钮进入配置界面。

#### 模型推荐：Minimax

| 模型 | 价格 | 速度 | 配置难度 | 推荐度 |

|------|------|------|---------|--------|

| **Minimax** | ¥0.01/千tokens | 快 | 简单 | ⭐⭐⭐⭐⭐ |

| DeepSeek | ¥0.001/千tokens | 中等 | 中等 | ⭐⭐⭐⭐ |

| OpenAI | $0.002/千tokens | 慢（国内） | 困难 | ⭐⭐⭐ |

| 腾讯混元 | ¥0.01/千tokens | 快 | 简单 | ⭐⭐⭐⭐ |

**为什么推荐 Minimax？** 支持 [Coding Plan](https://platform.minimaxi.com/docs/coding-plan/intro) ,专为高频编程场景设计 **支持最新 MiniMax M2.5 系列模型**, **极具性价比的订阅模式**，它对 **代码生成 (Coding)** 有专项优化，能理解复杂的编程逻辑（如 Canvas 绘图、异步请求），比通用模型更少写出 Bug

配置步骤：访问 [Minimax 开放平台](https://platform.minimaxi.com/) → 注册 → 获取 API Key → 填入 OpenClaw。

#### 通道推荐：QQ Bot

**为什么推荐 QQ Bot？** 配置简单、不需要企业认证、支持文字/图片/文件、直接在 QQ 上对话，可以语音转文字。

配置步骤：访问 [QQ 开放平台](https://q.qq.com/bot/) → 创建机器人 → 获取 AppID 和 Token → 填入 OpenClaw。

详细教程：[云上 OpenClaw 快速接入 QQ 指南](https://cloud.tencent.com/developer/article/2626045)

---

步骤 3：测试连接（3 分钟）

1. 点击「登录」，进入 Orcaterm 控制台

1. 输入 `openclaw tui`，看到对话界面就说明成功了

1. QQ Bot 测试：直接在 QQ 上给机器人发消息，收到回复就代表配置成功

---

步骤 4：连接 CloudBase MCP，让 AI 拥有“云端操作权”（5分钟）

**这一步很关键！** 很多同学 OpenClaw 玩得挺溜，但仅限于“聊天”。要让它**真正变成开发工具**，必须连接 **CloudBase MCP**。。

#### 4.1 准备密钥

**密钥 1：环境 ID**

• 登录 [CloudBase 控制台](https://console.cloud.tencent.com/tcb) → 复制环境 ID（格式：`env-xxx`）

**密钥 2：API 密钥**

• 登录 [访问管理控制台](https://console.cloud.tencent.com/cam/capi) → 创建密钥 → 获取 `SecretId` 和 `SecretKey`

#### 4.2 安装

对 OpenClaw 说：

安装 https://clawhub.ai/binggg/setup-cloudbase-openclaw

然后依次把环境 ID、SecretId、SecretKey 发给它。

或者直接发

1. 执行这个命令安装这个 skill

npx skills add tencentcloudbase/skills --skill setup-cloudbase-openclaw -y

2. 阅读并输出 skills 内容

3. 根据这个skills 开始工作

还可以登录管理面板搜索 *cloudbase* 后直接安装

#### 4.3 验证

对 OpenClaw 说：

查看我的 CloudBase 环境信息

只要它能报出你的环境 ID，它现在就是你的“云端运维主管”了。

---

---

💡 第二部分：实战！如何“描述”出一个功能应用？

以下内容基于真实黑客松项目 [在线演示](https://ai-mini12-1gek8f81c920bebd-1324952157.tcloudbaseapp.com) 的经验总结

---

创意来源 ：做一个 Openclaw 的主题指南，分享相关介绍、调教过程、实践作品。

小龙虾家长会现场真实场景

参赛者 A："我装好 OpenClaw 了，但不知道接下来干啥..."
参赛者 B："我做了个页面，但风格好乱，每个页面都不一样..."
参赛者 C："环境配好了，但我该怎么让 AI 帮我写出一个带逻辑、能存图、能跑通的应用！"
参赛者 D："想接个支付赞赏，但不知道怎么弄..."

1. 定义业务逻辑（不是调风格，是调逻辑！）

#### 问题

做了多个页面（首页、Quiz、结果页），但每个页面风格不一样——首页蓝色主题、Quiz 绿色主题、结果页红色主题，按钮大小、字体、间距都不统一。整个产品看起来像拼凑的。

**根本原因**：不要直接说“帮我做一个网页”。你要像产品经理一样给它下定义：。

#### 解决方案：先建规则，再让它干活

**关键思路**：在开始做任何页面之前，先告诉 OpenClaw 你的设计规范。这就是**"先设计再部署"**。**请先设计逻辑函数，再开始写页面代码。**”

**第 1 步：定义设计规范**

对 OpenClaw 说：

在开始做页面之前，帮我参考OpenClaw.ai 的设计风格，建一个设计规范文件 `design-rules.md`，反馈如下：

>

**配色方案**：

- 主色调：#000 (纯黑)

- 文字颜色：#111 (深灰)

- 强调色：#4ade80 (绿色)

- 按钮：白色背景、黑色文字

>

**字体**：

- 标题：24px / 600

- 卡片标题：15px / 600

- 卡片描述：12px

**布局规范**：

- 最大宽度：420px (移动端优先)

- 圆角：12px

- 间距：12-16px

**组件规范**：

- 卡片：#111背景、圆角12px、16px内边距

- 主按钮：白色背景、黑色文字、圆角12px

- 次按钮：#111背景、白色文字

>

**参考风格**：Stripe、Linear 那种简洁现代感

>

以后做的所有页面，都按照这个规范来。

**第 2 步：每次新建页面都引用规范**

做新页面时，这样跟 OpenClaw 说：

按照 `design-rules.md` 的风格规范，帮我创建 xxx 页面。

**第 3 步：做完后让它检查一致性**

所有页面完成后，对 OpenClaw 说：

对比检查所有页面的设计风格是否统一，包括：配色、字体大小、按钮样式、间距、圆角。如果有不一致的地方，统一改成 design-rules.md 的标准。

#### 效果

**改进前**：每个页面自成一派，看起来像三个不同的网站

**改进后**：所有页面统一🦞主题、统一按钮/卡片/字体样式，看起来像一个完整的产品

💡 **经验总结**：这一步看起来"多此一举"，但实际上能省掉后期大量的样式调整时间。先花 5 分钟建规则，比做完再返工快 10 倍。

---

阶段 2：攻克功能难点（如：图片保存）

#### 问题

做了个 AI 创始人测试的结果页，想让用户保存结果图片分享到朋友圈。但直接让用户截图的话，会带上状态栏、浏览器地址栏，不好看。

#### 解决方案：让 OpenClaw 帮你实现

**方法 1：先设计结果卡片，再加保存功能**

对 OpenClaw 说：

帮我设计一个 Quiz 匹配结果卡片，要求：

按照 design-rules.md 的风格，具有保存图片功能

注意事项：

- 生成的图片要清晰（3倍分辨率）

- 图片里的文字和样式跟页面上看到的一致

- 不需要带浏览器地址栏和状态栏

OpenClaw 会自动选择合适的技术方案（比如 html2canvas），生成代码并部署。**你不需要关心它用了什么库。**

**方法 2：如果生成的图片有问题**

常见问题和怎么跟 OpenClaw 说：

| 问题 | 跟 OpenClaw 说 |

|------|----------------|

| 图片模糊 | "保存的图片不够清晰，把分辨率提高到 3 倍" |

| 样式错乱 | "生成的图片和页面上看到的不一样，检查一下样式是否正确渲染" |

| 图片里有些元素缺失 | "保存的图片里缺了匹配度 ，确保所有内容都能正常加载" |

#### 效果

**改进前**：用户截图分享，带状态栏和地址栏，不美观

**改进后**：一键生成精美结果卡片，适合直接分享朋友圈

---

阶段 3：自动化部署（闭环）

功能写好了，怎么上线？

>**指令**：

“把刚才生成的测试应用，打包并部署到我的 CloudBase 静态托管。部署完成后直接给我访问链接。”

#### 效果

阶段 4：想要接商业化，怎么最小起步

#### 问题

项目做完了，想验证有没有商业价值，但接入微信支付/支付宝太复杂（需要企业认证、审核周期长），想要快速上线根本来不及。直接做个打赏验证下。

#### 解决方案：用微信收款码，让 OpenClaw 做交互

**第 1 步：准备收款码**

1. 打开微信 → 收付款 → 二维码收款
2. 保存二维码到相册
3. 把二维码图片发给 OpenClaw（或者上传到项目目录）

**第 2 步：告诉 OpenClaw 加赞赏功能**

对 OpenClaw 说：

在导览页添加"请我喝水"悬浮按钮，遵循 design-rules.md 设计风格

---

🎨 第三部分：3 个提升“工程效率”的进阶技巧

以 [OpenClaw 调教指南页面](https://ai-mini12-1gek8f81c920bebd-1324952157.tcloudbaseapp.com) 为例

技巧 1：建立“开发记忆”文件（防脑抽）

在做任何页面之前，先跟 OpenClaw 建立 3 个规则：

**规则 1：设计规范**

创建 design-rules.md，定义配色、字体、间距、组件样式（见踩坑 1）

**规则 2：工作流程**

以后做页面的流程是：

1. 我先描述需求

2. 你先给我设计方案（文字描述），我确认后再动手

3. 做完一个页面后，先让我预览

4. 我说"OK"后再部署

5. 过程中反复抢到记录到 memory.md

**规则 3：质量标准**

所有页面必须满足：

- 移动端适配（375px 宽度下正常显示）

- 风格和 design-rules.md 一致

技巧 2：过程中，严格约束，养成系

对 OpenClaw 说：

我要做一个 OpenClaw 调教指南网站

先不要动手，给我一个整体设计方案。，我回复 ok，你再启动开发

等 OpenClaw 给出方案后，确认没问题再进入下一步。

1. **首页**：导航中心，入口有调教指南、趣味测试、场景实验室

2. **调教指南**：5 步教程（风格、记忆、Skill、心跳、分级）

3. **趣味测试**：Quiz 测试"你是哪种 AI 创始人"，测试结果：显示测试结果 + 保存图片

阶段 3：统一检查 + 部署（10 分钟）

**检查：**

检查所有页面：

1. 设计风格是否统一（配色、字体、按钮、间距）

2. 展示网站地图，列出页面之间的链接

3. 移动端是否正常显示

4. 保存图片功能是否正常

5. 赞赏弹窗是否正常

有问题就修复。

**部署：**

全部没问题了，部署到 CloudBase 静态托管。

时间分配

| 阶段 | 时间 | 做什么 |

|------|------|--------|

| 建立规则 | 10 分钟 | 定义设计规范、工作流程、质量标准 |

| 设计方案 | 10 分钟 | 和 OpenClaw 讨论页面结构，确认方案 |

| 逐页开发 | 30 分钟 | 按顺序做首页 → 教程页 → Quiz → 赞赏 |

| 检查部署 | 10 分钟 | 统一风格检查 + 一键部署 |

| **总计** | **60分钟** | **从 0 到上线** |

阶段 5：“脱机”开发模式（QQ 端的妙用）

你可能在吃饭或聊天突然还有个产品灵感。利用 **QQ 通道**。 你可以随时通过语音或文字微调逻辑：

>**在 QQ 上发**：

“刚才那个测试增加一个逻辑：如果分数超过 90，额外显示一个‘隐藏成就’。改好后直接重新部署。”

其实很多灵感都是在开发过程中突然产生的，比如为什么要做关于 OpenClaw，因为在跟同学们分享最近的实践的时候，被问到它到底能干什么，是谁开发的？

我忽然觉得也许OpenClaw 调教指南不仅能展示要怎么调教，可以链接到教程跟优秀作品，更重要的是他也需要一张数字名片，一个面对不了解它是谁，它能怎么做的

好在，每一个小需求都能通过 QQ 快速记录传递给它，所以在很短时间内它就长成了现在的样子。

后续也会持续对内容进行更新迭代，希望大家能支持关注OpenClaw调教指南的迭代。

---

📚 附录：常见问题

**Q：OpenClaw 做出来的效果和我想的不一样怎么办？**

直接跟它说哪里不满意。比如："按钮颜色太深了"、"卡片之间间距太大，缩小一点"、"标题字太小了"。当然修改内容越具体越好。

**Q：风格还是不统一怎么办？**

跟 OpenClaw 说："对比检查所有页面的配色、字体、按钮样式，把不一致的地方统一修改。"

**Q：PC端的 TUI 跟 QQ 的消息不互通，各说各话怎么办？**

跟 OpenClaw 说："建立互通机制，每次迭代需要同步一份给对方。" ，会建立消息双向机制，定期会通过PC 端 TUI 发送信息包给到 QQ

**Q：bug调试时间太长怎么办？**

条条大路通罗马，用 CloudBase 云上部署的好处就是，你可随时切换各类 AI 编码工具。

3 个加速技巧：

1. **提前准备**：注册Codebuddy，登录 CodeBuddy + 集成CloudBase MCP

2. **切换外援**：跟 OpenClaw 说"你先不要更新，我交给其他"，在 CodeBuddy 里面修改

3. **砍功能**：先做核心页面，赞赏和保存图片有问题可以晚点再调试”

---

总结 你的开发流程应该是这样的

| 步骤 |动作 | 目标 |

| ------ | ------ | ------ |

| **Step 1**| 配好 CloudBase MCP|拿到底层云资源控制权 |

| **Step 2** | 定义 `memory.md`确 | 立功能逻辑骨架，防止 AI 跑偏 |

| **Step 3** | 分模块发号施令 | 先写逻辑函数，再写 UI 交互，最后加存图/支付等功能 |

| **Step 4** | 一键部署指令 | 瞬间生成在线 URL |

一句话

**在应用开发场景里，*OpenClaw 不是一个聊天机器人，它是你的**初级全栈工程师**。通过 CloudBase 提供的云端底座，你只需要通过自然语言定义业务逻辑，剩下的打包、编译、静态托管、CDN 分发，全都可以自动化。

---

**访问示例项目**：[https://cloud1-1gkqfpb09dd42c96-1324952157.tcloudbaseapp.com/](https://cloud1-1gkqfpb09dd42c96-1324952157.tcloudbaseapp.com/)

**更多教程**：[云上 OpenClaw 最全实践教程合辑](https://cloud.tencent.com/developer/article/2624973)

*Made with ❤️ by OpenClaw Community ·