不会代码？没关系，用CloudBase AI ToolKit 三分钟创造一个个人导航网站

不会代码？没关系，用CloudBase AI ToolKit 三分钟创造一个个人导航网站

大家好，我是星哥，在平时的工作和生活中，星哥收藏了大量的网站链接。如何高效地管理这些链接，并且随时随地都能方便地访问它们？一个个性化的导航网站无疑是最好的解决方案。

今天，我们就来看看如何利用腾讯云CloudBase，在短短三分钟内创建一个属于自己的导航网站，而且完全不需要编写代码！

img

云开发 CloudBase

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。

开通腾讯云开发CloudBase

在开始之前，你需要：

1. 一个腾讯云账号（没有的话可以免费注册）
2. 开通CloudBase服务（有免费额度，足够个人使用）
3. 准备好你想要收录的网站链接清单

1.前往云开发CloudBase官网

点击“立即体验”

img

点击“开通环境”

img

设置环境名称

我这里设置成 mynav，套餐版本为个人版，一个月零元白嫖就是开森（购买成功有6个月的免费试用期）。

img

再回到腾讯云开发的界面：https://console.cloud.tencent.com/tcb/platform/env

img

基本配置

免费体验版： QPS 500，调用次数有20万次，容量3G，云函数资源用量：15万GBS，cdn流量：10G。

img

去开发

与AI Builder 对话，点击 微搭---> AI Builder

img

对话快速构建应用

选择Web h5，在对话框中写出你的开发需求

img

我想创建一个个人导航网站，包含以下功能：

• 可以添加多个分类
• 每个分类下可以放置多个网站链接
• 支持搜索功能
• 界面要简洁美观

导航网站包含

• 网站标题
• 网站描述
• 分类信息
• 具体的网站链接

分类：常用工具

• 腾讯文档 https://docs.qq.com
• 腾讯会议 https://meeting.tencent.com

分类：学习资源

• 腾讯课堂 https://ke.qq.com
• 开发者手册 https://cloud.tencent.com/developer

自动生成

稍等几分钟生成完成

img

预览

img

添加网站

img

添加一个暗黑模式

给网站再加一个暗黑模式

img

暗黑模式已添加

img

预览应用看看什么情况

img

发布

如果觉得可以发布就点击右上角发布

img

生成一个访问域名：

https://mynav-8gj5yzrbcc05c5aa-1305528004.tcloudbaseapp.com/app-bz29hkkv/production/

费用说明

CloudBase提供了慷慨的免费额度：

• 每月免费云函数调用次数
• 免费的存储空间
• 免费的CDN流量

对于个人导航网站来说，这些免费额度完全够用，基本不会产生额外费用。

CloudBase AI ToolKit介绍

在这种情况下，CloudBase AI Toolkit 的出现为开发者提供了全新的解决方案。作为腾讯云开发（CloudBase）推出的新一代AI开发工具，它无缝适配主流AI编程工具，如 Cursor、CodeBuddy、Trae、WinSurf 等，能够自动生成可直接部署的前后端应用与小程序，并一键发布到腾讯云开发平台。这种“AI+开发”的模式，极大地简化了开发流程，让开发者无需深入掌握复杂的开发技术，即可快速搭建出符合需求的应用。

CloudBase AI Toolkit 不仅支持多种代码风格（如 HTML、CSS、JavaScript、Python 等），还允许用户通过简单的Prompt进行定制化配置，从而实现个性化的界面设计和功能布局。这一特性使得开发者能够根据自身需求快速构建出符合品牌形象的应用，同时也能灵活调整样式和交互逻辑，确保应用在不同场景下都能呈现出最佳效果。

此外，CloudBase AI Toolkit 的一键发布功能进一步提升了开发效率。开发者只需在开发环境中输入相应的指令，即可将应用快速部署到云端，实现从开发到上线的无缝衔接。这种高效的开发流程，不仅节省了大量时间，也降低了开发门槛，使得更多开发者能够参与到应用的建设中来。

AI ToolKit GitHub

CloudBase AI ToolKit 核心优势解析

CloudBase AI ToolKit 是腾讯云推出的一站式低代码开发工具，结合AI能力，可快速构建Web应用、小程序及后端服务。

AI ToolKit 开源仓库地址：

GitHub地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

CNB地址：https://cnb.cool/tencent/cloud/cloudbase/CloudBase-AI-ToolKit

基于CloudBase AI Toolkit十首歌的时间开发《动物连连看》微信小游戏

刚才介绍了CloudBase AI ToolKit是个什么，那我们怎么用，现在星哥就利用它演示开发《动物连连看》微信小游戏。

1.准备工作

现在安装 VS Code+CodeBuddy AI 编程助手以及 腾讯云开发环境。安装方法可以参考之前星哥写的文章：腾讯CodeBuddy从零打造家庭相册

如图，在VS Code的插件中搜索“腾讯代码助手”安装。

img

2.开通腾讯云开发环境

腾讯云开发是一款云原生一体化开发平台，提供后端云服务，让开发者无需管理服务器，即可快速构建应用。

打开：腾讯云开发官方控制台：https://console.cloud.tencent.com/tcb 开通服务

1. 点击“新建”按钮。
2. 新用户可以优先选择免费体验版。
3. 根据提示填写环境名称（例如：lianliankan）、选择地域等信息。然后点击确认按钮，等待环境创建完成。

img

创建成功

img

3.配置 MCP

