【CodeBuddy IDE 教程】
保姆级Code Buddy ID 使用指南
一、内测申请
核心功能速览:https://mp.weixin.qq.com/s/sO3Npl-bTPCZJQkJqShuww
在以下地址填写问卷
https://wj.qq.com/s2/22240515/0ac5/
每天会审核发放激活码,通过短信形式通知。如果好几天都没收到,可以看下垃圾箱是不是被拦截了
二、快速上手
1、常用环境安装
1)python
直接安装miniconda,下载地址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-latest-Windows-x86_64.exe
安装时记得勾选这两项
打开cmd,执行以下命令安装一下uv
pip install uv -i https://pypi.tuna.tsinghua.edu.cn/simple/
2)nodejs
官网地址:https://nodejs.org/zh-cn
安装时一路下一步即可,没有要注意的。
3)git
下载地址:https://git-scm.com/downloads
安装时一直下一步即可,没有要注意的。
2、开发环境安装
访问官网进行下载:https://www.codebuddy.ai
3、打开并进行基础配置


根据习惯,导入vscode或者cusor配置,如果你都没有,就选择skip

可以选择注册账号,也可以用谷歌账号注册![[图片]](https://i-blog.csdnimg.cn/direct/90c2230470084120b60c4dc8363ccd1a.png)
注册地随便选一个就行![[图片]](https://i-blog.csdnimg.cn/direct/9c068916aa3c4def83ca3817a5853397.png)
![[图片]](https://i-blog.csdnimg.cn/direct/8831d92fe2f245a09e67065cb4552c67.png)
登录完,直接把腾讯发来的激活码粘贴进去![[图片]](https://i-blog.csdnimg.cn/direct/524756dbc22c4d87aa1780ca178ed74c.png)
打开之后的页面如下所示![[图片]](https://i-blog.csdnimg.cn/direct/6a10e7517b8d49d1b7ae140a1b665690.png)
4、创建一个项目
找个地方新建一个文件夹,存放代码,并将文件夹拖拽到开发环境打开![[图片]](https://i-blog.csdnimg.cn/direct/c23153c52b8d40f4b431543bf76f657d.png)
选择要使用的模型,这三家模型都不错,可以先选一个,效果不好再换![[图片]](https://i-blog.csdnimg.cn/direct/77cf52bfcc974b2bbdd75f3dada6fd27.png)
选择完后,直接提需求,让他自动编程即可![[图片]](https://i-blog.csdnimg.cn/direct/96fd7982714d45f18e3e7d5f7432886d.png)
任务完成后,会有弹框提醒![[图片]](https://i-blog.csdnimg.cn/direct/4ee756bc8de646de8ff16a13831b657d.png)
可以让他运行一下,他会根据你电脑已有的环境帮你运行![[图片]](https://i-blog.csdnimg.cn/direct/7a538e06fe714cdda9fd3601cd1be0dc.png)
运行完的界面如下所示![[图片]](https://i-blog.csdnimg.cn/direct/459703f1f5fb4cb492afee603864759c.png)
5、代码回退
如果AI完成了某个大模块,记得要用git打版本标签,方便以后回退,以免AI越改越乱
输入内容:
帮我用git打一个版本标签,版本号为v1.0.0
![[图片]](https://i-blog.csdnimg.cn/direct/87c9d01579bd4537925c6fd09e1b19b7.png)
我们接着随便让AI添加一些功能,添加完后,可以输入:
帮我回退到v1.0.0版本
![[图片]](https://i-blog.csdnimg.cn/direct/1a8fe9bee6de42ee99d2978066270511.png)
三、扩展功能
1、Figma
Figma 是一款专为设计师和设计团队量身打造的协作式 UI 设计工具。我们可以通过Figma设计出来的UI,导入到CodeBuddy中进行实现。
单击Figma按钮,打开网站。需要注册登录。![[图片]](https://i-blog.csdnimg.cn/direct/b76a7cc783f64c4199d7e569ac7e8dda.png)
登陆完成后,我们任选一个模板,单击进入。也可以选择自己设计的模板。![[图片]](https://i-blog.csdnimg.cn/direct/fc4ccc17a2994f7e8e8802bf50deff61.png)
点击一下Try Now![[图片]](https://i-blog.csdnimg.cn/direct/11985f0cb36447be8227f3d0125a8a7a.png)
选择一个想让AI写出来的模板,选择完后,会自动出现在对话框![[图片]](https://i-blog.csdnimg.cn/direct/3f1bb6c2bd4f43b88cfb9287ba06e447.png)
然后发送就可以了,也可以自己加一些补充需求![[图片]](https://i-blog.csdnimg.cn/direct/307cb09845fe490ebbd98449844dd043.png)
最后就可以看到AI设计的页面了。目前还原度不是很高,只适合一些比较基础的UI界面![[图片]](https://i-blog.csdnimg.cn/direct/cf1d2a679cde42049c9d91caa0a6ac19.png)
2、components组件
![[图片]](https://i-blog.csdnimg.cn/direct/8955520bb52349a5aad8e702518e17de.png)
1)TDesign Components
官网:https://tdesign.tencent.com/
腾讯家自己的 UI组件库,有 PC 端、移动端、小程序组件,整体感觉现代、简约风格,支持 vue、React、小程序、QQ 小程序。![[图片]](https://i-blog.csdnimg.cn/direct/e962e43b63b243d183a7ddc6312df645.png)
2)MUl Components
官网:https://mui.com/
Material-UI(现在更名为 MUI)是一个基于 Google Material Design 设计规范构建的 React UI 组件库,核心是一个 React UI 组件库,专为 React 应用构建的组件库。![[图片]](https://i-blog.csdnimg.cn/direct/859dbcf62971405d983a84c94d83192c.png)
3)Shadcn Components
官网:https://www.shadcn-svelte.com/
颜色没有那么的丰富,看起来比较简洁和极简,使用自定义和扩展比较方便![[图片]](https://i-blog.csdnimg.cn/direct/89ce3a656d7541569bda24677ef68234.png)
3、配置集成
![[图片]](https://i-blog.csdnimg.cn/direct/1f77189db8164c94baf2b30e1f1ecc89.png)
可以直接数据库进行配置,存储数据,不用自己再去做后端那一套。可以选择 Supabase 和 Tencent CloudBase 两个数据库。![[图片]](https://i-blog.csdnimg.cn/direct/78431f6ad47c41f9875ba5ba1efa2ecf.png)
1)注册Supabase
我们以Supabase作为演示,点击管理。然后注册一个账号![[图片]](https://i-blog.csdnimg.cn/direct/38bdbd5341a9477bb5bc8653967a98b4.png)
![[图片]](https://i-blog.csdnimg.cn/direct/27d907696e3247aeba7c045db3a99ed2.png)
去邮箱里验证一下![[图片]](https://i-blog.csdnimg.cn/direct/0e724af9202d468b97b75bf41aef9997.png)
使用免费的套餐就行。![[图片]](https://i-blog.csdnimg.cn/direct/c10bcceb41a843deb2d56c427c814a07.png)
![[图片]](https://i-blog.csdnimg.cn/direct/502c7482b2d042b9bd13da6c8b4715fd.png)
操作完成后,就可以在CodeBuddy中登录啦![[图片]
[图片]](https://i-blog.csdnimg.cn/direct/207b798ba3ed46d5b7d481b14d8d912a.png)
2)新建一个数据库项目
![[图片]](https://i-blog.csdnimg.cn/direct/2be19b7b7df2496da37d949086a94c67.png)
项目名称和密码自行设定![[图片]](https://i-blog.csdnimg.cn/direct/87c097a4db404ba98fa6b024278fd568.png)
然后绑定一下项目![[图片]](https://i-blog.csdnimg.cn/direct/2563f80c42184a26bd56cccafbfa173e.png)
![[图片]](https://i-blog.csdnimg.cn/direct/45312e1cc7664e54a79966d6d4987704.png)
![[图片]](https://i-blog.csdnimg.cn/direct/9895ea9b2e1240f99e07ebe11527dee6.png)
![[图片]](https://i-blog.csdnimg.cn/direct/93d04ce2374f4a9387bc1892b6ff43d8.png)
![[图片]](https://i-blog.csdnimg.cn/direct/fc1f5a11f1564d3d84f61492c3bd4534.png)
3)运行测试
发送需求:
帮我抓取当天的热点新闻,做一个网页,并存储到数据库中
编写完后,会自动运行,如果没有自动运行,也可以手动运行一下![[图片]](https://i-blog.csdnimg.cn/direct/c778d5839e7b4e6a854fc65d35020270.png)
![[图片]](https://i-blog.csdnimg.cn/direct/55c4e4eeec324c9c8054a8916f977f67.png)
运行成功后,接下来我们访问Supabase官网,查看一下数据是否存储了:https://supabase.com/dashboard![[图片]](https://i-blog.csdnimg.cn/direct/4b3a40279bea41d7a3a7fb19033938e3.png)
![[图片]](https://i-blog.csdnimg.cn/direct/a36cc3c0ccdf4a21a7dc27740cd12155.png)
4、配置MCP
![[图片]](https://i-blog.csdnimg.cn/direct/85606e97c0a14e3bbb6fd7eed869042f.png)
MCP,全称是Model Context Protocol,模型上下文协议,由Claude母公司Anthropic于去年11月正式 提出。MCP是一种技术协议,一种智能 体Agent开发过程中共同约定的一种规范。
1)配置MCP服务
![[图片]](https://i-blog.csdnimg.cn/direct/315768641c7a4379a167b7e4ba15075a.png)
可以添加魔搭社区的mcp服务https://www.modelscope.cn/mcp
注册一个账号![[图片]](https://i-blog.csdnimg.cn/direct/8234d51158b34c02ab64da55781b2d3b.png)
这里以Fetch网页内容抓取的mcp为例![[图片]](https://i-blog.csdnimg.cn/direct/19d256ca46464b148628b9bf637d2389.png)
有两种方式,第一种是用modelscope的mcp服务,好处是更稳定一些,坏处是每天有次数限制,一般也够用了。
设置一下有效期,然后点击连接。然后就可以复制配置文件了。![[图片]](https://i-blog.csdnimg.cn/direct/d81e10dd6b9b42c0ba59784bf98321c8.png)
![[图片]](https://i-blog.csdnimg.cn/direct/17575d9ef7544baf829c5c3c488720d1.png)
第二种方式是使用原生的mcp服务,我们可以在详情页找找有没有配置方法,uvx或者pip都可以![[图片]](https://i-blog.csdnimg.cn/direct/907955449e6c423582a9cafe42f31b5f.png)
然后把复制的配置,直接粘贴到CodeBuddy中
粘贴的时候注意一下花括号,最外面的花括号不要动![[图片]](https://i-blog.csdnimg.cn/direct/b34873aa1f924493adc62de0de7cffff.png)
配置完后,稍微等一会,等环境自动下载安装mcp服务之后,重新打开mcp,就可以看到多了一个服务![[图片]](https://i-blog.csdnimg.cn/direct/358b7a48ce034a448a86069a026fbf33.png)
2)添加第二个mcp服务
我们再添加一个必应搜索的mcp![[图片]](https://i-blog.csdnimg.cn/direct/1883e254e5ba47568b046b12c2bc2d3a.png)
我们找到详情页的配置,把里面bingcnmcp的内容复制出来,不要复制全部![[图片]](https://i-blog.csdnimg.cn/direct/29a12a0016954d29abffd627bfd99eb8.png)
然后粘贴到CodeBuddy的mcp配置文件中,注意要在bingcnmcp之前加一个逗号![[图片]](https://i-blog.csdnimg.cn/direct/c5e6121fd2084a08a17bc21473c5b8f9.png)
添加完后,就可以显示出来第二个mcp服务了,后续添加mcp服务可以按照此方法进行![[图片]](https://i-blog.csdnimg.cn/direct/54854fe2455f464ea4b4b4180093e57e.png)
3)测试mcp
输入命令:
帮我查找一下当天的热点新闻,并更新到网站上,并且点击之后能跳转到原网页
CodeBuddy就可以自动调用bing搜索,去查找内容并更新到网站上![[图片]](https://i-blog.csdnimg.cn/direct/ac9597429bac4a9db4056e9482dce596.png)
![[图片]](https://i-blog.csdnimg.cn/direct/78bbc27e37d941df9cedfba8a3136c0b.png)
5、其他功能
1)上传图片
![[图片]](https://i-blog.csdnimg.cn/direct/c121294a0ac545ff98d94cb0f8c49246.png)
可以让CodeBuddy按照图片样式设计,也可以提取图片中的文字
2)预览
![[图片]](https://i-blog.csdnimg.cn/direct/6baa4cf669fe48fb8fd1d8483f9ac9c3.png)
如果为网页,可以点击此按钮实现网页效果的预览![[图片]](https://i-blog.csdnimg.cn/direct/d53c85a96d7041849e45ca71296159d3.png)
3)部署
可以将项目部署在Tencent CloudStudio或者EdgeOne Pages![[图片]](https://i-blog.csdnimg.cn/direct/8a294d0d5b954294ad469089afd2820f.png)
4)设计模式和计划模式
![[图片]](https://i-blog.csdnimg.cn/direct/5bb71b2ad25347a88b7e94ca52fd45c2.png)
![[图片]](https://i-blog.csdnimg.cn/direct/d14bd6d6c53844838215742faa36679e.png)
这个功能类似kiro的spec模式,trae的solo模式的功能。就是当你输入完功能,从需求分析、产品ui设计到代码实现三个纬度给你规划内容,最终生成详细的规划markdown文件。不过这个时间确实有点久,如果我们只是小功能的开发,还是建议选择普通的开发模式。
5)提示词优化
可以对当前的问题进行扩写和优化![[图片]](https://i-blog.csdnimg.cn/direct/13621d3bb3674705ab0591056fe50fba.png)
优化以后显得更专业更具体![[图片]](https://i-blog.csdnimg.cn/direct/06580aa770dc475fa892416e26eee40b.png)
四、其他编程语言
1、python
无界面提示词参考如下:
用Python写一个[XXX]脚本,要求实现[XXX]功能并添加异常处理模块,确保代码正确性,能够处理运行时的错误并给出提示。
有界面提示词参考如下:
用Python写一个[XXX]脚本,要求用pyqt显示[XXX]内容,实现[XXX]功能并添加异常处理模块,确保代码正确性,能够处理运行时的错误并给出提示。
![[图片]](https://i-blog.csdnimg.cn/direct/6861482b70ad410aa8a74117e9c57589.png)
一般运行时,会让安装python插件,我们安装一下即可。如果没有弹出,我们也可以手动在左侧安装ms-python和detachhead![[图片]](https://i-blog.csdnimg.cn/direct/ee702326deba4cd390efbd32e7bf057a.png)
如果弹出以下窗口,忽略即可![[图片]](https://i-blog.csdnimg.cn/direct/cb38f1bf5cf045608bd573dc249f3050.png)
2、C#
这里以winform项目为例,我们手动在VS2022中创建一个项目![[图片]](https://i-blog.csdnimg.cn/direct/383265e3d7ba486f9cd1a9e6a89ccf7a.png)
创建完后,我们用CodeBuddy也打开这个项目![[图片]](https://i-blog.csdnimg.cn/direct/27efae582a3148bbbfafc6267b4cf4dc.png)
然后就可以给CodeBuddy提需求让他添加功能了![[图片]](https://i-blog.csdnimg.cn/direct/0fc1441c016d482ebf511d4c8966629b.png)
安装一下插件![[图片]](https://i-blog.csdnimg.cn/direct/105711679f0347e4a12a996088c455bb.png)
或者手动搜索muhammad-sammy.csharp安装![[图片]](https://i-blog.csdnimg.cn/direct/49e2139b3b6440d488db0c5478572ab0.png)
编写完后,我们就可以回到VS2022中运行项目了![[图片]](https://i-blog.csdnimg.cn/direct/7da3fa1e9d664240bed9ae0cc96ae252.png)
3、java
打开IntelliJ IDEA,并创建一个java项目,java版本自行选择安装![[图片]](https://i-blog.csdnimg.cn/direct/571ad6fca53c4d2680413e9f2e62950c.png)
![[图片]](https://i-blog.csdnimg.cn/direct/4b158661052d4313abd158acf68fc555.png)
创建完成后,用CodeBuddy也打开这个项目![[图片]](https://i-blog.csdnimg.cn/direct/80ed8114e37042e5a456d686e8c452d2.png)
然后在CodeBuddy中提需求进行代码编写![[图片]](https://i-blog.csdnimg.cn/direct/8673fd3f229142ae8329df033b47cc85.png)
右下角弹出扩展安装,安装一下![[图片]](https://i-blog.csdnimg.cn/direct/7256fcd1d951483fa138fc32ae951c8e.png)
或者也可以在扩展中手动搜索安装vscjava.vscode-java-pack![[图片]](https://i-blog.csdnimg.cn/direct/112fe9c34d2d4c479f640e1f7f07b00b.png)
最后编写完后,就可以在IntelliJ IDEA运行项目了![[图片]](https://i-blog.csdnimg.cn/direct/74138d397f504a66973bb4dcfda12efc.png)
也可以在CodeBuddy中运行![[图片]](https://i-blog.csdnimg.cn/direct/87ca5825f3914a55be523b8f14521c2a.png)
五、常用提示词
1、投标参数转化为页面
原始参数如下:
边缘端工业设备通过协议或透传接入,其中协议连接 方式应支持的工业协议:支持主流 PLC 系统驱动协议,包括但不 限于西门子、三菱、AB、欧姆龙、施耐德、松下、汇川、台达、 信捷、ELCO 等,以及部分支持标准 Modbus RTU、Modbus TCP 等协 议的 PLC 产品。基于网关协议及接口扩展能力,可以向下连接其 他控制系统、I/O 产品和传感器,进一步丰富扩展数据接入能力, 向上连接平台和数据使用者,完成数据的连接、整合和发布,除 网关厂家默认的协议方案之外,支持用户通过 Docker 灵活加装第三方软件和驱动程序,包括自定义数据通讯报文格式等。
优化后的提示词如下:
帮我写一个页面,实现以下功能,要求每个功能参数都要在页面上体现出来,可以分为主页面和多个二级页面实现。可适当丰富填充页面,不局限于参数的内容。页面设计的炫酷一些,工业风格,符合大屏展示,我的分辨率为1920*1080。
(1)边缘端工业设备通过协议或透传接入,其中协议连接方式应支持的工业协议:支持主流PLC系统驱动协议,包括但西门子、三菱、AB、欧姆龙、施耐德、松下、汇川、台达、信捷、ELCO,以及部分支持标准ModbusRTU、ModbusTCP等协议的PLC产品。
(2)基于网关协议及接口扩展能力,可以向下连接其他控制系统、I/O产品和传感器,进一步丰富扩展数据接入能力,向上连接平台和数据使用者,完成数据的连接、整合和发布
(3)除网关厂家默认的协议方案之外,支持用户通过Docker灵活加装第三方软件和驱动程序,包括自定义数据通讯报文格式等
2、负面限定
禁止出现一些模棱两可的内容,或者范围性的数据,每条数据必须精准可靠。
3、页面补充
xxx页面xxx模块不够具体,帮我丰富一下内容,填满页面,可参照xxx行业xxx标准来设计。
4、页面纠错
xxx页面xxx模块设计的不合理,xxx功能缺失/逻辑错误/显示残缺,应该达到以下效果:xxxx。
5、重点突出
帮我把xxx参数在页面上重点突出一下,要给专家评委来看,他们不懂技术,需要逐条核对。
6、大屏炫酷风格
帮我尽可能的美化这个页面,设计的炫酷一些,符合大屏展示,颜色风格以蓝黑色为主,我的屏幕分辨率为1920*1080
7、代码审查
检查项目代码中的潜在问题,按安全性、性能、可读性分类说明,帮助开发者提升代码质量,避免安全隐患和性能瓶颈。
更多推荐


所有评论(0)