乐于分享
好东西不私藏

【CodeBuddy】装完 AI 编程工具对着界面发呆了 30 分钟?5 分钟带你跑通第一个任务

【CodeBuddy】装完 AI 编程工具对着界面发呆了 30 分钟?5 分钟带你跑通第一个任务

🧠 CodeBuddy 入门教程

安装与第一次对话从零到第一个任务

系列:CodeBuddy 入门教程 · 第 2 篇

📝 读完这篇你能:装上 CodeBuddy、选对入口、完成第一次 Ask/Craft/Plan 三模式体验。

━━━━━━━━━━━━━━

一、选入口二、界面速览三、Ask 初体验

四、Craft 初体验五、Plan 初体验六、避坑

━━━━━━━━━━━━━━

上篇讲完 CodeBuddy 是什么,有朋友私信我:"说了半天,从哪开始?装完对着界面不知道干嘛。"

这个感觉我太懂了。工具装上了、账号注册了,然后呢?对着一个空旷的界面发呆,想试试又不知道从哪下手。

这篇不讲理论,跟着做就行。

另外说在前面:如果你从来没用过任何代码编辑器,不要慌。CodeBuddy 的 IDE 版是专门照顾新手的——不是说"新手也能用",而是它本来就是给"不一定会写代码但想做点东西的人"设计的。

· · ·

1 选对你的入口

三个入口,按你的情况对号入座:

🖥️ 情况一:你什么开发环境都没有,想省事

做法:下 IDE 版。去 codebuddy.ai 点下载,装完微信扫码登录,3 分钟搞定。自带的编辑器不需要任何额外配置。

🔌 情况二:你已经有 VS Code,不想换环境

做法:装 插件版。在 VS Code 扩展商店搜 "CodeBuddy",点安装。装完之后侧边栏多一个 CodeBuddy 图标,点开就能用。

💻 情况三:你习惯命令行,喜欢敲键盘多过点鼠标

做法:装 CLI 版(CodeBuddy Code)。终端里跑:

npm install -g @anthropic-ai/codebuddy-clicodebuddy login

💡 关键建议:如果你不确定选哪个,选 IDE 版。别在入口选择上纠结,先进去再说。

· · ·

2 打开之后,你会看到什么

以 IDE 版为例(插件的界面布局一样,只是嵌在 VS Code 里):

 左侧:对话面板。这是你跟 AI 聊天的地方。上面有个输入框,下面是聊天记录。

 右侧:文件编辑区。你打开的文件、代码都在这里显示。

 底部:终端(暂时可以不管,后面才会用到)。

然后注意左上角,三个按钮:

[Ask]   [Craft]   [Plan]

这三个模式就是你跟 CodeBuddy 配合的三种方式。下面一个一个玩。

· · ·

3 第一次 Ask:让它读一个项目给你看

Ask 模式最适合作"初体验"——什么都不用准备,问就行。

准备工作:找一个你电脑上的文件夹——最好是别人写的、你不太熟悉的项目。如果没有,随便打开一个有代码的文件夹就行。我从 GitHub 上随便下载了别人的 Python 工具项目来做演示。

操作步骤:

 在 CodeBuddy 里打开那个项目文件夹(File → Open Folder)

 点击左上角 [Ask],确保是 Ask 模式

 在对话框输入:

"帮我用口语化的方式解释一下这个项目是干什么的,核心代码逻辑是什么。当我是个刚入行 1 年的前端开发。"

 按 Enter,等几秒。

它会自动扫描项目文件结构,然后给你一段完整的解释。我第一次试的时候,把一个同事写的 2000 行的数据处理脚本扔进去,它用了不到 10 秒就读完了,然后告诉我:这个脚本做了三件事——从 CSV 读数据、按日期分组统计、把结果写成 Excel。还额外告诉我"中间那段用了 pandas 的 groupby,其实可以换成更高效的 pivot_table"。

💡 就是这种瞬间,你会觉得它不是糊弄你的。

💡 小技巧:在 Ask 提示词里加上"当我是一个 [你的背景]"这句话,会明显改善回答的通俗程度。比如说"当我是一个产品经理""当我是刚学 Python 的人"。AI 会根据这个调整解释的深度。

