AI Coding全流程教程——0基础搭建“MEMO”健康打卡全栈Web应用(附提示词)

CloudBase+AI Coding工具搭建一个手机 app 效果的全栈Web应用，全程没写一行代码，灵活修改功能需求和UI效果。

2025年即将过去，在"自律"常令人疲惫的当下，健康管理能否如游戏般轻松上瘾？ MEMO 将目标拆解为"晨起喝一杯温水"这样的原子任务，并创新引入QQ式等级成长体系------ 支持从星星到皇冠的每次升级，都可以是你坚持的即时正反馈。2026，复刻一个应用，把习惯养成变成一款爱上健康过程的"游戏"吧～

本教程中，我们将结合 CodeBuddy 智能编程与 CloudBase AI 原生后端一体化平台的服务能力，快速实现一个能自由定制任务和分享他人的自律小游戏。还能直接添加到手机主屏幕，即使是编程新手，也能在 30 分钟内完成，跟着教程开始你的尝试吧！

各类AI Coding工具配置CloudBase指南： https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/ide-setup/cursor

（包含Cursor 、CodeBuddy、Trae、Qoder、Gemini CLI、OpenAI Codex CLI、Google Antigravity、GitHub Copilot等21个AI Coding工具）

AI开发流程简述：

下载CodeBuddy IDE，连接内置CloudBase MCP
设计需求文档，开发应用demo
用AI微调细节，部署网页到CloudBase

一、准备工作

下载CodeBuddy IDE
Node.js >= v18.15.0
开通CloudBase环境

在接下来的演示中，我将使用CloudBase这个一体化全栈云平台，快速构建具备后端能力和前后端交互的完整 Web 应用。 CloudBase提供了开箱即用的后端云服务，涵盖云函数、数据库、存储、静态托管等核心能力，无需从零搭建和维护服务器，即可获得弹性、可靠的后端支持。尤其适合全栈及前端开发者快速实现应用闭环，专注业务逻辑而非基础设施。

二、实操步骤拆解

步骤一：配置 CloudBase

CloudBase MCP 配置教程（CodeBuddy版）

CloudBase MCP 通过Model Context Protocol (MCP) 这个通用协议，像一座桥梁，让开发者用的AI编程助手（比如 CodeBuddy）能够安全、直接地访问和操作 CloudBase 的云端资源。

在AI Coding的场景中，借助CloudBase MCP，我们就能向AI直接描述需求，自动生成、操作和管理云上资源，例如创建数据库集合、部署云函数、配置权限等。

这意味着：

无需熟悉手动配置：在 IDE 中通过对话即可完成资源对接，大幅降低手动配置成本；
无代码操控后端：即使不熟悉后端细节，也能通过 AI指令快速完成后端服务搭建与迭代；
与 AI 开发流深度适配：完美契合 AI Coding工作流，实现"描述即开发"，显著提升全栈开发速度。

CloudBase产品介绍

CloudBase文档站：https://docs.cloudbase.net/
CloudBase控制台（前往开通环境）：https://tcb.cloud.tencent.com/dev
CloudBase MCP官方文档：https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/
开源地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

方式一：连接集成CloudBase MCP

在IDE的 "配置集成" 中找到CloudBase，点击后注册登录云环境完成连接。
现在开通云环境系统就会自动发放6个月免费个人版套餐。

方式二：手动配置CloudBase MCP

进入 "设置" 板块，直接选择 "添加MCP" 或打开 "MCP市场" 手动配置CloudBase MCP。

选择添加MCP需要打开CloudBase的AI原生开发板块找到快速配置的代码，复制粘贴进图示位置，保存后就可以在 "我的MCP" 处控制MCP的开关；进入MCP市场可以直接查询到配置代码，按照提示的流程完成配置。

配置完成后，在 AI 对话框中输入：登录云开发

AI 会自动引导你完成登录和环境选择。然后你可以开始使用自然语言描述需求，让 AI 帮你开发应用。

步骤二: 配置应用模板

step 01创建项目文件夹

点击IDE左上角 "文件" 打开你想要存项目的文件夹，再点击 "新建文件夹" 小图标创建新项目。

step 02 拉取CloudBase预制应用模板
在对话框中输入指令：下载CloudBase的web应用模板

我这里补充了"选择vue框架"，大家还可以根据需要选择react框架。

步骤三：开发网页实践

step 01 自然语言描述开发任务

