codeBuddy IDE 使用教程

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

一、常用的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 小程序。

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