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 理解偏差节省时间-避免反复修改提示词的时间成本增强专业性-针对特定领域自动添加专业术语和背景

相关推荐
羸弱的穷酸书生2 小时前
前后端流式交互的几种方式
人工智能·交互·ai编程
都叫我大帅哥2 小时前
当AI遇上话痨:LangGraph的`trim_messages`裁剪艺术完全指南
python·langchain·ai编程
七月shi人8 小时前
【AI编程工具IDE/CLI/插件专栏】-国外IDE与Cursor能力对比
ide·人工智能·ai编程·代码助手
yaocheng的ai分身11 小时前
Cursor 终端“卡死/无响应”问题的解法
ai编程·cursor
应诺92911 小时前
2025 年 VSCode 插件离线下载硬核攻略
ide·vscode·编辑器
yaocheng的ai分身11 小时前
AI 领域的新技能不是 Prompting,而是 Context Engineering
ai编程
Pitayafruit11 小时前
Spring AI 进阶之路01:三步将 AI 整合进 Spring Boot
spring boot·后端·ai编程
yaocheng的ai分身11 小时前
AI Coding 方法论之 Compounding Engineering
ai编程
星际码仔13 小时前
模仿Kiro,超越Kiro:一图说明Augment Code的「任务列表」强在哪里
openai·ai编程·cursor