跳到正文
AI 夜校 · 第六课

不会写代码,也能从一句话做出一个能用的产品

更新于 · 直播回放约 89 分钟

这节课讲的是 Vibe Coding——一种让 AI 帮你写代码、做产品的全新工作方式。讲师用自己从 0 到 1 做出的真实产品为例,讲清楚了从想法、规划、开发到部署上线的完整流程,还给出了可直接套用的提示词文件、风格模板和工具清单。听完这节课,你不需要任何编程基础,也能动手做出自己的第一个网页产品。

先摆正心态:Vibe Coding 不是让你成为程序员

很多人一听到“编程”两个字就想跑,但讲师反复强调:Vibe Coding 不需要你懂任何编程语言或编程基础。你在互联网上看到的一切——网页、小程序、APP、游戏、三维建模,底层都是代码,而 Vibe Coding 就是打开这个世界的钥匙。

讲师本人也不是学编程出身,但他用 Vibe Coding 做出了自己的创业项目,一个 AI 生成视频的产品,包括前端、后端、Agent、API 对接,全部由 AI 完成。他还现场展示了一个叫 forone.ai 的个人网站,从零到上线只花了大约两个小时。

不过,讲师也严肃地给出了两条忠告。

第一,不要膨胀。Vibe Coding 功能很强,你会产生一种“言出法随”的感觉,容易觉得自己什么都能做,甚至想裸辞创业。讲师警告说:“大家不会因为 AI 瞬间成为天才。”在没有跑通商业化之前,不要冲动。

第二,不要沉迷于创造的快感。因为 AI 反馈极快,你会忍不住一直加功能,想把产品做成一个“大而全”的完美作品。但讲师说,这样只会“外部出一堆垃圾”,除了你自己爽,没人用。他给出了唯一一条验收标准:“有人为你的产品付钱,且持续地付费。”所以,先把最核心的功能做出来,放到市场上验证,再考虑加功能。

核心工作流:用最好的模型做规划,用次好的模型做执行

Vibe Coding 的第一步,不是直接让 AI 写代码,而是先让它生成一份计划。

讲师推荐的工具组合是:用顶尖模型做规划,用稍次一点的模型做执行。他常用的编程工具包括 Kimi Code、Codex、Claude Code,国内用户也可以选千问、豆包等。其中 Codex 是他比较推荐的,但需要海外会员;Kimi Code 他也验证过,每月花 699 元买最高会员,前端能力很强。

具体操作是:在 Codex 里开启“计划模式”(Plan Mode),把你的需求告诉它,比如“我要做一个 AI 生成视频的 Agent,无限画布形式”,它会生成一份详细的规划文档。做规划时,尽量用最好的模型,比如 ChatGPT 的 Pro 模式(需要 100 美元或 200 美元的会员),或者 Kimi K3、千问 3.8 等。

规划文档生成后,直接把它丢给 Codex 去执行。讲师现场演示了他是怎么用的:把一份从 1 到 18 的规划文档直接发给 Codex,它就开始自己干活,干完还会汇报。整个过程,他只需要验收结果。

这里有两个关键文件,讲师说是“独家的秘籍”,会随课发给学员。

第一个是 agent.md(也叫 claude.md),它决定了 Agent 怎么干活、怎么执行,哪些事能干、哪些事不能干,相当于 Agent 的最高行为标准。讲师说这是他综合了 Anthropic 执行总监、OpenAI 官方写法、互联网博主等多方内容后杂糅出来的版本,可以直接拿去用。

第二个是 design.md,它决定了产品的视觉风格——字体怎么设计、字间距怎么排、鼠标悬停时有什么效果。讲师给了两个网站,里面有大量现成的 design.md 文件,涵盖 Apple、宝马等几十个品牌的风格。你只需要下载喜欢的风格文件,丢给 Codex,说“依据这个 design.md 给我生成一个网页”,它就会做出风格如出一辙的页面。

提效技巧:Sub Agent 并发干活,Computer Use 帮你操作电脑

如果你赶时间,可以用 Sub Agent 功能。讲师打了个比方:你本来只招了一个员工,他干久了觉得太累,就自己招了几个实习生,把任务拆解分配下去,最后汇总结果给你。这个“员工招实习生”的机制就是 Sub Agent。

用法很简单,你只需要对 Codex 说一句:“按照我们的需求,并发 16 个 Sub Agent 同时去干。”它会告诉你当前并发槽位上限(Codex 一般是 4 个),然后自动拆分任务并行执行。Claude Code 的并发能力更强,可以到 80 到 100 个。注意,并发会加速消耗 token。

另一个强大的功能是 Computer Use,也就是浏览器操控。讲师现场演示了:他双手离开键盘,让 Codex 自己操作他的电脑去完成一个任务——搜索、点击、填写,全部自动完成。他说:“我这台电脑就是给我的 Codex 配的,它有我这电脑上的所有权限。”这个功能目前在很多工具里都有,比如 Trae、千问、豆包等。

