

AI编程实践 | CodeBuddy的尝鲜体验

CodeGallop

2025-08-18

从7月28号获得邀请码到现在已经有20天了，因为公司项目赶得紧，所以只能断断续续的试用CodeBuddy的功能。今天就结合我在开发的个人微信小程序来介绍一下CodeBuddy的基本使用及一些使用心得。

本篇文章有如下几个节点：

小程序背景介绍

CodeBuddy IDE基本介绍

小程序原型设计

taro框架集成和云开发环境配置

小程序开发调试阶段

小程序开发进度

CodeBuddy的使用心得

小程序背景介绍

在我们家润宝还没出生前，就想着给开发一个宝宝成长记录微信小程序，但鉴于个人前端能力有限，一直没能动手开发。

现在由于有ai的赋能，使得开发一个小的微信小程序变得更容易实现。又加上刚好拿到CodeBuddy邀请码，CodeBuddy IDE和微信小程序都来源于腾讯，所以开发小程序应该有优势，索性就开始动手开发这样一个小程序：

用于全面记录和追踪宝宝的成长历程，提供以往的数据分析和温馨的成长回忆。以下是我写的基本功能点截图：

CodeBuddy IDE基本介绍

1、首先到官网https://www.codebuddy.ai/上下载IDE并安装。

2、安装完后，务必使用谷歌账号进行登录（我尝试用邮箱注册登录，搞了很久没成功），之后输入邀请码进行激活；

3、IDE 基本界面和cursor、trae比较类似，也是左中右的结构，分别是资源管理、代码编辑区、AI对话框，截图如下：

4、说一下工具栏几个创新的点：ai对话框上有一排工具栏，还是有几个工具比较亮眼的

a、集成Figma工具，能更方便的使用Figma设计稿进行前端开发：

b、有集成几个ui 组件，方便给AI指定某个ui组件进行开发：

c、配置集成后端开发，包括目前流行的supabase 和腾讯云开发

d、集成部署，可一键部署到腾讯 Cloud Studio或者将静态网页部署到 EdgeOne Pages

5、AI对话框中目前可选的大模型：

6、右侧有几个按钮，分别是设计模型、计划模型、和提示词优化，我使用了设计模型进行小程序的原型设计，效果还是可以的（文章后面会有详细介绍），另外提示词优化也很实用，它能更精确的描述你对AI的要求。

小程序原型设计

1、直接将项目简介README.md文档丢给ai

2、给出技术选型：

3、设计方案和计划列表：

4、开始用react进行原型及UI设计：

5、之后就再没有人工介入，ai编辑完所有原型代码及自我调试

6、给出原型及UI设计的截图

记录页设计：

统计页设计

社区页设计

个人信息设计

taro框架集成和云开发环境配置

1、完成原型及UI设计后，ai还给出了下一步的工作计划：主要是使用taro框架、微信小程序api调用及腾讯云开发的相关配置。

2、在将taro框架集成到项目中还是费了一些周折

通过评估方案给了我2个新的选择，被我给否决了

ai硬着头皮继续taro转换方案：

进行了一段比较长的时间的taro依赖包冲突的解决，最终还是顺利taro框架的集成

3、启动taro实时编译及微信开发者工具进行预览效果

首先在CodeBuddy IDE启动taro实时编译

然后在微信开发者工具打开项目（ai提示打开项目下的dist目录，但其实直接打开项目目录也可以）

4、云开发环境搭建

a、让ai帮我生成一个腾讯云开发环境配置文档

b、根据文档进行云开发环境配置，并让ai检查我的腾讯云开发环境是否搭建完成

c、ai帮我总结云开发环境还需要配置的内容

d、完成云开发环境配置总结

5、云开发控制台简介

配置完云开发环境后，即可在微信开发者工具-->点击“云开发”，打开云开发控制台

云数据库截图：

云函数部署截图

小程序开发调试阶段

完成云开发环境配置后，即可进入微信小程序各个功能点的调试及调整阶段。这个阶段其实还是挺考验一个程序员的素养的，你要去调试每个功能点，确保逻辑运行正常，以及如何将出现的错误跟ai沟通，并让ai进行修复，以及一些细节的调整，如何让ai理解你的意图，并按你的意图进行代码调整，并不是网络上所说，描述几句需求，ai就能完美的给出一个完整的应用程序的。

这里记录一些如何跟CodeBuddy 交互，进行错误的修复，细节的调整等示例：

1、当代码有编译错误时，鼠标移到错误处，选择“快速修复”-->"Fix with CodeBuddy"，让ai进行修复。

ai窗口便会自动引用此段代码，并捕获编译错误信息，进行分析并修复错误：

这种方式的快速修复单个点的编译错误还是挺有效率的，能够捕获编译错误信息，精准的对错误进行修复。

2、当我想让ai根据原型设计图，进行页面调整时，可直接贴图，并告诉ai如何处理，这里我还点击了ai对话框右下角的提示词优化按钮，最终帮我优化后的提示词如截图所示：

3、微信开发者工具控制台出错，直接截图给ai进行修复

4、图片上传后，显示变形及失真，我将原始图片及上传后的图片展示截图给ai进行对比，并找出解决办法（这里同样点击了提示词优化）

通过sequential-thinking mcp进行步骤拆解分析，最后给出了解决方案

小程序开发进度

目前基本调试完成首页、记录页面的功能，后面有空会陆续调试剩余的页面，给出几张真机调试的截图

CodeBuddy 的使用心得

1、有几个亮点：集成Figma、集成后端开发平台supabase、支持一键部署让前后端开发更便捷，另外设计模式和提示词优化也很实用；

2、使用起来更像Vibe coding，根据原型截图进行开发，它也能精准理解设计意图；控制台出错截图让它解决，它也能精准定位错误位置，并进行修复；要改动某个细节也不需要精准进行定位代码给它，比如我想让“记录”页面列表的图标变大一些，让其更醒目，我只要向ai说“帮我把记录页面列表前的图标变大一些，让其更醒目”即可，它便能精准的找到对应的页面进行代码调整；

3、CodeBuddy的ai聊天历史记录好像有点混乱，不同项目的历史记录好像都会展示出来，混在一起，不便于查看，而且每次点击快速修复一个编译错误，它都会生成一条记录，又没有搜索功能，查找起来非常不方便；

4、ai有时候会对一个问题的解决方案，偏离正确方向越来越远，你需要及时制止，并让其换一种思路进行分析解决。比如我在让ai对“记录”页面的筛选栏增加一个“更多”下拉框存放其余的记录类型选项时，它代码写出来后，下拉框显示非常小，而且会挤压记录列表，使得页面上方有一个很大的空白，让ai调整了五六轮后硬是没能解决，最后让ai删除整个下拉框的代码，重新设计实现，得以解决下拉框的呈现问题。