如何使用 Claude 进行“氛围编程” (Vibe Coding) 构建你的首个产品(完整课程)

@eng_khairallah1
英语2个月前 · 2026年5月18日
255K
213
45
34
443

TL;DR

本综合课程介绍了“氛围编程” (vibe coding),这是一种通过纯英语描述需求来构建软件的方法。课程提供了一个分步框架,指导你如何利用 Claude 创建、迭代并部署自定义应用程序。

Collins 词典将其评为年度词汇。

保存好这个 :)

Merriam-Webster 将其收录进词典。

MIT Technology Review 将其列为 2026 年十大突破性技术之一。

Vibe coding 已不再是一种趋势。它就是当下软件被构建的方式。

而大多数人忽略的一点是,你不需要懂编程就能做到。这恰恰是它的全部意义所在。

Andrej Karpathy,特斯拉前 AI 负责人,在 2025 年 2 月创造了这个词。他的定义是:"有一种新的编程方式,你完全沉浸于氛围之中,拥抱指数级增长,然后忘记代码本身的存在。"

十四个字。那条推文获得了 450 万次浏览。而现在,全球 41% 的代码是由 AI 生成的。

现实是:如果你能用清晰的英语解释你想要什么,你就能构建一个可运行的应用程序。就在今天,你自己一行代码都不用写。

这篇文章将带你走完从想法到应用上线的完整过程。无需任何编程经验。

Vibe Coding 到底是什么

Vibe coding 就是用日常语言描述你想要构建的东西,然后让 AI 为你编写代码。

你不需要理解语法。你不需要知道什么是 React。你不需要区分前端和后端。你描述结果,AI 负责实现。

实际操作起来是这样:

你打开 Claude 输入:"给我建一个个人财务追踪器。我想按类别记录支出,查看月度汇总图表,并设置预算限制,超支时显示红色。采用干净现代的设计,支持深色模式。"

Claude 编写代码。你看到结果。你提出修改意见。Claude 更新代码。你重复这个过程,直到它完全符合你的需求。

这就是 vibe coding。代码是存在的,但你完全不需要看到或理解它。

为什么 Claude 是目前最好的 Vibe Coding 工具

2026 年有几十种 vibe coding 工具。Cursor、Lovable、Bolt、Replit、v0 —— 它们都能用。

但对于完全的初学者来说,Claude 有三个优势。

首先,你已经知道怎么用它。 如果你能进行对话,你就能用 Claude。不需要学习新的界面,不需要配置 IDE,不需要打开终端。你在聊天窗口或 Cowork 选项卡里输入你想要的,Claude 就会构建出来。

其次,Claude 可以直接在对话中创建项目。 当你让 Claude 构建东西时,它会直接在聊天中生成一个可交互的实时预览。你可以立即查看、点击、测试 —— 无需部署,无需等待。Claude 一完成,你就能看到结果。

第三,Opus 4.7 是目前最强的编程模型。 它在 SWE-bench(衡量实际编程能力的基准测试)上达到 87.6% 的分数。它不只是写出看起来对的代码 —— 它写出的是真正能用的代码。

第一步:从一个你真正在意的想法开始

人们 vibe coding 失败的首要原因,就是试图构建他们并不真正想要的东西。

"做一个待办清单"是默认的教程项目。但它也是你能构建的最无聊的东西。十分钟内你就会失去兴趣。

相反,想想你实际遇到的问题。

你想要一个追踪健身锻炼并显示长期进展的工具吗?那就做这个。

你想要一个个人仪表盘,同时显示日程、天气和任务列表吗?那就做这个。

你想要一个帮你和室友计算分摊费用的工具吗?那就做这个。

你想要一个帮你为特定考试复习的闪卡应用吗?那就做这个。

最好的第一个项目是你自己会真正使用的东西。正是这种动力,能让你在遇到某个功能不太完美、需要迭代时继续坚持。

第二步:用日常英语描述你的应用

在打开 Claude 之前,先写下你想要的描述。不是代码,不是技术规格,只是清晰地解释:

这个应用是做什么的。 "它帮我记录日常支出,并显示我的钱花在了哪里。"

