← 所有文章

从零开始的 vibe coding:一个晚上做出第一个项目

傍晚的书桌,发光的笔记本电脑,屏幕上升起未来网站的发光方块

从零开始做 vibe coding,意思是不从编程教材入手,而是从一个清楚的小任务入手,用一个晚上把它做成能打开的网站。什么都不用安装:一个浏览器、一个账号、一个想法就够了。你用普通的话描述想要什么,AI 智能体负责写代码、启动服务器并给你一个链接,你再用简短的对话把结果改好。下面是第一个晚上的分步方案:选什么项目、描述框里到底写什么、用哪个模型,以及出问题时怎么办。新用户会获得初始 token,之后按 token 计费,没有订阅。

从零开始真正需要准备什么

新手的清单很短。一个浏览器——手机也行。一个 NeuralSpace 账号——注册只要一分钟。一个能用两三句话讲清楚的具体想法。再加上一两个小时的空闲时间,把整条路走完。不需要的:安装代码编辑器、学命令行、背语法、租服务器、配置托管。这些平台都替你做了,你面对的是任务本身,而不是基础设施。

选第一个项目:只做一件事

新手最典型的错误,是一上来就做「颠覆某大平台」的产品。第一个项目要小到能整个装进脑子里:这样你一个晚上就能拿到结果,也真正理解这套方法。适合第一次做的:带留言表单的单页落地页;收集答案的问卷页;展示作品的个人主页;活动邀请页;贪吃蛇或点击器这类浏览器小游戏;定时提醒的 Telegram 机器人。不适合起步的:社交网络、大型电商、带支付和用户账户的应用——相互关联的部分太多,一个晚上会耗在排错上,而不是拿到结果。

一个晚上的流程:从注册到能打开的链接

下面是一条具体的路线,分成几个清楚的步骤。

19:00 — 进入。打开 vibe coding 页面并注册。注册后余额里会到账初始 token,足够做出第一个项目、判断这套方法是否适合你。

19:10 — 新建项目。「Code」板块的工作区里点「新建项目」。你会看到「描述你的项目」输入框和一键模板:落地页、作品集、商品橱窗、面向搜索的多页网站、Telegram 机器人、问卷表单和浏览器小游戏。第一次做,用模板很省事:它会把提示词写好,你只要把方括号里的内容换成自己的主题。

19:20 — 选模型并启动。模型列表默认是 DeepSeek V4.1 Flash——最便宜、启动项目所需余额门槛最低。第一次做完全够用。点「创建项目」:智能体会生成文件、写代码并启动服务器。

19:30 — 第一版。项目就绪后,用「打开网站」按钮查看。如果页面暂时打不开,这在最初几分钟很正常:点「重新检查」,或者在项目对话里输入「启动网站」,智能体就会把服务器拉起来。

20:00–21:30 — 迭代。接下来不要重写项目,而是用简短的请求改进它:「把标题放大」「加一个客户评价区块」「把按钮颜色改成绿色」。一次改动——一条消息——检查结果。

21:30 — 收尾。「分享网站」按钮给你一个链接,可以发给朋友或客户;「下载项目」打包下载代码;「绑定域名」接入你自己的地址;在「项目版本」里可以回滚到任何一个之前的版本。

NeuralSpace 的 vibe coding 页面:服务标题和开始按钮

第一条提示词的公式

第一版的质量几乎完全取决于描述。可用的公式有五个部分:这是什么项目、给谁用、页面要有哪些区块、什么风格、手机上要注意什么。下面这条提示词可以直接复制修改:「为[自行车维修店]做一个单页网站。需要首屏显示店名和『立即预约』按钮,一个带价格的服务区块,作品图库,三条客户评价,以及包含姓名和电话的预约表单。风格:明亮安静,标题大,适配手机。」区块列得越具体,后面要改的地方就越少。

三个常见卡点及应对办法

网站没有立刻打开。创建后的头几分钟服务器还在启动。等一分钟,点「重新检查」;如果超过五分钟,就在对话里输入「启动网站」。

AI 做错了。不要说「全部重做」——智能体可能把原本能用的部分弄坏。要说清是哪个页面、哪个元素、想要什么效果:「首屏的按钮太淡了,做得更醒目一些」。

改完之后坏了。打开「项目版本」,回滚到上一个能用的版本,比解释哪里出错更快。如果想离开电脑,就打开「允许一切」的自主模式:智能体不再为每个操作请求确认。

第一个晚上要花多少钱

没有订阅:只为生成消耗的 token 付费。新用户会获得初始 token,所以第一个项目不用充值也能做出来。经济型模型消耗余额的速度比旗舰模型慢得多,做学习项目完全够用。另外要记住一点:正在运行的项目网站每天大约消耗两个 token 的托管费用;如果不再需要这个项目,可以归档,扣费就会停止。

常见问题

从零开始需要会编程吗?

不需要。做第一个项目,只要用文字说清页面上应该有什么就够了。了解 Web 应用的结构有助于把提示词写得更准,但这是边做边学的。

第一个项目要花多长时间?

简单的落地页、问卷或小游戏通常一个晚上就能完成:启动后几分钟就出现第一版,剩下的时间用在微调和在手机上检查。

如果 AI 没理解任务怎么办?

把任务拆开,一次只补充一部分:先页面结构,再区块,最后风格。附上一个你喜欢的例子或截图也很有帮助,智能体更容易做到位。

能把项目拿走自己继续改吗?

可以。用「下载项目」把代码打包下载,也可以绑定自己的域名。项目始终属于你,既能在浏览器里改,也能放进自己的编辑器。