腾讯云代码助手CodeBuddy 与 腾讯云开发环境进行交互，需要配置 CodeBuddy 的 MCP。

点击 CodeBuddy 的图标，找到并点击“MCP市场”按钮。

img

如图，点击右侧的“+”按钮。

img

这是会弹出一个json文件

img

在编辑框中，粘贴以下JSON 配置代码，粘贴完成后，点击保存按钮。

{
    "mcpServers": {
    "cloudbase": {
        "command": "npx",
        "args": ["@cloudbase/cloudbase-mcp@latest"],
        "timeout": 120000,
        "env": {
            "CLOUDBASE_DEBUG": "true"
        }
    }
    }
}

img

MCP成功安装之后，就可以看到它提供的工具了：

img

完成以上步骤后，VS Code、CodeBuddy 和腾讯云开发环境就已经成功连接并配置完毕。

4.授权

在“codebuddy”对话框中输入“登录云开发”

img

在弹出的浏览器页面中选择云开发环境，再点击确认授权

img

选择云开发环境，点击确认选择

img

CodeBuddy 提示登录成功

img

再在 CodeBuddy 输入“在当前项目中下载云开发 AI 规则”

img

已添加的配置文件和目录包括：
​
1. 各种 AI 编辑器的配置目录：
​
.cursor - Cursor 编辑器配置
.windsurf - WindSurf 编辑器配置
.comate - Comate 编辑器配置
.vscode - VS Code 相关配置
.clinerules - Cline 编辑器规则
.codex - Codex 配置
.gemini - Gemini 配置
.lingma - Lingma 配置
.roo - Roo 配置
.trae - Trae 配置
.rules - 通用规则
.github - GitHub Copilot 指令
2. 配置文件：
​
.mcp.json - MCP 配置文件
.augment-guidelines - 增强指南
3. 文档文件：
​
AGENTS.md - 代理相关文档
CLAUDE.md - Claude 相关文档
README.md - 项目说明文档
现在您可以使用各种 AI 编辑器（如 Cursor、WindSurf、CodeBuddy 等）来更高效地开发您的云开发项目。这些配置文件包含了针对云开发的特定规则和指导，可以帮助 AI 更好地理解和辅助您的开发工作。

文件夹中有这么多文件

img

5.CodeBuddy 输入开发需求

基础规则

10×10 网格布局，随机生成 动物主题图标（猴子/熊猫/兔子/大象/河马/海豚/小猫/小狗/斑马等）

消除条件：选择两个相同动物，通过 ≤2 条直线连接（允许折线）

路径验证：路径需全空且不可穿墙，自动高亮显示连接线

操作流程

点击选中动物 → 自动寻路 → 成功消除（特效+音效）

场景构建:

2D横版布局：深林布局

时间限制

无时间限制

经济系统

货币体系 是金币：消除一个活动10个金币

任务与成就： 通过关奖励100个金币。

技术实现需求

微信小游戏原生Canvas API + JavaScript

使用微信云开发（CloudBase）存储玩家数据

微信登录：获取用户头像/昵称显示在排行榜

把游戏开发需求输入之后，CodeBuddy就会自动coding了。

img

6.导入微信开发者工具

访问 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载微信开发者工具，安装

img

如图，导入项目

img

导入之后可能会有报错，不要慌，这是正常现象，根据报错内容进行修改即可

img

解决报错：

img

经过一番的调试：

说是调试，其实就是告诉CodeBuddy哪里出问题了，CodeBuddy 就会自动修复。

导入微信开发者工具报错：
[ app.json 文件内容错误] app.json: ["tabBar"]["list"][0]["iconPath"]: "images/tab/home.png" 未找到
["tabBar"]["list"][0]["selectedIconPath"]: "images/tab/home_selected.png" 未找到
["tabBar"]["list"][1]["iconPath"]: "images/tab/rank.png" 未找到
["tabBar"]["list"][1]["selectedIconPath"]: "images/tab/rank_selected.png" 未找到(env: Windows,mp,1.06.2504010; lib: 3.8.11)

img

项目代码完整开源

本项目已在 CNB 平台进行完整开源。

项目地址： https://cnb.cool/xgss-net/lianliankan

这次的开发体验可以用“丝滑”来形容。

过去写这样一个小游戏可能需要 2-3 天时间，特别是算法和 UI 调整。但在 CloudBase AI Toolkit 的辅助下，我们只花了 40 分钟完成了从策划、开发到测试部署的一整套流程。

如果你有一个创意，不妨马上试试 CloudBase AI Toolkit，开启你的 AI 快开发之旅。

总结

通过CloudBase AI ToolKit，我们只需要简单的对话和点击，就能创建一个专业的个人导航网站。不需要编程知识，不需要复杂的配置，三分钟之内就能完成部署。这种方式不仅节省了时间，还能确保网站的质量和安全性。

现在，就开始创建属于你自己的导航网站吧！如果在使用过程中遇到任何问题，都可以查看CloudBase的官方文档或联系客服获取帮助

通过这篇文章的指导，相信你已经对如何使用CloudBase AI ToolKit创建个人导航网站有了清晰的认识。赶快动手试试吧，让你的网络资源管理变得更加高效！

写文不易，如果你都看到了这里，请点个赞和在看，分享给更多的朋友；也别忘了关注星哥玩云！这里有满满的干货分享，还有轻松有趣的技术交流～点个赞、分享给身边的小伙伴，一起成长，一起玩转技术世界吧！ 😊