Codex 使用教程（1）：基础页面操作

上周，开小吃店的老李找到我：”辉哥，我看别人网上都能做那种手机能打开的点单页面，我也想要一个。找软件公司，人家张口就要大几千；自己去学编程，视频一看就是几个小时，看得我脑壳疼。有没有那种……动动手指就能弄出来的法子？”
说实话，老李这话问到了大多数人的心坎里。今天我就用大白话，手把手带你认识一个对小白特别友好的神器——Codex。你只要会打字，就能让它帮你把想法变成能用的网页。

先别被”Codex”这个名字唬住。你把它想象成你花钱请来的一个编程实习生：你坐在电脑前，用大白话告诉它”我要做个啥”，它就在那边噼里啪啦帮你把代码敲出来。你不用背语法、不用记命令，就像给微信好友发语音一样简单。

一、Codex 到底是啥？

以前我们说”用AI写代码”，得先装一堆环境、配一堆工具，对小白来说光是第一步就能劝退。而 Codex（这里指 OpenAI 推出的网页版，网址 codex.ai）最牛的地方就在于：啥都不用装，打开浏览器就能用。它把”写代码的地方”和”看效果的地方”全塞进了一个网页里。

打个比方：它就像一个自带厨房、灶台、盘子的移动餐车。你想做菜（做网页），不用回家搬锅搬碗，把食材（你的想法）丢进去，一会儿就能端出一道菜（能打开看的网页）。下面咱就围着这辆”餐车”转一圈，认认各个功能区。

💡 要点 Codex 不是 magically 变魔术，它背后还是靠”写代码”来实现功能。区别只在于：以前是你亲手写，现在是它帮你写，你负责说清楚”要干啥”。想明白这点，你就成功一半了。

二、手把手：5 步玩转基础页面

别慌，真没你想的那么复杂。跟着下面这几步点，十分钟你就能自己跑通一个循环。

第一步：打开网页，登录进去
用 Chrome 浏览器（别的浏览器也行，Chrome 最稳）打开 codex.ai，用你的 OpenAI 账号登录。第一次用可能需要注册，跟着提示填就行，跟注册邮箱一样简单。
第二步：认识界面，也就是认”餐车”
进去之后你会看到屏幕被分成了几块，别慌，核心就三个区域：
- 左边是”任务对话区”——你在这跟 Codex 下命令，就像聊天。
- 中间是”工作区”——代码文件、文件夹都在这，是它干活的地方。
- 右边（或下方）是”预览区”——写好的网页效果，点一下就能实时看。
第三步：开工，先建个空白项目
页面里通常有个”新建会话/新项目”的按钮，点一下，给个空白工作台。这就相当于把空厨房给你收拾干净了，可以开始折腾了。
第四步：用大白话下指令（最关键的一步）
在左边的输入框里，把你想要的事情，用大白话写清楚。比如你想做个点单页，就写：”帮我做一个小吃店点单网页，要有店名、菜单列表（3道菜）、每道菜的价格，风格简洁一点。”
第五步：看效果，不满意就接着说
点发送，Codex 就开始忙活了。等它弄完，右边预览区基本就能看到你网页的样子了。觉得字太小？直接在左边说：”把标题字体放大。”它立马给你改。这就是反复”说—看—改”的过程，跟改 PPT 一模一样。

💡 要点 记住那个黄金循环：下指令 → 看预览 → 提修改。新手最容易犯的错误就是指望一句话做出完美成品。别急，它是越”唠叨”越懂你的，你提的要求越细，它改得越对。

三、给 Codex 下指令，有啥套路？

我实战下来发现，同样是让它写页面，有人一分钟搞定，有人折腾半天还不对。差别全在”你怎么说”。分享几个我压箱的小技巧。

技巧 1：说人话，别说半截话

错误示范：”做个网页。”——它心想：做啥网页？你都不知道，它能知道？

正确示范：”做一个咖啡店点单网页，顶部是店名’晨光咖啡’，下面列 3 款饮品和价格，点一下能加入购物车。”

差别在哪？你把谁、要啥、长啥样都说全了。它就是个实习生，你不把需求交代明白，它只能瞎猜。

技巧 2：一次只说一件事

别一上来就甩一大段：”我要做首页还要做购物车还要能支付还要能登录……”它一次处理太多容易”串味”。就像点菜，你让服务员一次记十道菜和一次记一道菜，哪个准？先做最核心的，做完了再让它加。

技巧 3：直接贴参考图或反例

心里没底的时候，直接给它看个例子。比如你说：”就照这个截图的样子做，颜色、布局都差不多就行。” 把图片贴进去，它一看就懂，比你憋半天描述强一百倍。

⚠️ 注意 别指望它第一次就 100% 对。它偶尔会”脑补”一些你沒要求的功能，或者把某句话理解歪。看到不对的地方，别慌，直接用大白话纠正它：”不对，我要的是红色，你做成蓝色了。”它马上改。

四、几个新手必踩的坑，我替你趟过了

坑 1：把”网页版”和”命令行版”搞混

网上很多教程教的是装到电脑终端里的那种 Codex，要配环境、敲命令。你是网页版，完全不用碰那些！看到让你装 Node、配密钥的教程，直接划走，那不是给你的。

坑 2：以为它啥都会，结果啥都问

它很能干，但不是神。涉及到”我要注册个域名、买个服务器、把页面上线给人访问”这类事，它只能帮你写代码，真正买账号、绑信用卡、改 DNS 这些还得你亲手来。心里有数，别指望它全包。

坑 3：做完就扔，不会保存

网页版的项目一般是存在你账号云端的，换个电脑登录还在。但如果你想把成果带回自己的电脑，很多版本支持导出或连 GitHub。做完想长期用，记得研究一下怎么导出，别白忙活一场。

⚠️ 注意 免费额度用完就得以后付费了，别一上来就让它吭哧吭哧做个月亮，结果账单吓一跳。先拿小任务练手，摸清免费额度够用多大，再上项目。

五、辉哥的真心话

我做 IT 二十五年，亲眼看着开发从”手写每一行”走到”AI 帮你写”。很多人一听到这个就慌：”完了，程序员要失业了？”我的体会是：时代淘汰的从来不是人，是那个不肯学新工具的自己。

像 Codex 这种东西，最大的意义就是——它把”把想法变成现实”的门槛，从”会编程”拉回到了”会说话”。老李那种开店的、做设计的、写文案的，只要能把需求说清楚，就能自己做点小工具、小网页。这才是真正 democratize（大众化）的力量。

所以你别怕。今天你照着这 5 步，让 Codex 帮你做出一个小小的点单页，明天你就能让它做第二个、第三个。别人还在观望，你已经动手了，这就是差距。

下一篇，我带你搞点更实在的：怎么把 Codex 写的网页，变成你自己手机能点开、能发给朋友看的样子。敬请期待。

💡 要点 学新工具，先模仿、再理解、后创新。别一上来就纠结底层原理，先照着做出来一个能用的，成就感会推着你一直往前走。

关于作者

辉哥 —— 25 年 IT 老兵，写过代码、带过团队、创过业，也踩过无数别人没提醒你的坑。如今专注研究怎么用 AI 工具帮普通人提效、省钱、把想法变现实。

他的教程没有高冷术语，只有大白话和实战经验。信奉一句话：“能动手就别光看，做出来你就赢了 90% 的人。”

点个关注，咱下一篇见。