叶小钗

放弃Claude Code和CodeX之后,我们选了WorkBuddy

Image

之前我们 AI 训练营里的作业是用古法编程或者 Coze/Dify 来承载工作流的,但从今年开始全部换成了 AI Coding。

工具方面最开始用的 Claude Code,只不过很多非技术同学学起来费劲就换成了 CodeX,然后在这个基础上还是有些同学处在懵懵懂懂中,于是在有些情况下就不得不换成 WorkBuddy 了。

这里面是有很多惨案的,尤其是两个场景:线下 AI Coding 培训 + 线下 AI 原生组织推进时候的工具选择:

Image

首先,大家要意识到每个的工作环境是不一样的,比如我用的是 Mac 电脑,64G 内存,配置很高了;但线下培训的同学 50%+ 都是 Windows,这里遭遇的问题就会很具体了,比如:

  1. C 盘满了,软件安装不成功;
  2. 魔法工具出问题导致 CodeX 经常性断联;
  3. 公司 IT 管理员设置了外部软件安装权限,就算安装了也用不了;
  4. CodeX 接 CC switch,这对他们说兼职是天书;
  5. 还有些是极轻薄本,我也不知道什么型号,就是两根手指头可以捏起来的那种笔记本,基本上是跑 CodeX 点一下发送先卡两秒;
  6. ......

总而言之,这些问题都非常具体,也非常杂,我一看到就很头疼,因为这些问题其实是没有价值的,但要去解释就要面对同学们清澈而失焦的眼神。

比如,他们就对为什么 AI 还需要 API Key/模型 ID 这个事情搞不清楚,总之就是很难聊了,甚至其中一些问题,我都害怕,比如:URL 是什么?类似这种问题要说清楚可能得从盘古开天地说起!

我思考了下对策,很容易就跟小伙伴达成了一致:用 WorkBuddy 这类国产工具就好,虽然确实会弱一点,但真的会少很多很多前期烦恼!

Image

那么,为什么会造成如今的情况,除了最本质的基本知识沉淀不足外,就应该是知识诅咒了,我们在做很多事情的时候、在讲解知识的时候太理所当然了;

如果要把一个事情讲清楚,就要把自己当一个真小白,这可能也是很多神奇的存在能用 AI 去割韭菜的原因,因为他们能更清晰的表达,知道小白的卡点在哪。

比如要教 CodeX,他们就会从第一系列问题开始:

  1. 如何安装 CodeX?
  2. 如何使用 CodeX?
  3. 用 CodeX 做点什么
  4. ...

但这里也就是小白教学的局限性所在了,首先他们不能回答较为深入的问题;其次,但就算安装了 CodeX、使用 CodeX 做了个 Demo 又能意味着什么呢?

毕竟实际培训下来,很多同学就算做出来 Demo,却依旧对 CodeX 一头雾水,而这些问题依旧存在于 WorkBuddy 的使用。

所以我们需要的是一张能力地图,我们能从这张能力地图上看到自己当前到底属于哪一个阶段,下一个阶段又是什么?

Image

路线地图出来后,那后面要做的事情就清晰了,我们学习起来也就更游刃有余了。

Image

AI Coding 小白成长地图

真实的 AI Coding 能力地图可以做得很复杂,他会从两个角度做展开:

  1. 问题复杂度;
  2. 可控性;

这里给张表格大家感受一番:

Image

但对于小白的话,看上图属于徒增烦恼,我们要做一张阉割版出来,他是这么个结构:

Image

这张地图解决了小白三个核心问题:我在哪一级、需要做什么、怎么算完成?

而这里的五层能力地图是有完整递进关系的:跑起来 → 做出来 → 用起来 → 能修改 → 能交付,而每个阶梯也不太难,不会让小白被吓到,也适合做入门。

L1:工具跑起来

Image

这里的核心任务就一个:让学员/小白见识 说话 → 文件变 → 网页变 这个过程,任何阻碍这个闭环的步骤/知识,都是不必要的噪声。

从这里就可以顺便说下,为什么我们会放弃 Claude Code、半放弃 CodeX(线下培训一定不会用)而最终选择 WorkBuddy 的原因了:

Claude Code 劣势极大

