返回全部文章
从零学用 Codex 搭网站 · DAY 1 / 10

从零学用 Codex 搭网站 Day 1:先做出一张能打开的页面

从零学用 Codex 搭网站第 1 天:一个本地可访问的单页网站,包含名字、一句定位、一段介绍和一个联系方式。

作者:利他外贸 · 更新于

第一天最容易犯的错,是一上来就聊技术栈、数据库和商业模式。先忍住。今天只做一张能在浏览器里打开、能说清你是谁的页面。

这篇是 从零学用 Codex 搭网站 的第 1 天。今天的最小可用单元只有一个:一个本地可访问的单页网站,包含名字、一句定位、一段介绍和一个联系方式。

先别收藏更多教程。打开 Codex,做完,看到结果,再回来继续。

今天只拿走一个结果

一个本地可访问的单页网站,包含名字、一句定位、一段介绍和一个联系方式。

你需要准备的输入也很少:网站名称、服务对象、一句话价值、联系方式。没有 Logo、配色和文章都没关系。

如果这些输入还没有,先写“不确定”。真实的不确定,比让 Codex替你编一个答案有用。

第一轮对话:先让 Codex理解现场

把下面这段复制给 Codex。方括号里的内容换成你自己的。别删限制条件。

我完全不会写代码。请在当前空文件夹里做一个最小可用的个人网站。

要求:
1. 先检查当前目录和可用工具,再告诉我准备采用什么最小方案;
2. 页面只包含名字、定位、简介、联系方式;
3. 不安装非必要依赖;
4. 完成后启动本地预览,并告诉我打开哪个地址;
5. 不要一次解释太多,先做到能打开。

我的信息:网站名【填写】,服务对象【填写】,一句话价值【填写】,联系方式【填写】。

发出去以后,不要趁它工作时继续塞十条要求。等它完成第一轮,看它检查了什么、改了哪些文件或引用了哪些证据。

第二轮:你亲手验收,不靠“看起来不错”

今天重点检查:浏览器能否打开;四项信息有没有漏;刷新后是否仍正常;手机宽度下有没有横向滚动。

看到问题时,描述现象,不要抢着替它诊断。比如说“390px 宽度下右边被裁掉”,比“CSS 的 grid 写错了”更好。前者是事实,后者只是你的猜测。

接着发这段纠偏对话:

页面已经能打开。现在只做一次检查:
- 找出控制首页文字和样式的文件;
- 不改结构,只把主标题改得更像真人说话;
- 检查手机 390px 宽度;
- 修改后重新预览,并列出你实际改动的文件。

怎么判断它真的理解了

网站任务里,Codex说“完成了”只是一个进度提示,不是验收结论。真正的证据通常只有几种:构建命令退出码为 0、目标 URL 返回正确状态、页面截图符合预期、自动测试覆盖了核心路径、改动清单与任务范围一致。让它把证据摆出来,你再判断。

如果改动突然扩散到很多文件,先停下来问:“为了完成今天这个结果,哪些文件是必要的?哪些只是顺手优化?” 新手最容易被一大串改动吓住,于是直接接受。其实缩小 diff 本身就是在学习系统边界。

还有一个土办法很好用:让 Codex在交付时写出“我没有做什么”。没有接数据库、没有做后台、没有配置真实邮件,都应明确写出来。知道当前版本的边界,明天才能接得上。

一个很容易踩的坑

别说“帮我做一个高级、完整、国际化的网站”。这句话没有验收标准,Codex 只能替你猜。

我现在判断提示词好不好,只看三件事:输入是不是事实,范围是不是够小,完成以后能不能验收。句子漂不漂亮,反而排在后面。

今天先别做这三件事

第一,别在任务做到一半时换技术、换表格或换一套提示词。工具切换会给人一种重新开始的轻松感,但旧问题没有因此消失。

第二,别把 Codex 的解释全部抄进笔记。只记你下次还会用的输入、判断和验收动作。其余说明随时可以再问。

第三,别把“多做一点”当奖励。今天的边界本身就是训练内容。能在最小成果通过后停手,说明你开始掌握任务拆分,而不是被新点子牵着走。

今天的 20 分钟刻意练习

连续改三次主标题。每次只改一句,然后刷新页面。你要建立的第一种能力不是写代码,而是确认“我的一句话,具体改变了哪个文件、哪个位置”。

练习时别开新教程,别换工具。卡住就把现场交回 Codex:你做了什么、预期什么、实际发生什么、原始错误是什么。

如果还是没做成,不要用“重新帮我做一次”清空现场。把最后一个成功状态、第一处失败、原始输出和你已经试过的动作写成四行。下一轮只解决第一处失败。这个习惯会让你少掉很多无效重来。

下班前的验收单

  • [ ] 本地地址返回正常页面
  • [ ] 文字是你自己的,不是占位符
  • [ ] 桌面和手机都能读
  • [ ] 你知道首页文件在哪里

四项都过,今天就停。没过也别扩功能,只修最前面那一项。

留一条“明天还能接上”的记录

在项目里写下四行:

  1. 今天做成了什么;
  2. 哪个输入最影响结果;
  3. Codex 哪次判断错了,你用什么证据纠正;
  4. 明天开始前必须保持不变的东西。

这四行比再收藏十个提示词值钱。它们会逐渐变成你的工作说明、测试清单,最后才是可复用的 Skill。

少量资源不是少学,而是让资源短到足以马上行动。今天的教程到这里,剩下的时间交给你的手。

常见问题

第 1 天需要会写代码吗?

不需要。你需要做的是提供真实输入、限制任务范围、检查结果,并把错误原样交回 Codex。

可以一天完成多篇吗?

可以先读,但建议每天至少亲手完成一个最小成果。看懂提示词不等于形成技能。

Codex 给出的结果和教程不同怎么办?

先保留现场,提供目录、错误、截图或测试结果,让 Codex解释差异并做最小修正,不要立刻要求推倒重来。

参考资料

A LETTER FROM THE FIELD喜欢这种实战复盘?在首页订阅利他外贸的新文章与开源成果。免费订阅