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

相关推荐
浩风祭月13 小时前
AI 改代码总爱顺手重构?一份 Task Contract 把修改范围锁住
ai编程·claude·cursor
大志说编程13 小时前
Agent面试真题06: 十分钟带你快速掌握Agent记忆管理高频面试题(附详细答案)
后端·面试·ai编程
葡萄城技术团队13 小时前
从提示词工程到 Harness Engineering:打造坚实可靠的 AI 开发系统
ai编程
用户616356618110413 小时前
手搓AI工作流:让AI从“野马“变“战马“
ai编程
玄星啊13 小时前
AI 编程的第 30 天,我怀念古法 Coding 了
前端·ai编程
唐老板13 小时前
给AI加了3条规则,SQL翻车率降了
ai编程
深蓝AI13 小时前
Claude Code 子智能体实战:让 AI 自己调 AI 来写代码
ai编程
ServBay13 小时前
Claude Code 被曝植入后门,AI 时代如何安全打造本地 DevOps
后端·ai编程·claude
threerocks16 小时前
Fable + GPT Image = 无敌,Claude Code 中使用 Codex(订阅)生图的方案
aigc·ai编程
刘棕霆17 小时前
29—AI Skill 测评集如何保持有效:从线上负反馈到 regression 用例
aigc·ai编程·测试