需要安装 Node.js、使用终端、配置 API Key、还要对付账单和额度,而最终蛋疼的还是账号获取,有时候光是魔法就会耽搁我们线下培训 3 小时时间,愿意使用这东西做全局培训/推广的简直是异数!

CodeX 稍好,但依旧蛋疼

虽然有了图形界面,但 VS Code 安装(暂时看来要做更多事是需要的)、GitHub 登录、CC Switch 网络配置、模型选择等,每一步都可能卡死。

我们在线下培训经常看到的“清澈而失焦的眼神”多发于此,学员注意力会被迫从做网页转移到搞环境,本末倒置,而且那些问题我看着也头大!

WorkBuddy 包装得极好

这东西优势突出,类聊天界面,无需配置环境,文件操作通过点选完成。它把“文件夹-文件”的物理认知包装成了更直观的操作,学员可以专注在对话和结果上,第一次就完整跑通闭环。

L2:页面做出来

Image

跨域最初的环境阵痛,各个工具、各个模型的优劣开始体现:

Claude Code 依然劣势。虽然它上下文管理强,但命令式交互会直接劝退小白。

CodeX 在这里开始体现出优势了,首先是界面与 WorkBuddy 类似,但他的模型展示还是要领先几步,所以交付能力要强很多,只不过这里依旧有科学上网等困难,这就是一颗雷,经实践一旦遇到问题,学员毫无自救能力。

WorkBuddy 在这里优势保持,而且作为小白入门不会有太复杂的应用,所以他依旧是最安全的选择。

L3:小工具用起来

Image

这里项目开始有多文件(HTML、JS、CSS),需要管理数据状态和本地存储,工具需要稳定地跨文件协同修改。

从这里开始,Claude Code 和 CodeX 开始优势明显了,但 CC 的命令行门槛还在,小白几乎是无法使用的。

后续,我们都不讨论 Claude Code 了,他对小白确实不友好

而 WorkBuddy 这里会开始出现可能的瓶颈,复杂的数据增删改查逻辑需要多文件协同,如果工具的文件管理能力较弱,可能出现改 A 文件漏 B 文件的情况,或逻辑错误排查困难。

从这块开始,如果过了阵痛期,就可以考虑从 WorkBuddy 跨域至 CodeX 了,但因为是小白,不换可能也关系不大。

L4:能修改项目

Image

这里可能需要接手陌生项目、查报错了,工具必须能提供良好的项目浏览和终端能力。

这里 WorkBuddy 劣势会比较明显,因为他毕竟定位是一个办公 Agent 不是 AI 编程环境,只不过现在我们默认 AI 编程已经是办公的核心技能了,所以严格来说确实算是 WorkBuddy 的劣势。

而 CodeX 这里会表现得毫无压力,几乎已经是小白最优解了。

L5:能交付

Image

这里也不再描述,CodeX 依旧是最优解,但 WorkBuddy 也不是不能做,比如:

  1. 整理产品需求;
  2. 生成项目说明;
  3. 制作宣传材料;
  4. ...

只不过在项目的代码开发、测试、版本管理和部署环节,CodeX 优势明显。

另一方面,我们这边各个企业真实咨询情况来说的话,业务团队乃至产品人员做出 Demo 的情况越来越多了,但是最终上线还是离不开研发,毕竟没人会用生产环境开玩笑。

只不过因为 Demo 已经验证通过,这个开发效率是极高的。

接下来,我们就沿着这个地图做详细展开,当然还是以 CodeX 为例:

L1:CodeX 跑起来

L1 的目标是:学员能够独立使用 Codex,在自己的电脑上创建一个网页项目,并完成打开、修改、保存和再次运行。

这个阶段不考察学员能否编写 HTML、CSS、JS,也不要求学员理解代码,几乎所有的学员精力大概都会用到和工具环境做斗争,也就是如何安装成功,以及如何判断是不是真的完整成功?

那么什么叫完整安装成功呢?他至少需要跑通下面这条链路:

软件可以打开
→ 账号可以登录
→ Codex 可以正常使用
→ 可以打开本地文件夹
→ 可以读取项目文件
→ 可以创建和修改文件
→ 文件可以正常运行
→ 修改后可以看到新结果
→ 关闭工具后可以恢复项目
→ 更换新文件夹后还能重新完成

那么这里对应的通关条件也就出来了:

通关清单

学员可以按照下面的清单逐项检查,所有必须项全部完成,才算通过 L1,其中有些选项确实比较蠢,但这个是以我老婆为参考单位做的:

  • A. 工具能用
    • 软件安装完成;
    • 软件可以正常打开;
    • 账号可以正常登录;
    • 可以进入 Codex;
    • Codex 可以正常回复。
  • B. 项目能打开
    • 创建了统一项目目录;
    • 知道项目保存位置;
    • Codex 可以打开指定文件夹;
    • 能确认当前项目名称。
  • C. 文件能读写
    • Codex 可以读取项目文件;
    • Codex 可以创建文件;
    • Codex 可以修改文件;
    • 能在文件夹中找到生成文件。
  • D. 结果能运行
    • index.html 可以打开;
    • 浏览器显示指定文字;
    • 修改后刷新可以看到新结果。
  • E. 项目能恢复
    • 关闭工具后能重新找到项目;
    • 可以重新使用 Codex 打开项目;
    • 可以继续修改原项目。
  • F. 新项目能复现
    • 更换新文件夹后还能重新完成;
    • 能说清问题卡在哪个环节。

而我们今天的任务就是站在小白/学员的角度,一步步去完成 L1,这里大概需要做 12 个步骤:

任务 01:确认自己使用什么电脑
任务 02:确认电脑具备安装条件
任务 03:准备可以登录的账号
任务 04:下载并安装桌面软件
任务 05:登录并进入 Codex
任务 06:创建统一项目目录
任务 07:使用 Codex 打开项目文件夹
任务 08:让 Codex 创建第一个网页文件
任务 09:在浏览器中打开网页
任务 10:修改网页并看到变化
任务 11:关闭后重新找到项目
任务 12:在新文件夹中独立复现

关于电脑环境确认我这里就不展开了,直接进入 CodeX 环境准备:

如何安装 Codex

因为是小白,只要能说的都必须说,首先是魔法问题,这个真没法公开说,大家自己想办法吧……

其次是 ChatGPT 账号问题,有很多种注册方式,但对于小白越简单越好,我建议:

  1. 先注册 Google 账号;
  2. 然后用 Google 账号直接去登录 ChatGPT 就好。

PS:真实情况是,在“如何拥有 Google 账号”这里也可能会卡两个小时。

有了账号以后,不要立刻安装软件,建议先打开 ChatGPT 网页,确认账号可以正常登录,并且能够正常发送和接收消息。

可以发送:

请回复:ChatGPT 账号可以正常使用。

只要下面三项全部通过,就可以继续:

  • ChatGPT 可以正常登录;
  • 可以正常发送消息;
  • 可以收到 ChatGPT 的回复。

有了 ChatGPT 账号,我们再来聊什么是 Codex?

什么是 Codex

Codex 是当前主流 AI 编程工具之一,我个人比较看好。

Image

Codex 目前支持桌面端 App、CLI、编辑器插件和云端四种使用方式,具体选择根据大家的背景和使用场景来决定。

使用形态适合对象
桌面端 App
新手、非技术同学、习惯图形界面的用户
编辑器插件
程序员,之前是 VS Code、Cursor、Windsurf 用户
CLI 命令行
程序员、高频开发者、喜欢终端的用户
Codex Cloud / Web
想把任务丢到云端后台跑的用户

这里我个人使用桌面端 App,也是最推荐的方式。

因为桌面端 App 的交互最直观、功能更丰富、用起来最丝滑,非常适合非技术同学。

如果是专业程序员,也可以使用编辑器插件或者 CLI,这样工作流相对更顺畅。

这几种方式的操作形式不同,L1 阶段只使用桌面端,其他方式暂时不展开。哪种方式容易上手,就先用哪种:

Image

接下来我们说下怎么安装。

安装前先检查电脑

正式安装之前,建议先检查下面几项:

  • 知道自己的电脑是 Windows 还是 Mac;
  • 电脑至少还有 10GB 可用空间;
  • 当前账号可以安装软件;
  • 浏览器可以正常下载文件;
  • 可以在电脑中创建文件夹;
  • ChatGPT 账号已经可以正常登录。

Windows 用户尤其要检查 C 盘。

