🎯 需求一次说清楚,比说得多更重要。
给谁用 · 用户做什么 · 生成什么 · 有什么不能改。
Vibe Coding 教程 · 第一期 厦大美食协会 Vibe Coding 教程 · 第一期 厦大美食协会这一篇你全程只打字、不写代码。今天的目标很小:做出一个能在自己电脑上打开的小网页。
「Vibe Coding」说人话就是:你说想要什么,AI 帮你写代码。像点外卖——你说菜,厨师做。
怕学不会?这一课特意做得很小。做错了改一句话就行,进度会自动存着,随时可以停下、明天再接着做——不用一口气学完。
📱 你在用手机看这一页
这一课要在电脑上动手做(手机做不了)。但别急着关——上面那三个成品,你现在用手机就能点开玩玩。玩过想自己做一个,把本页链接发给自己,换到电脑上打开,就从这里接着做。
这三个网站,我用三天做出来的。
第一个,我来回改了很多次才满意;到第三个,只说了 4 句话就做完了。
这篇教程只教一件事:
怎么从「改很多次」变成「说几句话」。
约 30 分钟。要用电脑——Windows 或苹果 Mac 都行,手机、iPad 不行。
做菜先买锅。这一关只做一件事:把工具装好。一共 4 步,做完一步点一下打勾,4 个打完就能进下一关。
AI 编程工具是一个 App。你在它的输入框里用中文说想要什么,它就帮你把代码写好、把文件存进电脑。你不用看懂代码,就像不用懂发动机也能开车。这一期我们用有窗口、能用鼠标点的桌面版,别担心。
装哪个都行,后面所有步骤我都只说「打开 AI 编程工具」「告诉它……」,不区分。装的过程中卡在哪步就直接问右下角的栗栗熊助教。
sk- 开头的钥匙,照着提示填上、把那串字符先收好)。
my-first-app。
回到你的 AI 编程工具,找「打开文件夹 / Open Folder」之类的入口,选中刚建的这个。以后 AI 写的东西都会放进它。
⚠️ 如果配置模型时填了一串钥匙(API Key),记住一句话:
它像你的钱包密码,谁拿到就能花你的额度。可以填进你正在用的 AI 编程工具;千万别发到微信群、发朋友圈、贴到网页上给别人看。我做的时候反复提醒自己:「钥匙别写进网页,不然所有人都看得到。」
这一关做拍照卡网页:用户传一张美食照,网页生成一张好看的拍照卡。三个项目里最简单。
它的秘诀只有一个:把想做的事,一次说清楚。
下面是当时真实发给 AI 的需求。彩色的部分能点,点一下看它为什么重要。
「帮我做个图片网站。」
AI 不知道做给谁、用户传什么、要生成什么、长什么样,只能自己猜。猜错了,你就得一遍遍改。
my-first-app 文件夹。sk- 开头),再加一句:「这是我的钥匙,请不要把它写进网页文件里。」没有就跳过这步。my-first-app 文件夹,找到名字是 index.html 的文件,双击它——浏览器会打开,你的第一个网页就出现了。
😵 没出来 / 卡住了?点这里
· 文件夹里找不到 index.html —— 回 AI 说:「我在文件夹里没看到 index.html,帮我建一个。」
· 网页打开是空白的 —— 把「打开是空白」这句话告诉它,让它检查。
· 工具一直没反应 —— 等一两分钟;还是不动,刷新一下重新发。
🐻 想马上把它发给朋友看?先等一下——
你现在打开的这个网页,地址栏大概是 file://…,或者 localhost / 127.0.0.1 开头。这几种地址意思都一样:「只有你自己这台电脑能打开」。把它复制、发到群里或发给朋友,对方点开是打不开的——这几乎是每个新手都会踩的坑,不怪你。想让别人也能点开,得先把网页「上线」变成一个真链接,那是第 4 课专门教的。现在先自己玩个够,别急着发 🙂
第二个项目把菜拆开看更复杂。这一关不用你从零做,记三个让 AI 更懂你的小习惯,点开每条看看。
新手最容易犯的错:上来就说「帮我做个网站」,AI 闷头做半天,方向却错了。
先聊方向。错了改一句话就行,不用删一堆东西重来。
AI 最擅长照着抄。与其干讲,不如把现成的东西指给它看。
你做过的旧东西、别人公开放出来的项目,都能当样板。
AI 写的东西也会出错。写完,让它自己回头查一遍。
「写」和「查」分开做,质量立刻不一样。
AI 第一次做出来的,常常「有股 AI 味」:话说得空、样子不对、不是你想要的。这很正常——好东西都是改几轮出来的,别推倒重来,像挑毛病一样一次改一处。
三个诀窍:① 一次只改一处,别一口气提十个;② 把「想要的样子」说具体——不是「更好看」,是「字小一号、换暖色」;③ 有参照就指给它看「照那个来」。改到满意为止,改错了再改回来就行,不花钱。
第三个项目点地球看美食最复杂。这一关只教一件最重要的事:东西坏了、屏幕上蹦出一堆看不懂的英文,怎么办。
做这个项目时,地图怎么都加载不出来,屏幕上跳出这么一段(真的)。下面这段不用读懂,看一眼它长这样就行:
看不懂?不用懂。这种时候有一招万能解法:
把那段看不懂的英文,整段交给你的 AI 编程工具:
Ctrl+C,Mac 按 Command+C。就这样。报错信息是给 AI 看的线索——你不用读懂它,负责读懂的是 AI。我当时就是反复这么做,地图最后就好了。
AI 有时会忘事——这次告诉它的,下次打开就忘了。你可以让它建一个叫 说明.md 的文件(就是个项目说明书,.md 是文件格式,不用管),把重要的事记进去,它每次先看一眼。这正是我当时想出来的办法。
这三句话加起来,就是「从改很多次到说几句话」的全部秘密。
🎯 一:需求一次说清楚——给谁用、用户做什么、生成什么、有什么不能改。
🎯 二:你负责拿主意——说清目标、选方案、检查结果。
🎯 三:报错别慌,整段贴给 AI;让 AI 写个记事本,免得它忘事。
那么,你想做的第一个网页是什么?
🧭 做出网页只是找手感——接下来才是重点
有同学说「网页是会做了,可它好像没什么用」。说得对:做网页是练手,不是目的。想让今天学的真正帮到你,往下走一步——
· 想找到一个真正值得做的东西:接着上 第 2 课·找到一个真问题。
· 想让 AI 替你干真活(做 PPT、整理文献、搜资料):去看第二期·雇上你的 AI 实习生。
· 一个人学容易半途而废?群里有「每周共学局」,大家各带各的活,约个时间一起做。