我想在开始之前先说清楚一件事。
先把这个存起来 :)
我不是开发者。从来都不是。我没有计算机科学学位。也没上过任何编程培训班。大多数代码我都看不懂，也不知道它们是干什么的。
但上周末，我把一个能正常运行的网页应用发布到了互联网上。有真实的用户注册了。有真实的数据被存储了。有真实的功能在运行。
整个应用是我用 Claude Code 在两天内构建的。接下来，我要告诉你这次经历的真实感受。不是那种精心包装过的版本。而是混乱、挫败、充满突破的真实过程。
因为网上所有"我用 AI 构建了一个应用"的故事都听起来毫不费力。实际上并非如此。但它是非常、非常可行的。
周六上午：想法
我想构建一个简单的工具。一个内容日历，让你可以跨平台规划帖子、在日期之间拖拽、标记为已发布。没什么革命性的。只是我自己的工作流程确实需要它。
周六早上 9 点，我第一次在终端里打开了 Claude Code。
到了 9:15，我已经犯了第一个错误。
错误 #1：没有计划就开始
我给 Claude Code 的第一个提示是：
给我构建一个内容日历应用
Claude 生成了一堆文件。屏幕上出现了点东西。看起来像一个从没看过日历的人设计的内容日历。
这就是 90% 的人放弃的地方。 他们输入一个模糊的提示，得到一个模糊的结果，然后得出结论说 vibe coding 行不通。
问题不在于 Claude。问题在于我。我没有给它任何可用的信息。
我本该怎么做：
我本应从计划模式开始。在 Claude Code 中按 Shift + Tab，从执行模式切换到计划模式。在计划模式下，Claude 会先思考再构建。它会提问。它会规划架构。它会向你展示它计划创建什么。
我回去重新正确地做了：
我想构建一个内容日历网页应用。在写任何代码之前，我们先做计划。
这个应用需要：
- 一个每周视图，有 7 列（周一到周日）
- 能够添加带有标题、平台（Twitter、LinkedIn、Instagram）和状态（草稿、已排期、已发布）的帖子
- 拖拽功能，可以在不同日期之间移动帖子
- 使用 Tailwind CSS 的简洁、干净设计
- 数据存储在本地数据库中，以便在会话之间持久保存
我们应该使用什么技术栈？文件夹结构是什么样的？在构建任何东西之前，带我走一遍架构。
Claude 返回了一个详细的计划。使用 Next.js 作为框架。使用 SQLite 作为数据库。使用 Tailwind 进行样式设计。一个清晰的文件夹结构，逐个文件地布局。
教训：始终从计划模式开始。始终详细描述你想要的东西。花 5 分钟做计划，可以省掉 2 小时的重构时间。
错误 #2：试图一次性构建所有功能
计划之后，我变得很兴奋。我告诉 Claude 一次性构建整个应用。
结果是一团糟。有些功能能工作。其他的只是半成品。拖拽功能坏了。数据库没有正确保存。我完全不知道从哪里开始修复。
我本该怎么做：
一次只构建一个功能。这是 vibe coding 的黄金法则。
我重新开始，按照这个顺序：
第 1 轮：只做基本的页面布局。七列。没有功能。第 2 轮：添加创建帖子的能力（只是一个简单的表单）。第 3 轮：在正确的日期列中显示已保存的帖子。第 4 轮：添加拖拽功能。第 5 轮：添加状态功能（草稿/已排期/已发布）。第 6 轮：让它看起来好看。
每个功能都有自己的独立对话。 全新的上下文。明确的任务。干净的结果。
当我一次只构建一个功能时，每个功能都完美运行。当我试图一次性构建所有功能时，没有一个能正常工作。
教训：每个功能一个对话。永远不要在同一个 Claude Code 会话中混合多个功能。
错误 #3：没有创建 CLAUDE.md 文件
周六下午，我已经有了一个能工作的基本布局，非常兴奋。但我总是遇到同样的问题：
Claude 不断添加不必要的复杂性。当我只想要一个简单的 try-catch 时，它会创建复杂的错误处理系统。当我只想要一个干净的过渡效果时，它会添加动画库。当我要求做一个小的改动时，它会重构我整个文件夹系统。
我一遍又一遍地纠正同样的事情。
然后我想起读到过关于 CLAUDE.md 的内容。
我在项目根目录创建了一个文件：
CLAUDE.md
项目规则
- 这是一个简单的内容日历。保持一切最小化。
- 使用 Next.js 14 和 App Router
- 使用 Tailwind CSS 进行所有样式设计。不使用其他 CSS 框架。
- 使用 SQLite 和 Prisma ORM 作为数据库
- 保持简单。没有不必要的抽象或设计模式。
- 当我说"让它看起来好看"时，我指的是：干净的间距、可读的字体、微妙的悬停效果、圆角
- 未经我允许，永远不要添加新的依赖项
- 在重构任何现有代码之前先问我
代码风格
- 简单、可读的代码。初学者也应该能理解。
- 清晰的变量名。没有缩写。
- 仅对非显而易见的逻辑添加注释
创建这个文件之后，体验发生了巨大的变化。Claude 不再过度设计。不再添加随机的库。不再重构我没有要求它碰的东西。
每次 Claude 做了我不想要的事情，我都会在 CLAUDE.md 中添加一条新规则。 到周日晚上，这个文件已经有 30 多条规则了，Claude 完美地遵循了所有规则。
教训：在第一天就创建 CLAUDE.md。不断更新它。它是 Claude Code 中最强大的工具。
错误 #4：没有使用截图
周六晚上。应用功能上能用了，但看起来很丑。我输入了：
让设计更现代、更专业
Claude 做了一些改动。看起来不同了。但并不是更好，只是不同而已。
我试图用语言来描述视觉问题。这非常低效。
相反，我开始截取我喜欢的网站设计的截图。我把它们直接粘贴到 Claude Code 中：
[一个干净日历 UI 的截图]
我希望我的日历看起来像这样。具体来说：
- 背景用这个精确的灰色色调
- 每个帖子使用这些圆角卡片
- 元素之间使用这个间距
- 活动日期以这种方式用蓝色高亮
Claude 几乎完美地匹配了设计。第一次就成功了。
然后，当某些东西看起来不对劲时，我不用去描述它，而是截取一张截图，圈出问题区域，把它粘贴进去，然后说"这个间距不对"或"这个字体太小了"。
教训：对于视觉反馈来说，截图比文字好十倍。始终粘贴图片，而不是描述你看到的东西。
周日：一切都整合在一起了
到周日早上，我已经有了一个可用的应用，具有干净的设计、拖拽功能、持久化数据和正常运行的数据库。我在不了解大部分代码的情况下构建了整个应用。
但它只存在于我的笔记本电脑上。是时候部署了。
错误 #5：害怕部署
部署听起来很可怕。服务器。域名。DNS。配置文件。
我差点停了下来。差点决定"在本地运行就够好了"。
但我坚持了下来，问 Claude：
我想把这个应用实时部署到互联网上。我想用 Vercel，因为我听说它是最简单的。一步步带我走完整个过程。
Claude 给了我七个步骤：
- 将代码推送到 GitHub（Claude 帮我设置了 Git）
- 注册 Vercel（免费）
- 将 Vercel 连接到我的 GitHub 仓库
- 设置数据库的环境变量
- 点击部署
- 等待 90 秒
- 获取我的在线 URL
我按照步骤操作。三分钟后，我的应用上线了。我把 URL 发给了五个人。他们打开了。它能用。
教训：部署并不可怕。它只是一个检查清单。Claude 会带你走完每一步。
我希望在开始前就知道的 12 条规则
我在两天内学到的一切，浓缩成规则：
规则 1： 每次都从计划模式开始。按 Shift + Tab。先思考再构建。
规则 2： 每个功能一个对话。全新的上下文是更好的上下文。
规则 3： 在第一天创建 CLAUDE.md。每次修正都变成一条永久规则。
规则 4： 对每个视觉问题使用截图。圈出问题。直接粘贴进去。
规则 5： 先构建最简单的版本。只有在简单版本能工作之后，才增加复杂性。
规则 6： 详细描述你想要的东西。你的提示越具体，输出就越好。"构建一个登录页面"得到的是垃圾。"构建一个登录页面，包含电子邮件和密码字段，下面有一个'忘记密码'链接，一个蓝色的提交按钮，成功后重定向到 /dashboard"得到的正是你要求的东西。
规则 7： 当对话变长时，使用 /compact。当上下文填满时，Claude 的质量会下降。
规则 8： 在每一个能工作的功能之后提交到 Git。Claude 可以帮你做到这一点。如果有东西坏了，你可以回滚。
规则 9： 当有东西坏了时，复制错误消息并粘贴到 Claude 中。说"在修复任何东西之前，先诊断根本原因。"Claude 几乎总能立即找到问题。
规则 10： 不要试图理解每一行代码。理解每个文件是做什么的以及它们之间如何连接。这足以有效地指挥 Claude。
规则 11： 当 Claude 陷入循环，一遍又一遍地修复同一个问题时，停下来。开始一个新的对话。只粘贴相关的文件和问题的清晰描述。
规则 12： 在它完美之前就发布它。第一个版本不需要很漂亮。它需要能用。你总可以在第二个版本中让它变得更好。
自从那个周末以来我构建了什么
那是三周前的事了。从那以后，我构建了：
- 一个客户入职门户，带有登录和文件上传功能
- 一个跟踪我内容指标的内部仪表板
- 一个简单的发票生成器，通过表单创建 PDF 发票
- 一个书签管理器，按主题保存和整理链接
我仍然看不懂大多数代码。我仍然不理解文件中发生了什么事的 80%。但我能足够清晰地描述我想要什么，让 Claude 来构建它。我能通过向 Claude 展示错误来调试问题。我能将能用的产品部署到互联网上。
这就是 vibe coding。你不是程序员。你是产品经理。Claude 是程序员。你的工作就是知道要构建什么，并清晰地传达出来。
大多数人会继续告诉自己，他们需要先学会编程才能构建任何东西。
那些在这个周末打开终端的人，将在周一早上拥有一个能用的应用。我知道，因为那正是发生在我身上的事。
关注我 @eng_khairallah1 获取更多 AI 课程、工具和工作流程。每周更新新内容。
希望对你有用，Khairallah ❤️