谁会用。 "就我自己,在手机和笔记本电脑上使用。"

用户能看到什么。 "一个页面,我可以快速添加一笔支出,并选择类别(餐饮、交通、娱乐、账单)。一个仪表盘,显示当前月份各类支出的饼图。一个按日期排序的所有支出列表。"

它有什么用。 "我可以为每个类别设置月度预算。如果接近限额,类别会变成黄色。如果超支,会变成红色。"

它长什么样。 "干净简约。深色模式。现代设计,圆角和柔和的阴影。"

这个描述就是你的提示词。Claude 只需要这些就能开始构建。

第三步:构建第一个版本

打开 Claude。粘贴你的描述。在最前面加一句:

"根据这个描述为我构建一个完整可用的应用。要交互的、能真正运行。"

Claude 会在对话中生成一个 React 项目。你会在几秒钟内看到应用的实时预览。

对大多数人来说,这一刻改变了一切。 当你第一次用英语描述一件事,然后看着一个可运行的应用出现在你面前 —— 那就是 vibe coding 真正打动你的时候。

你的第一个版本不会完美。从来都不会。这完全正常,也完全没问题。

第四步:迭代直到满意

这就是 vibe coding 变得像一门技能的地方。

看看 Claude 构建了什么。哪些地方有效?哪些无效?哪些接近但不完全对?

明确告诉 Claude 要改什么。要具体。

糟糕的反馈:"把它做得更好。" 好的反馈:"饼图的颜色太相近了。为每个类别使用明显不同的颜色。另外,'添加支出'按钮在手机上太小了。把它变大,固定在屏幕底部。"

糟糕的反馈:"我不喜欢这个布局。" 好的反馈:"把仪表盘图表移到页面顶部。把近期支出列表放在它下面。添加一个头部,显示我这个月的总支出与总预算的对比。"

你的反馈越具体,Claude 就能越快准确地达到你的要求。

大多数人需要三到五轮的迭代,才能从"粗糙的第一个版本"变成"这实际上不错"。一些复杂应用可能需要十轮。关键是持续下去。每一次迭代都让你更接近目标。

第五步:添加让它成为你专属的功能

一旦基础应用能运行了,开始添加那些让你的情况变得真正有用的功能。

"添加一个重复支出功能。我想把房租、订阅和水电费标记为重复支出,这样每个月它们会自动显示,不用我再手动输入。"

"添加一个导出按钮,让我能把支出数据下载为 CSV 文件,这样我可以导入到电子表格中。"

"添加一个搜索栏,让我能按名称或类别快速找到特定支出。"

"添加一个'分摊支出'功能,让我可以把一笔支出标记为共享,并追踪谁欠谁多少钱。"

每个功能就是一个提示词。Claude 会把它加到现有应用中。你测试它。你完善它。然后继续下一个。

第六步:保存和分享你的应用

一旦你的应用达到了你想要的状态,你有几个选择:

保留为 Claude 项目。 它保存在你的对话中,你可以随时访问。适合个人偶尔使用的工具。

下载代码。 Claude 可以给你源代码,作为一个 HTML 文件,你可以在任何浏览器中打开。适合你想离线使用的工具。

部署到网上。 如果你想让其他人使用你的应用,Claude 可以引导你将其部署到免费的托管服务(如 Vercel 或 Netlify)。这样你的应用就有了一个真实的 URL,任何人都可以访问。

如果你使用的是 Claude Cowork,Claude 可以直接将文件保存到你的电脑上。如果你想要一个独立的应用程序,让 Claude 把所有内容打包成一个单独的 HTML 文件。

导致 Vibe Coding 项目失败的七个错误

在观察了数百人第一次尝试 vibe coding 之后,以下是导致失败的常见模式:

错误 1:一开始就做得太大。 你的第一个应用应该简单到能在一个会话中构建完成。一个个人支出追踪器。一个健身记录器。一个食谱管理器。而不是一个社交网络。不是一个市场。不是一个有 50 个功能的项目管理工具。从小处开始,完成一个项目,然后再构建更大的。