在根目录点击新建文件，创建需求文档.md用于描述你的网页，然后把空文档添加进@(上下文），简单描述你的要求。

参考提示词：

UI风格：生成一个治愈系、莫兰迪配色的健康计划web网页。
主要功能：要求首页是当日健康任务列表，可以看到总计划完成进度，并且有打卡交互；再增加一个计划定制页，有确定目标、添加任务项（包含行为和频率）、计划完成时间三个板块。
特殊布局：页面布局适应移动端浏览器

根据以上内容生成web应用开发需求文档，添加在需求文档.md中。

AI生成的结果可能一次完美，也可能需要你进行一两轮对话微调。如果对生成的UI不满意，可以在本地预览中选择要修改的组件，然后输入指令调整，例如"调整配色，更柔和一些"或"将打卡按钮放在卡片右下角"。这是AI协同开发的正常迭代过程。

如果对生成的文档进行了微调，记得ctrl+s保存，再把文档添加进@(上下文） ，要求AI生成代码并预览页面。我增加了类似QQ登录等级的每日打卡等级机制，想要复刻可以参考文末提示词。

step 02 接入后端数据库

普通网页的应用数据仅存在本地，换台手机或重装应用就可能清零。通过 CloudBase 将数据存入云端，健康打卡的进度会实时同步保存，每次打开都能接着之前的记录继续打卡。

输入指令后AI自动完成创建数据表和前后端交互逻辑 ，添加测试数据后在控制台就可以看到如下图的记录，其中的openid字段是用户的唯一标识。

step 03 接入用户登录体系

如果觉得自己的精妙设计应该造福更多的人(👉ﾟヮﾟ)👉，可以用CloudBase实现登录功能，每位用户都能拥有自己独立且安全的计划列表，实现真正的多人使用。

初始化CloudBase就能使用匿名登录，不用专门写登录功能，所以以上过程已经实现了能够多人使用的Web应用。

匿名登录无需创建登录页，登录认证过程用户无感知，可以提高应用便利性和用户留存。CloudBase会自动为每位匿名访问的用户生成唯一的 openid，从而实现数据的自然隔离。下图展示了两个独立设备产生的数据记录，其 openid完全不同。

CloudBase还支持用户名密码登录、短信验证码登录、邮箱登录、微信授权登录和自定义登录 ，确保了用户可在手机、电脑等任何设备上安全登录，随时随地继续操作。向AI简单输入指令，实现的账号密码登录页面 如下，一句话实现了几乎不需要调整的标准登录页面。

step 04 项目部署
在对话框输入指令：部署到云环境

AI自动完成部署，返回可以被所有用户访问的网址。

step 05 网页保存到手机主屏幕

将你的网页存成QQ浏览器标签，保存在手机主屏幕，就可以像打开APP一样快速打开了。

三、功能迭代

自己用AI开发网页，想要更换色彩主题、添加新的功能，都可以通过CodeBuddy+CloudBase的组合实现。

自定义主题
给网页更换节日配色：圣诞配色
接入大模型API
参考教程： 接入混元生图api - AI编程：从0到1开发一个AI试衣小程序！免费分享 | 含源码

四、提示词总结

需求描述：

UI风格：生成一个治愈系、莫兰迪配色的健康计划web网页。

主要功能：要求首页是当日健康任务列表，可以看到总计划完成进度，并且有打卡交互；再增加一个计划定制页，有确定目标、添加任务项（包含行为和频率）、计划完成时间三个板块。

特殊布局：页面布局适应移动端浏览器

根据以上内容生成web应用开发需求文档，添加在需求文档.md中。

QQ等级系统：

总进度的卡片改成QQ等级展示卡片。

等级图标设计：1个星星是1级，4个星星升为1个月亮（4级），4个月亮升为1个太阳（16级），4个太阳升为1个皇冠（64级），最高等级是256级，也就是4个皇冠；达成4个皇冠获得成就徽章，展示在卡片下方。

升级逻辑：完成当日所有任务打卡获得一颗星星。

前后端交互：

在CloudBase数据库创建数据表，记录用户的健康计划和打卡进度，完成前后端交互逻辑。

账号密码登录功能：

给项目增加账号密码的注册和登录功能，在后端数据库创建数据表管理用户信息。实现登录页和用户管理，首次访问时检验用户是否注册。

项目部署：

部署到云环境

更换网页主题：

配色主题换成圣诞节主题，页面元素使用复古红绿色

结语

通过这篇教程，我们完成了一次从构思到部署的完整AI原生开发实践。

在复刻MEMO这一将健康管理游戏化的应用的过程中，亲身感受 CodeBuddy AI编程与CloudBase一体化智能后端协同作用的效果，全面提升开发效率。借助CloudBase MCP，你可以用自然语言直接操作云端资源，无需手动配置服务器、数据库或身份认证；使用CodeBuddy将你的产品描述，直接转化为可运行的前端代码与交互逻辑。不同水平的开发者都能实现在30分钟内构建一个具备多用户数据隔离、云端同步、可部署访问的全栈Web应用。

2026年，真正的"自律"或许不在于苦撑，而在于找到对的系统与工具，让自己持续获得正向反馈。在开发的世界里，这个工具就是能理解你意图的AI，与能瞬间实现意图的CloudBase云平台。现在就基于此项目，尝试用一句指令添加你想要的下一项功能吧！

附录

1. CloudBase产品介绍

CloudBase文档站：https://docs.cloudbase.net/
CloudBase控制台（前往开通环境）：https://tcb.cloud.tencent.com/dev
CloudBaseMCP官方文档：https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/
开源地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

2. 各类AI Coding工具配置CloudBase指南： https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/ide-setup/cursor

（包含Cursor 、CodeBuddy、Trae、Qoder、Gemini CLI、OpenAI Codex CLI、Google Antigravity、GitHub Copilot等21个AI Coding工具）

3. CodeBuddy IDE 下载地址： https://copilot.tencent.com/

IDE界面核心是AI对话框，上方提供了一系列效率工具图标，从左到右依次是：@（添加上下文）、添加图片、添加Figma设计稿、组件库以及配置集成。左下角可切换智能体(Agent)模式与基础大模型对话模式。目前IDE内置的大模型有下图中是几种，本次教程将使用Claude-4.5-Opus演示。

4. Node.js下载

dart 复制代码

//查看版本
node --version

如果未安装，请从 Node.js 官网下载安装。

保姆级安装教程指路：点击前往教程