B站-小白也能学会的 Codex：从零开始，用 AI 帮你写代码

不会编程，也能让 AI 帮你把想法变成能运行的程序。这篇文章，就是你在 B 站学 Codex 的第一课。

一、先搞清楚：Codex 到底是什么？

很多人第一次听到 Codex，会以为它是一个”写代码的软件”。其实更准确的说法是：Codex 是一个能听懂人话、并帮你生成和修改代码的 AI 编程助手。

你可以把它理解成一个”随叫随到的程序员朋友”。你说”帮我做一个计算器网页”，它说”好的，这是代码”。你说”按钮太丑了，改好看点”，它说”已调整样式，这是新版本”。

它不要求你会写代码，只要求你能把需求说清楚。这就是 B 站上很多小白能快速上手的核心原因：门槛不在编程，而在表达。

二、小白用 Codex 的正确心态

在开始实战之前，先记住三句话。

第一，你不需要懂语法，但需要懂逻辑。比如”先输入数字，再点加号，最后显示结果”，这就是逻辑。

第二，AI 会犯错，你要学会追问。代码跑不起来很正常，把报错信息复制给它，让它改。

第三，从小项目开始，别一上来就做微信。先做计算器、待办清单、倒计时，这些最容易建立信心。

这三句话，几乎决定了你学 Codex 的成败。B 站上那些”三天学会”的视频，本质都是在帮你建立这三条心法。

三、实战准备：你只需要这三样东西

第一样是浏览器，推荐 Chrome 或 Edge，用来运行网页代码。

第二样是文本编辑器，推荐 VS Code，免费且好用，用来写和保存代码。

第三样是 Codex 入口，可以是 ChatGPT 里的 Codex 功能，也可以是 Codex 界面或 API。

如果你用的是 ChatGPT 里的 Codex 功能，直接打开对话框就能用。如果用的是 API，也不用怕，后面我会告诉你最简单的用法。

准备齐这三样，你就可以开始第一课了。

四、第一个实战：做一个”倒计时网页”

第一步，把需求说清楚。不要只说”帮我做个倒计时”，要说得具体。

比如这样：帮我做一个网页倒计时器。要求是，有一个输入框可以输入分钟数；有一个”开始”按钮；点击后显示剩余时间，格式是 00:00；时间到了显示”时间到！”；界面简洁，适合手机。

第二步，让 Codex 生成代码。把上面这段话发给 Codex，它通常会给你一个完整的 HTML 文件，里面包含 CSS 和 JavaScript。

第三步，保存并运行。打开 VS Code，新建文件，命名为 countdown.html，把 Codex 生成的代码全部粘贴进去，保存，然后双击这个文件，用浏览器打开。你会看到一个能用的倒计时器。

第四步，让 Codex 帮你改。如果发现按钮太小、颜色不好看、输入 0 也能开始，就直接告诉 Codex：按钮太小了，改大一点，颜色改成蓝色；输入 0 或负数时，提示”请输入大于 0 的分钟数”。

它会给你修改后的代码。你替换掉原来的文件，刷新浏览器，就更新了。

这就是 Codex 最核心的工作流：提需求、生成、保存、运行、修改。掌握这个循环，你就掌握了 Codex 的八成用法。

五、第二个实战：做一个”待办清单”

这个项目比倒计时稍微复杂一点，但非常适合练手。

你可以这样对 Codex 说：帮我做一个待办清单网页。要求是，有一个输入框可以输入任务；按回车或点”添加”按钮，任务出现在下方列表；每个任务前面有一个复选框，勾选表示完成；完成的任务文字变灰并加删除线；每个任务后面有一个”删除”按钮；刷新页面后，任务还在，用 localStorage 保存。

Codex 会给你一整套代码。你保存为 todo.html，用浏览器打开，就能用。

这里的关键学习点有三个。第一是 localStorage，让数据保存在浏览器里，刷新不丢。第二是事件监听，点击、回车、勾选，都是事件。第三是 DOM 操作，用 JavaScript 动态添加和删除页面元素。

你不需要背这些名词，但你可以让 Codex 给你解释。比如你可以问：请用小白能听懂的话，解释这段代码里的 localStorage 是怎么工作的。这就是 Codex 作为”随身家教”的价值。

六、第三个实战：让 Codex 帮你改别人的代码

这是 Codex 最实用的场景之一。

比如你在网上找到一段代码，但看不懂，或者想改功能。你可以这样做。

先把代码复制给 Codex，说：请解释这段代码在做什么，用小白能听懂的话。

然后再说：我想把按钮颜色改成绿色，并且点击后弹出提示框，请帮我改。

Codex 会给你修改后的版本，并告诉你改了哪里。这就像请了一个免费的家教，随时帮你读代码。

对小白来说，这个能力比”从零写代码”更重要。因为真实世界里，你大多数时候是在改别人的代码，而不是从空白开始。

七、小白最容易踩的五个坑

第一个坑是需求太模糊。”帮我做个网站”，Codex 不知道做什么。”帮我做个个人主页，有头像、简介、三个链接”，这就清晰了。

第二个坑是不给报错信息。代码跑不起来，直接把浏览器控制台的红色报错复制给 Codex，比你说一百句”它不工作”都管用。

第三个坑是一次改太多。一次只改一个功能，改完测试，再改下一个。

第四个坑是完全复制不测试。AI 代码可能有小错误，一定要自己运行一遍。

第五个坑是不敢追问。”为什么这样写””还有更简单的方法吗”，追问越多，学得越快。

避开这五个坑，你的学习效率至少翻一倍。

八、一个万能提问模板

如果你不知道怎么说，可以用这个模板。

我想做一个【什么东西】。它的功能是：【功能1】【功能2】【功能3】。我希望界面是：【风格描述】。请用 HTML、CSS 和 JavaScript 实现，代码放在一个文件里。请加上注释，方便我这种小白看懂。

这个模板几乎适用于所有小项目。B 站上很多教程的核心，其实就是在教你如何把需求说清楚。

九、进阶：什么时候该用 Codex API？

如果你已经会一点编程，或者想批量处理代码，可以用 Codex API。

最简单的理解是：网页版 Codex 适合对话、改代码、学习；API 适合把 Codex 集成到自己的程序里，自动处理任务。

小白阶段，先用网页版就够了。等你能独立做出三五个小项目，再考虑 API。

十、总结：小白学 Codex 的最短路径

第一步，先做一个倒计时，熟悉”提需求、生成、保存、运行、修改”的流程。

第二步，再做待办清单，学会数据保存和动态页面。

第三步，然后改别人的代码，学会阅读和修改。

第四步，最后做自己的小项目，比如记账本、番茄钟、单词卡。

记住这句话：Codex 不是让你不学编程，而是让你在做的过程中学编程。

你不需要先看完一本 500 页的书，再开始写代码。你可以直接做一个能跑起来的小东西，然后在这个过程里，慢慢理解代码。

这才是小白最快的路，也是 B 站上那些”小白也能学会”的视频真正想告诉你的东西。

本作品采用《CC 协议》，转载必须注明作者和本文链接