讲师还提到,如果你不想用 Codex 自带的模型,可以用一个叫 CC Switch 的工具,把 DeepSeek、Claude 等任何 API 接入 Codex。操作很简单:在 CC Switch 里点加号,填入你的 API Key,改一下模型名称,添加后启用,重启 Codex 就能用新模型了。

前端、后端、部署:互联网三大善人帮你搞定一切

讲师用最通俗的方式解释了前端和后端。

前端,就是用户看得见、点得到、能感知的部分——所有网页、APP 的可视化内容。如果你不会做 UI 设计,讲师也准备了现成的资源:一些网站上有大量现成的登录表单、动画效果、组件卡片、字体效果,复制就能用。他还提醒,图标和字体要注意版权,用之前让 AI 去查是不是免费商用,推荐使用思源宋体、思源黑体、阿里妈妈体等免费商用字体。

后端,就是用户的注册信息、数据、核心提示词等所有储存在服务器上的东西。如果你听完还不明白,讲师给了一个万能方法:打开你的 AI 工具,问它“把我当成一个小学生,给我讲讲后端是什么”。要学会这种自学能力。

代码写完之后,需要部署上线。这里讲师介绍了“互联网三大善人”:

第一个是 GitHub,一个代码仓库平台。你只需要对 Agent 说“帮我把这个东西提交到我的 GitHub 上”,它会引导你完成。但要注意:GitHub 仓库分为公开和私有,如果你不想让别人看到你的代码,一定要设置成私有仓库。

第二个是 Vercel,一个网站托管平台。你在本地开发的网站,别人是打不开的,需要一个域名。买域名要花钱,但 Vercel 可以免费帮你托管,它会给你一个域名,分享给朋友就能访问。如果国内访问慢,可以花几块钱在阿里云买个域名,让 Codex 帮你换过来。

第三个是 Supabase,一个数据库服务。它管两件事:用户的登录信息和权限。比如你想给网站加一个“谷歌登录”功能,只需要对 Agent 说“使用 Supabase 给我实现谷歌登录,使用 Computer Use 功能”,剩下的它自己搞定。

接入 AI 模型:用 API Key 让产品拥有智能

做网站只是第一步,你要做的是智能体(Agent),所以还需要让产品接入 AI 模型。

方法是通过 API。以 DeepSeek 为例:打开 DeepSeek 开放平台,创建一个 API Key,然后把这个 Key 和接口文档一起发给你的 Codex,说“帮我的 Agent 配置一下这个模型”。它会自己完成配置。

调用 API 一般要花钱,但 DeepSeek 非常便宜。讲师展示了他的账户:5 月份充了 1000 元,用了几个月才花了 250 元。

关于模型选择,讲师给出了非常具体的建议:

  • 做规划(Plan):用 GPT Pro,或者 GPT 5.6、千问 3.8、GLM 5.2、Kimi K3。
  • 做前端(UI 动效):只用 Kimi K3。“除了 Kimi K3,什么都不要用,这是我踩过的坑。”用 GPT 5.6 做前端会特别想死,Grok 做前端则“老是有一股老登味”。
  • 做后端:GPT 5.6、千问 3.8 Max、GLM 5.2 都可以。

产品做完后要验收,主要看五个维度:功能正不正常、用户体验丝不丝滑、代码质量好不好(可以用 Claude 或千问交叉审核)、安不安全(API Key 有没有泄露到前端)、部署能不能访问。

要点回顾

  • Vibe Coding 不需要编程基础,你只需要描述需求、验收结果,AI 负责写代码。
  • 不要膨胀,不要沉迷创造快感;唯一验收标准是有人为你的产品持续付费。
  • 核心工作流:用顶尖模型(如 GPT Pro)生成规划文档,再把文档丢给 Codex 执行。
  • 两个关键文件:agent.md 管 Agent 行为规范,design.md 管产品视觉风格,讲师都会随课提供。
  • 赶时间就用 Sub Agent 并发干活;不想手动操作就让 AI 用 Computer Use 接管你的电脑。
  • 前端是用户看得见的部分,后端是数据和逻辑;GitHub 管代码、Vercel 管托管、Supabase 管登录和数据库。
  • 接入 AI 模型靠 API Key,DeepSeek 便宜量大;做前端选 Kimi K3,做后端选 GPT 5.6 或千问 3.8。
  • 验收五维度:功能、体验、代码质量、安全、部署。

直播回放89 分钟

播放器来自飞书妙记 · 点击正文里的章节卡可跳到对应时刻 · 在新窗口打开

课件与资料

📄 Vibe-Coding主课-从一句话到可用产品-20页.pptx10.3 MB在飞书查看 ↗