如果使用公司电脑,还要确认有没有外部软件安装权限。出现管理员密码提示,而且自己不知道密码时,需要联系公司 IT,或者换一台可以正常安装软件的电脑。

这些事情看起来很简单,但线下培训中大量时间就消耗在这里。

如何安装

这里的建议是,非常建议去官网安装。

因为 AI 编程类工具能力太大了,可以读取和修改本地文件。如果从不明第三方网站安装,不知道有没有安全风险。

这里确实不会,也可以直接问 GPT,在它的引导下进行:

请告诉我如何从官方网站下载并安装 Codex 桌面端。

我使用的是 Windows 电脑,请一步一步告诉我:

1. 应该打开哪个页面;
2. 应该点击哪里;
3. 下载完成后在哪里找安装文件;
4. 怎么判断安装成功。
Image

Windows 用户按照下面的步骤操作:

  1. 进入官方下载页面;
  2. 选择 Windows 版本;
  3. 点击下载;
  4. 打开浏览器的下载记录;
  5. 找到刚刚下载的安装文件;
  6. 双击安装;
  7. 安装完成后打开软件。

Mac 用户按照下面的步骤操作:

  1. 进入官方下载页面;
  2. 选择 macOS 版本;
  3. 等待安装文件下载完成;
  4. 打开下载目录;
  5. 双击安装文件;
  6. 按照页面提示完成安装;
  7. 在“应用程序”中打开软件。

于是很快就安装成功:

Image

如果无法安装,优先检查下面几项:

  • 磁盘空间是否足够;
  • 是否拥有软件安装权限;
  • 安装文件是否完整下载;
  • 公司安全软件是否阻止安装。

看到登录界面,只能说明软件已经安装,还不能说明 Codex 已经完整可用。

登录 Codex

随后登录上去,选择自己的角色:

Image

我们这里需要继续装小白,选个伟大的产品经理算了:

Image

这里选择自己的真实角色就好,选什么不会影响后面使用 Codex。

登录时还有一个很容易踩的坑:

浏览器中使用什么方式登录,桌面端继续使用同一种方式。

比如浏览器中使用 Google 账号登录,桌面端也继续点击 Google 登录,不要重新使用邮箱和密码登录。

登录成功以后,发送:

请只回复一句:Codex 已经可以正常使用。

如果可以正常发送消息,并收到回复,说明:

软件可以打开
→ 账号可以登录
→ Codex 可以正常回复

但对 AI Coding 工具来说,到这里依旧不能算完整成功。

因为能聊天,不代表它可以正常读取和修改本地文件。

L1 暂时不安装 Node.js、Git、VS Code,也不使用终端。

当前阶段只需要完成一个单 HTML 网页:

创建 index.html
→ 使用浏览器打开
→ 让 Codex 修改文件
→ 刷新浏览器查看结果

完成这件事暂时不需要 Node.js 和 Git。等到后面开始制作框架项目、安装依赖、版本管理和部署时再处理。

如何使用

Codex 是非常经典的三栏布局:左侧是任务列表,中间是对话窗口,右侧是多功能区域:

Image

其中任务列表非常简单好用,可以方便地添加多个项目和任务,观察每个任务的运行状态,也能在多个任务之间切换。

在 Codex 的逻辑里,左边这栏分为两层:

第一层是项目

可以把它理解成一个个项目文件夹,比如项目 A、项目 B、项目 C。

第二层是任务

点开某个项目,会看到里面一条条对话,每一条对话就是一个独立的任务。

整体关系是,一个项目里可以有很多个任务,每个任务都在同一个项目文件夹中,围绕一个明确目标推进:

Image

对于 L1 来说,这些概念也不需要理解得太深,只需要记住:

项目 = 电脑中的项目文件夹
任务 = 这次希望 Codex 完成的事情
对话 = 你和 Codex 沟通任务的过程

如果新开一个会话任务,不选择任何项目,这种就相当于是纯粹的闲聊。

我一般用它做调研、做规划和一些零碎的问答性小任务。

换句话说,你也可以拿它当 ChatGPT 使用。

但要做 AI Coding,就需要先给 Codex 打开一个电脑中的项目文件夹。

建立项目文件夹

我们先在电脑中建立一个统一的项目目录。

