给非程序员的 vibe coding 第一课：从 0 到上线第一个网页

先说结论：门槛不在代码，在「描述清楚」

很多非程序员对 vibe coding 的想象是「说句话就有 App」，第一次试完发现 AI 给的东西和自己想的差十万八千里，于是得出结论：这东西不适合我。我的判断恰恰相反：vibe coding 对新手真正的门槛不是写代码，而是把「我想要什么」说清楚。而这项能力，恰好是可以通过练习快速提高的，不需要任何编程基础。

这篇就是那堂第一课。读完动手，这个周末你就能上线第一个能发给朋友看的网页。

第一步：选工具，只看一句话

别纠结。新手从这三个里闭眼选一个就行：想要最快看到东西，选 Bolt.new（说句话就有预览链接）；想要做出来像个正经产品（带账号、数据库），选 Lovable；想要以后慢慢学着改代码，选 Replit（自带编辑器和运行环境）。三个都有免费额度，第一个项目花不了一分钱。记住：工具不重要，先完成一次「从想法到链接」的完整循环才重要。

第二步：第一个项目，做「个人主页」

新手最常见的错误是第一个项目就想做「下一个微信」。听我一句：第一个项目只做个人主页/作品集页面。理由有三：需求你闭着眼睛都能说清楚（放照片、写介绍、列作品）；没有登录、支付、数据库这些坑；做完立刻能发朋友圈，获得正反馈——正反馈是新手坚持下去唯一的燃料。

描述需求有个「三句话公式」：第一句说它是什么（「一个设计师的个人作品集网站」）；第二句说长什么样（「深色背景、大标题、作品以卡片网格展示，参考 Apple 官网的简洁风」）；第三句说点开之后发生什么（「点击作品卡片弹出详情，有大图和文字介绍」）。三句话，比写 500 字小作文管用十倍。

第三步：看到报错别慌，这是必经之路

新手和 AI 协作，报错不是失败，是工作流的一部分。记住「报错三件套」：第一，把报错原文完整复制给 AI，不要自己翻译、不要截图只截一半；第二，加一句「请先解释一下这个报错是什么意思，再修复」——解释比修复更重要，这是你免费学编程的时刻；第三，如果同一个报错修了三次还没好，换个问法（「有没有更简单的方法实现这个功能」），而不是在同一条死路上继续撞墙。

第四步：什么时候该停下来学点基础

这是新手最容易走极端的另一个方向：要么完全不想学，要么觉得「必须先学完 HTML 再动手」。我的建议是 「按需学习，项目驱动」：当你第三次被同一个概念卡住（比如「什么是 API」「域名和部署是什么关系」），就花 30 分钟专门搞懂它。不需要系统学，只需要把卡住你的那块砖补上。vibe coding 时代的学习顺序是反过来的：先做出东西，再补理论——因为这时候每一个概念都有了具体的落点，学得飞快。

从「能用」到「敢发给人看」：四个检查

第一个网页做完、发朋友圈之前，过一遍这个清单：手机上打开看一眼（一半的人用手机看，排版崩了等于白做）；把链接发给一个朋友，让他什么都不问直接用（他卡住的地方就是你要改的地方）；检查有没有 AI 生成的占位文字（"Lorem ipsum" 和编造的联系方式是新手项目最常见的穿帮）；确认分享出去的东西不含隐私（测试账号、API key、个人真实信息）。

过完这四关，恭喜你：你已经是一个「做出过上线产品」的人了。这个身份转变，比学会任何一门语言都重要——因为从此以后，你缺的任何功能，第一反应都会是「我能不能让 AI 帮我做出来」，而不是「我不会」。这就是 vibe coding 给非程序员真正的礼物。