· · ·

4 第一次 Craft:让它改个东西

Ask 玩过了,现在试试让它动手改东西。切到 Craft 模式。

Craft 的核心是"指哪改哪"——你选一段,说怎么改,它只动这一段。

实操:

打开任意一个 .py 或 .js 或 .html 文件。如果没有,新建一个 test.html,内容随便写几行:

<h1 style="font-size:20px;color:black;">欢迎来到我的网站</h1><p>这是一段介绍文字</p><button onclick="alert('hello')">点我</button>

然后:

 用鼠标选中那行 <h1> 的代码

 切到 Craft 模式

 在对话框输入:

"把这个标题的字号调大一点,改成深蓝色,加个下划线。"

 等几秒。

CodeBuddy 会定位到这个 <h1> 标签,修改样式,然后给你看对比视图——左边是原来的,右边是改完的。绿色的是新增,红色的是删除。

你可以点 "Accept" 接受修改,或者 "Reject" 拒绝。

Craft 模式最好的地方就是精确。你不用担心它顺手改了别的东西——不像有些 AI 工具,让它改个标题颜色,它把整个页面重写了一遍。

· · ·

5 第一次 Plan:让它自己干活

这是最好玩的部分。别紧张,你不会写代码也没关系。

任务:做一个能在浏览器里用的每日待办小工具。

操作:

 切到 Plan 模式

 在对话框输入:

"帮我做一个简单的每日待办事项网页工具,要求:- 能在浏览器里打开直接用- 可以添加待办事项- 做完的可以勾掉- 数据存在浏览器本地,刷新不会丢- 白色的简洁风格"

 按 Enter。

CodeBuddy 不会直接写代码,而是先给你看一份计划:

📋 执行计划:1. [创建] index.html —— 页面结构和布局2. [创建] style.css —— 白色简洁风格样式3. [创建] script.js —— 添加/勾选/删除待办 + 本地存储4. [测试] 在浏览器中检查功能是否正常

 你确认计划没问题,点"确认并执行"。

然后它会一个一个文件地创建。你会看到:

- 先是 index.html 出现在右边的文件列表里- 然后是 style.css- 然后是 script.js- 最后它会用到终端,自动打开浏览器测试

全程你做的事情只有:描述需求 → 确认计划 → 看着它干活。

第一次做完之后,直接在浏览器打开 index.html,一个能跑的小工具就出来了。你可以在里面加待办、勾掉、刷新页面——数据没丢。

💡 就是这个瞬间,很多人会真正"上瘾"。不是因为它多聪明,是因为你真的什么都没做,一个能用的东西就出来了。

· · ·

6 三个易犯的新手错误

我在带朋友入坑的过程中,发现这三个坑几乎每个人都会踩一遍:

❌ 坑1:第一个任务太大了别上来就说"帮我搭一个电商网站"。Plan 模式也有上下文限制,任务太大它会乱。✅ 新手第一个任务控制在 HTML 网页工具 或 Python 脚本 这种量级,3-5 个文件以内最好。

❌ 坑2:Plan 执行时切走了Plan 模式执行过程中,你最好盯着看。不是因为它需要你操作,而是万一中间某一步跑偏了,你能及时发现然后说"停,这里不对"。✅ AI 有时候会"自嗨",越跑越偏。盯着点。

❌ 坑3:忘了说平台和框架"帮我做一个登录页面"——它会默认用最通用的技术栈(可能是 HTML+CSS+JS)。✅ 如果你需要 Vue / React,记得说清楚:"用 Vue 3 帮我做一个登录页面"。

━━━━━━━━━━━━━━

写在最后

🚀 一句话:从 Ask(问)到 Craft(改)到 Plan(做),三个模式分别对应"理解→修改→创造"。你不需要一次全掌握,Ask 就够你玩几天的。

⚡ 下一篇:Skills 机制——大多数 CodeBuddy 用户都不知道它存在,用了之后效率直接翻倍

本文操作基于 CodeBuddy IDE 4.x 版本截图因格式限制用文字说明代替,实际操作界面可能略有差异