🎯 需求一次说清楚,比说得多更重要。
给谁用 · 用户做什么 · 生成什么 · 有什么不能改。
Vibe Coding 教程 · 第一期 厦大美食协会 Vibe Coding 教程 · 第一期 厦大美食协会这一篇你全程只打字、不写代码。今天的目标很小:做出一个能在自己电脑上打开的小网页。
「Vibe Coding」说人话就是:你说想要什么,AI 帮你写代码。像点外卖——你说菜,厨师做。
这三个网站,我用三天做出来的。
第一个,我来回改了很多次才满意;到第三个,只说了 4 句话就做完了。
这篇教程只教一件事:
怎么从「改很多次」变成「说几句话」。
约 30 分钟。要用电脑——Windows 或苹果 Mac 都行,手机、iPad 不行。
做菜先买锅。这一关只做一件事:把工具装好。一共 4 步,做完一步点一下打勾,4 个打完就能进下一关。
Codex 是一个 App。你在它的输入框里用中文说想要什么,它就帮你把代码写好、把文件存进电脑。你不用看懂代码,就像不用懂发动机也能开车。这一期我们用有窗口、能用鼠标点的桌面版,别担心。
sk- 开头的字符。整串复制下来,先粘到电脑的记事本(Windows)或备忘录(Mac)存着。
📷 配图:领取页面 + 那串 sk- 字符
my-first-app。
回到 Codex,点「打开文件夹 / Open Folder」,选中刚建的这个。以后 AI 写的东西都会放进它。
📷 配图:右键新建文件夹 + Codex 打开文件夹
⚠️ 关于那串钥匙,记住一句话:
它像你的钱包密码,谁拿到就能花你的额度。可以发给你正在用的 Codex;千万别发到微信群、发朋友圈、贴到网页上给别人看。我做的时候反复提醒自己:「钥匙别写进网页,不然所有人都看得到。」
这一关做拍照卡网页:用户传一张美食照,网页生成一张好看的拍照卡。三个项目里最简单。
它的秘诀只有一个:把想做的事,一次说清楚。
下面是当时真实发给 AI 的需求。彩色的部分能点,点一下看它为什么重要。
「帮我做个图片网站。」
AI 不知道做给谁、用户传什么、要生成什么、长什么样,只能自己猜。猜错了,你就得一遍遍改。
my-first-app 文件夹。sk-xxx,请不要把它写进网页文件里。」my-first-app 文件夹,找到名字是 index.html 的文件,双击它——浏览器会打开,你的第一个网页就出现了。😵 没出来 / 卡住了?点这里
· 文件夹里找不到 index.html —— 回 Codex 说:「我在文件夹里没看到 index.html,帮我建一个。」
· 网页打开是空白的 —— 把「打开是空白」这句话告诉 Codex,让它检查。
· Codex 一直没反应 —— 等一两分钟;还是不动,刷新一下重新发。
第二个项目把菜拆开看更复杂。这一关不用你从零做,记三个让 AI 更懂你的小习惯,点开每条看看。
新手最容易犯的错:上来就说「帮我做个网站」,AI 闷头做半天,方向却错了。
先聊方向。错了改一句话就行,不用删一堆东西重来。
AI 最擅长照着抄。与其干讲,不如把现成的东西指给它看。
你做过的旧东西、别人公开放出来的项目,都能当样板。
AI 写的东西也会出错。写完,让它自己回头查一遍。
「写」和「查」分开做,质量立刻不一样。
第三个项目点地球看美食最复杂。这一关只教一件最重要的事:东西坏了、屏幕上蹦出一堆看不懂的英文,怎么办。
做这个项目时,地图怎么都加载不出来,屏幕上跳出这么一段(真的)。下面这段不用读懂,看一眼它长这样就行:
看不懂?不用懂。这种时候有一招万能解法:
把那段看不懂的英文,整段交给 Codex:
Ctrl+C,Mac 按 Command+C。就这样。报错信息是给 AI 看的线索——你不用读懂它,负责读懂的是 AI。我当时就是反复这么做,地图最后就好了。
AI 有时会忘事——这次告诉它的,下次打开就忘了。你可以让它建一个叫 说明.md 的文件(就是个项目说明书,.md 是文件格式,不用管),把重要的事记进去,它每次先看一眼。这正是我当时想出来的办法。
这三句话加起来,就是「从改很多次到说几句话」的全部秘密。
🎯 一:需求一次说清楚——给谁用、用户做什么、生成什么、有什么不能改。
🎯 二:你负责拿主意——说清目标、选方案、检查结果。
🎯 三:报错别慌,整段贴给 AI;让 AI 写个记事本,免得它忘事。
那么,你想做的第一个网页是什么?