一、产品阶段:从想法到需求
·智能需求分析:自然语言描述转结构化 PRD 文档
·需求优化建议:AI 辅助完善和优化产品需求
二、设计阶段:从需求到设计稿
·多种生成方式:
·自然语言生成交互原型
·手绘草图转高保真设计稿
·基于组件库快速拼装
·AI 视觉优化:通过自然语言指令实时调整设计风格
三、研发阶段:从设计稿到代码
·设计稿一键转代码:
·内置 Figma,直接将设计稿快速转化为前后端可维护代码,打通从设计到研发的“最后一公里”
·智能补全和错误修复
·单元测试自动生成
·代码理解与审查:
·快速解释既有代码
·智能代码审查
四、部署阶段:从代码到上线
·快速部署:一键部署至沙箱环境
·分享协作:生成可公开访问链接,便于团队验证和反馈
五、对话功能
你可以通过自然语言与 Agent 进行对话,Agent 将根据你选择的对话模式(Chat/Craft)帮你提供解决方案,或自动帮你完成复杂编码任务。此外,你可以根据实际场景需求,合理使用内置的功能/工具,例如 Figma、Components、Integration、MCP 等等。对话功能提供两种交互方式:侧栏对话和编辑器内的内联对话。
六、侧栏对话
打开侧栏对话可以通过以下两种方式:
1. 单击右上方的切换辅助侧栏按钮:
2. 直接通过快捷键打开(Windows:Ctrl + Shift + V,Mac:⌘ Command + ⇧ Shift + V)。
七、对话模式选择
在侧栏对话中,你可以根据实际需求使用不同的模式与 Agent 进行对话,即 Craft 、Ask 和 Plan 模式。
·Ask (对话模式):专注于技术问答与概念解释,不直接修改代码。适合快速获取思路或查阅 API。
·Craft (Agent 模式):专注于当前上下文的代码生成与局部修改。响应迅速,适合精准的函数编写或小范围重构。
·Plan (计划模式):自动化模式。适用于跨文件修改或复杂功能开发。AI 会先制定任务清单(Plan),经你确认后自主执行读取、修改及环境检查。
八、添加上下文
可通过 @ 符号选择添加文件、知识库等资料作为对话上下文,将更多信息提供给模型,提高模型输出的质量。
九、内置功能/工具
CodeBuddy IDE 内置了众多的功能/工具供你选择使用,你可以根据实际需求进行选择。
·Figma:支持通过内置浏览器打开 Figma 页面,将你的设计稿添加到对话中,提供给 Agent 还原成可交互式的前端代码。
·Components:内置了 TDesign Components、MUI Components、Shadcn Components 三种组件库,可快速拼装生成符合规范的设计稿代码。
·历史提问:快速查询当前上下文中的历史提问。
·集成:
·内置了 Supabase / Tencent CloudBase 后端服务,无需手动配置,自动处理数据库、用户认证或腾讯云生态等需求。
·可将你的项目部署至云端,生成可公开访问的链接,方便团队快速验证反馈。
十、增强提示词
即 Prompt 优化,将你模糊的 Prompt 进行优化,更好地完成你的任务。
十一、对话管理
对话管理包括创建新对话和历史对话记录管理。
·创建新对话
如果你有其它不同的任务,或者当前对话中上下文对话内容过多,不希望被干扰,你可以单击创建新对话按钮开启一个新对话。
·历史对话记录管理
单击历史对话记录按钮后,你可以查看或切换历史对话记录,并支持对历史对话记录进行删除、编辑和导出的操作。
十二、内联对话
可以通过快捷键的方式打开内联对话,Windows:Ctrl + I,Mac:⌘ Command + I。在内联对话中,你可以圈选代码后,通过自然语言的方式进行对话,Agent 将帮你完成任务。
十三、Tab
支持多行编辑的智能代码补全。基于当前代码内容和项目上下文分析,提供多行代码补全建议,并支持基于历史编辑记录的“下一步编辑建议”功能,可通过 Tab 键接受补全建议。
十四、设置及快捷键
在 CodeBuddy IDE 中,可以单击右上方的设置按钮打开设置页进行设置,在设置页中,分为插件、MCP、规则、记忆、集成、技能、Agent 这7个分页,供你选择设置。
在右上角头像处进入 IDE 设置中,可按如下位置查看/配置快捷键。
十五、打开或创建项目
1. 打开 CodeBuddy IDE,右上角图标分别对应终端和右侧聊天窗口打开与关闭。
2. 根据实际情况选择创建一个新的项目,或打开已存在的项目。
·创建新项目 单击 新建文件夹 ,支持在系统用户目录中创建一个新项目。
·打开已存在的项目单击打开文件夹,将会在本地打开一个已存在的项目。
·克隆远程 Git 仓库项目
·确保已安装 Git,可使用下方命令查看版本。如未安装,请访问 Git 进行安装。
git –version
·获取远程 Git 仓库的 URL,例如:https://github.com/leaferjs/leafer-draw.git。
·单击克隆 Git 仓库,输入 URL,然后选择克隆项目存放的目录即可。