codeBuddy IDE 使用教程

AI编程工具codeBuddy喂饭级教程来了

一、常用的AI编程工具简介

|----------------|----------------------------|---------------------------------|
| 名称 | 特点 | 使用场景 |
| cursor | 独立IDE,内置GPT-4,可自然语言修改代码,收费 | 新项目开发,重构 |
| Trace | 字节出品,免费使用 | 新项目开发,重构 |
| CodeBuddy | 腾讯云出品,目前有免费版 | 工程级代码生成,支持MCP协议,适合复杂项目 |
| Gemimi Cli | Google Gemini 模型的终端接口,轻量快速 | 快速原型验证 |
| CopilotCodePro | 公司的AI编程助手,可集成在vscode中 | 支持思维连和工程级别修改 |
| Claude code | 集成在终端的AI编程助手 | 可以完成需求->代码->测试->重构->发布的完整链路 |

codeBuddy IDE是腾讯最近刚出的全球首个产研一体AI全栈高级工程师,相当于从设计 -->实现->部署一站式开发

一、codeBuddy详解

(1)支持Claude/GPT/混元/DeepSeek等国内外主流模型

(2)支持将想法生成规范严格的需求文档和执行计划

(3)支持将创意转成组件化、规范化、可交互的设计稿

(4)深度集成Figma设计工具,一键生成高保真页面

(5)内置腾讯云开发和Subpabase后端服务,自动配置

(6)一键部署到远端Cloud Studio 沙箱环境,即刻分享

三、下载

打开官网:https://www.codebuddy.ai,点击中间的 Download the lDE 进行下载。

四、注册账号

1、点击首页右上角,个人图标,注册账号

2、填写表单

3、注册成功,ide登录账号,登录成功,跳出输入邀请码的界面

五、语言设置

第一步:点击右上角的设置按钮

第二步:点击 Features

第三部:切换 English 切换为 中文

设置完语言后,在桌面创建一个文件夹,把文件夹拖入,codeBuddy,整体界面的风格如下:

六、页面功能

1、Figma 选择

点击 Figma 会打开左侧的预览区域,并打开 Figma 网站,这直接省去了,我们再去浏览器打开网站的步骤

选择谷歌账号登录

可以选择其他方式,使用密码登录

导入 Figma 就可以进行根据 UI 开发

2、选择组件

鼠标悬浮选择组件图标,可以看到有三种组件

1)TDesign Components

官网:https://tdesign.tencent.com/

腾讯家自己的 UI组件库,有 PC 端、移动端、小程序组件,整体感觉现代、简约风格,支持 vue、React、小程序、QQ 小程序。

  1. MUl Components

官网:https://mui.com/

Material-UI(现在更名为 MUI)是一个基于 Google Material Design 设计规范构建的 React UI 组件库,主要是一个 React UI 组件库,专为 React 应用构建的组件库。

3)Shadcn Components

颜色没有那么的丰富,看起来比较简洁和极简,使用自定义和扩展比较方便

4、配置集成

可以直接数据库进行配置,存储数据,不用自己再去做后端那一套。

鼠标浮上去,会显示当前连接了什么数据看,点击右上角的设置按钮

可以选择 Supabase 和 Tencent CloudBase 两个数据库。

5、配置 MCP

6、上传图片

7、预览

直接会运行,你当前打开的这个项目,在编译器里进行运行,不用在打开浏览器查看效果

8、部署
9、两种对话模式切换

Design Mode 和 Plan Mode

这两个模式,只有在Craft模式下才有

  1. 设计模式(Design Mode):专注于 UI 界面实现

主要功能:创建可视化的用户界面

技术栈:固定使用 React+ Shadcn UI+ TypeScript输出结果:可运行的前端页面和组件。

工作流程

理解UI需求 →2.设计界面布局 →3.创建React项目→4,实现具体组件 →5.预览效果

适用场景:

快速原型制作

UI 组件开发

页面布局设计

前端界面实现

  1. 规划模式(Plan Mode):专注于项目规划和架构设计

主要功能 :分析需求、制定计划、跟踪进度技术栈:不限制,根据需求选择最适合的技术输出结果:项目规划、技术方案、开发计划'工作流程

1、 需求分析→ 2.技术选型 →3.架构设计 →4.制定计划 →5.跟踪执行

适用场景:

复杂项目规划

技术架构设计

开发进度管理

多技术栈项目

10、Boost Prompt

AI 提示增强技术,这个功能可以帮你进行优化提示词

核心功能

提示优化-自动改进和优化输入的提示词,使其更加精确和有效上下文增强-为提示添加相关背景信息和上下文,提高 AI 理解准确性结构化处理-将模糊的需求转换为结构化、逻辑清晰的指令多轮对话优化-在对话过程中持续优化提示效果

主要作用

提高响应质量-通过优化提示获得更准确、更相关的 AI 回答减少误解-明确表达意图,降低 AI 理解偏差节省时间-避免反复修改提示词的时间成本增强专业性-针对特定领域自动添加专业术语和背景

相关推荐
Jackson@ML4 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
GoGeekBaird5 小时前
想在AI 时代做点东西,GoHumanLoop阶段性总结
github·agent·ai编程
刘恒1234567895 小时前
Pycharm
ide·python·pycharm
大熊猫侯佩8 小时前
斯塔克工业技术日志:用基础模型打造 “战甲级” 结构化 AI 功能
ai编程·swift·apple
lecepin9 小时前
AI Coding 资讯 2025.8.27
前端·ai编程
柿蒂10 小时前
从动态缩放自定义View,聊聊为什么不要把问题复杂化
android·ai编程·android jetpack
不想取名5612 小时前
VSCode MCP体验
ai编程
量子位12 小时前
小扎高薪挖来的人又跳回OpenAI了!首席科学家赵晟佳也要回去
openai·ai编程
量子位12 小时前
马斯克星舰试验再创历史!3次爆炸3次推迟终成功,顺利完成太空载荷部署
ai编程
用户307429716715812 小时前
Spring AI实战:基于ElevenLabs 实现文本转语音的实时音频流
java·spring boot·ai编程