错误 2:提示词含糊不清。 "给我做点酷的东西"会产生垃圾。"给我做一个健身追踪器,能按肌肉群记录锻炼,用折线图追踪长期进展,并且采用深蓝色主题搭配白色文字"会产生有用的东西。具体化是一项技能。

错误 3:一次改变所有东西。 当你给出反馈时,每次迭代只改变一两个东西,而不是十个。如果你试图在一次提示中改变布局、颜色、功能和数据结构,Claude 会困惑,你会感到沮丧。

错误 4:不及时测试。 每次 Claude 更新你的应用后,实际点击浏览一遍。测试每个按钮。尝试边缘情况。输入奇怪的数据。现在找出问题,而不是等到你又在上面加了五个功能之后。

错误 5:在第一次出错后放弃。 肯定会有东西出问题。某个按钮不工作。某个图表显示错误数据。这很正常。告诉 Claude 哪里出了问题,它会修复。能发布应用的人和半途而废的人之间的区别,在于能否在最初几个 bug 面前坚持住。

错误 6:不描述视觉设计。 如果你不告诉 Claude 你想要应用长什么样,它会使用默认设置。而默认设置看起来千篇一律。用一句话描述颜色,一句话描述布局,一句话描述字体。"现代深色主题,圆角,蓝色强调色,干净的无衬线字体"就能改变输出结果。

错误 7:试图理解代码。 这对初学者来说反直觉但很重要。你不需要阅读代码,你不需要理解它。你需要评估结果。应用是否做了你想做的事?看起来是否对?能否用?这些才是关键。代码是 Claude 的问题,不是你的问题。

你现在就能构建什么

以下是十个应用想法,从最简单的到最复杂的,所有都可以由完全初学者的你使用 Claude 构建:

  1. 一个带有每日记录和情绪追踪的个人日记
  2. 一个保存和搜索你最爱食谱的食谱管理器
  3. 一个带有连续打卡和每日签到的习惯追踪器
  4. 一个带有支出记录和图表的个人财务仪表盘
  5. 一个带有间隔重复的闪卡学习应用
  6. 一个记录运动、组数和长期进展的健身记录器
  7. 一个按类别保存链接并附带备注的书签管理器
  8. 一个展示你作品的个人作品集网站,设计干净专业
  9. 一个生成格式化 PDF 发票的发票生成器
  10. 一个追踪联系人、笔记和跟进日期的简易 CRM

从 1 或 2 开始。先感受一下这个过程。然后逐步往上。

更大的图景

Vibe coding 不是一时的潮流。它是未来大多数软件被构建的方式。

微软报告说 AI 编写了大约 30% 的代码。谷歌表示超过四分之一。Shopify 的目标是到 2026 年第三季度实现 90% 的自主编码。Mercado Libre 的 23,000 名工程师已经将 Claude Code 作为核心工作流程的一部分。

问题不再是 AI 是否会构建你的软件。它已经在做了。

问题是你是否知道如何引导它。

那种技能 —— 清晰解释你想要什么,并不断迭代直到得到它 —— 是当前科技领域最有价值的技能。你不需要计算机科学学位来学习它。你需要一个清晰的想法和反复迭代的耐心。

现在趁大部分人还在观望、还持怀疑态度时学习 vibe coding 的人,当它成为所有软件构建的默认方式时,将拥有巨大的优势。

大多数人读到这篇文章时会想"我应该找个时间试试"。而那些现在就打开 Claude、描述他们第一个应用的人,今晚就能拥有一个可运行的产品。

关注我 @eng_khairallah1 获取更多 AI 课程和深度解析。我每周都会发布类似的内容。

希望对你有用,Khairallah ❤️

存到 YouMind

使用 YouMind 深度阅读爆款文章

保存原文、追问细节、总结观点,并在一个 AI 工作空间里把爆款文章沉淀成可复用笔记。

了解 YouMind
写给创作者

把你的 Markdown 变成干净的 𝕏 文章

图片上传、表格、代码块,往 𝕏 上手动重排太痛苦。YouMind 把整篇 Markdown 一键转成干净、可直接发布的 𝕏 文章草稿。

试试 Markdown 转 𝕏

更多可拆解样本

近期爆款文章

探索更多爆款文章