不要把文件随意放在微信缓存、下载目录或者临时文件夹里,否则当天能够找到,第二天可能就完全不知道文件去了哪里。

建议统一放在“文档”或者“文稿”目录中。

最终目录结构如下:

AI-Coding
└── L1
    └── my-first-page

Windows 用户:

  1. 打开“文件资源管理器”;
  2. 点击左侧“文档”;
  3. 新建文件夹 AI-Coding;
  4. 进入 AI-Coding;
  5. 新建文件夹 L1;
  6. 进入 L1;
  7. 新建文件夹 my-first-page。

Mac 用户:

  1. 打开“访达”;
  2. 点击左侧“文稿”;
  3. 新建文件夹 AI-Coding;
  4. 进入 AI-Coding;
  5. 新建文件夹 L1;
  6. 进入 L1;
  7. 新建文件夹 my-first-page。

创建完成以后,需要记住项目的位置:

文档或文稿
→ AI-Coding
→ L1
→ my-first-page

这一步看起来有点蠢,但现实情况是,很多学员网页做出来以后,根本不知道自己的项目保存在哪里。

使用 Codex 打开项目

回到 Codex,找到“打开文件夹”或者类似入口。

依次选择:

文档或文稿
→ AI-Coding
→ L1
→ my-first-page

注意,最后选择的是 my-first-page,不要选择上一级的 L1。

打开以后,发送:

请告诉我:

1. 当前打开的文件夹叫什么名字;
2. 当前文件夹里有哪些文件;
3. 暂时不要创建任何文件。

正确情况下,Codex 应该告诉你:

  • 当前文件夹叫 my-first-page;
  • 当前文件夹里还没有文件。

如果 Codex 说当前文件夹叫 L1,说明打开了错误的文件夹,需要重新选择。

到这里需要确认:

  • Codex 打开的是 my-first-page;
  • Codex 可以识别当前文件夹名称;
  • 当前文件夹中没有其他文件。

创建第一个网页

现在马上给 Codex 一个命令:

请在当前文件夹中创建一个名为 index.html 的网页。

页面要求:

1. 标题写“我的第一个 AI 网页”;
2. 页面中显示我的名字;
3. 增加一句“我正在学习 AI Coding”;
4. 增加一个按钮,文字写“开始学习”;
5. 页面使用橙色主题;
6. 所有内容都写在 index.html 中;
7. 不要创建其他文件。

完成后请告诉我创建了什么文件。
Image

等待 Codex 完成。

如果出现文件修改确认,根据页面提示允许它创建文件。

完成后,需要在两个地方确认:

  1. Codex 中能看到 index.html;
  2. 电脑的 my-first-page 文件夹中也能看到 index.html。

如果 Codex 只在聊天窗口中展示代码,却没有创建文件,可以继续发送:

请不要只在聊天中展示代码。

请把代码真正写入当前文件夹的 index.html 文件。

这里一定要理解一个区别:

聊天窗口中出现代码,不代表电脑中已经出现文件。

只有在项目文件夹中找到 index.html,才说明文件真正创建成功。

打开网页

找到电脑中的 index.html。

Windows 用户:

  1. 打开文件资源管理器;
  2. 进入 my-first-page;
  3. 双击 index.html;
  4. 使用 Chrome 或 Edge 打开。

Mac 用户:

  1. 打开访达;
  2. 进入 my-first-page;
  3. 双击 index.html;
  4. 使用 Safari 或 Chrome 打开。

浏览器中应该可以看到:

  • “我的第一个 AI 网页”;
  • 自己的名字;
  • “我正在学习 AI Coding”;
  • “开始学习”按钮;
  • 橙色页面效果。

看到 index.html 文件,只能说明文件已经创建。

浏览器可以正常显示页面,才说明网页已经跑起来。

修改网页

回到 Codex,发送:

请修改当前项目的 index.html:

1. 把标题改成“我的 AI Coding 首页”;
2. 把按钮文字改成“我已经成功跑通”;
3. 在页面底部增加一句“这个网页由我和 AI 一起完成”;
4. 其他内容保持不变。

Codex 修改完成后,回到浏览器,点击刷新。

完整过程是:

告诉 Codex 修改要求
→ Codex 修改 index.html
→ 回到浏览器
→ 刷新页面
→ 看到新的结果

如果刷新后没有变化,检查:

  1. 浏览器是否真的刷新;
  2. Codex 修改的是否是 index.html;
  3. 浏览器打开的是否是当前项目中的 index.html。

可以继续问 Codex:

请告诉我:

1. 当前 index.html 的页面标题是什么;
2. 按钮文字是什么;
3. 刚才的修改是否已经写入文件。

当页面成功发生变化,就跑通了 L1 最重要的闭环:

说话
→ 文件变化
→ 网页变化

关闭并恢复项目

接下来验证项目能不能在关闭软件后恢复。

先记住三项信息:

项目名称:my-first-page

项目位置:
文档或文稿 / AI-Coding / L1 / my-first-page

网页文件:index.html

然后完成下面的操作:

  1. 关闭浏览器中的网页;
  2. 关闭 Codex;
  3. 重新打开 Codex;
  4. 再次打开 my-first-page;
  5. 让 Codex 读取原来的 index.html。

发送:

请读取当前项目的 index.html,并告诉我:

1. 页面标题是什么;
2. 按钮文字是什么;
3. 页面底部最后一句话是什么。

暂时不要修改文件。

如果 Codex 能正确说出之前的内容,说明项目已经成功恢复。

继续发送:

请在页面底部增加一句:

“我已经成功恢复了这个项目。”

完成后,重新打开或者刷新网页。

如果能够看到新增加的文字,说明关闭和恢复测试通过。

新项目独立复现

最后创建一个新的空文件夹:

AI-Coding
└── L1
    └── l1-final-test

接下来不再照着前面的步骤逐项操作,尝试独立完成:

创建文件夹
→ 使用 Codex 打开
→ 创建 index.html
→ 在浏览器中打开
→ 修改网页
→ 刷新看到变化
→ 关闭 Codex
→ 重新打开项目
→ 继续修改

网页内容可以自己决定,但至少包含:

  • 一个标题;
  • 自己的名字;
  • 一句个人介绍;
  • 一个按钮;
  • 一个不同于白色的背景。

L1 通关检查

所有必须项全部完成,才算通过 L1。

A. 工具能用

  • Codex 安装完成;
  • Codex 可以正常打开;
  • ChatGPT 账号可以正常登录;
  • Codex 可以正常回复。

B. 项目能打开

  • 创建了统一的项目目录;
  • 知道项目保存在哪里;
  • Codex 可以打开指定文件夹;
  • 能确认当前打开的项目名称。

C. 文件能读写

  • Codex 可以读取项目文件;
  • Codex 可以创建 index.html;
  • Codex 可以修改 index.html;
  • 能在电脑文件夹中找到 index.html。

D. 结果能运行

  • index.html 可以在浏览器中打开;
  • 浏览器能够正常显示网页;
  • 修改后刷新可以看到新结果。

E. 项目能恢复

  • 关闭 Codex 后能重新找到项目;
  • 可以重新使用 Codex 打开项目;
  • 可以继续修改原来的项目。

F. 新项目能复现

  • 更换新文件夹后还能重新完成;
  • 遇到问题时能说清楚卡在哪一步。

至此,Codex 的安装、使用和最小验证才算完整结束。

但就这么简简单单的一段,可能会卡很多人一天的时间!

结语

这篇文章现在已经很长了,他大概已经对让一个完全不懂代码的人把 AI 编程工具跑起来这件事的琐碎程度,有了足够直观的感受。

L1 的目标其实很简单,就是先跑起来,建立对说话 → 文件变 → 网页变这个闭环的体感。任何阻碍这个闭环的步骤,不管听起来多高级/“必须”,在这个阶段都是噪声。

这也是为什么我们宁可选功能弱一些但零摩擦的国产工具,也不愿让学员在环境配置上消耗注意力。

受篇幅所限,这里只能把 L1 讲透,但它只是起点;后面的 L2——L5,每一步都会引入新的挑战:多文件协同、数据状态管理、跨工具迁移、开发到部署的完整链路...

对于做过的同学,这里的每一步貌似不难,但对于小白来说就是噩梦,所以需要被放进一张清晰的能力地图里,让人随时知道自己在哪、下一步该往哪走。

如果你对后面的部分感兴趣,我们可以在后续的篇章里继续展开:Image