我想在开始之前明确一点：
保存这个 :)
我不是开发者。从来都不是。我没有计算机科学学位，也没参加过任何编程训练营。我读不懂大多数代码，也说不出它们的作用。
但上个周末，我向互联网发布了一个可用的 Web 应用。真实用户注册了，真实数据被存储了，真实功能正常工作了。
我完全用 Claude Code 在两天内构建了整个东西。而且我要告诉你这次经历的真实情况——不是精心包装的版本，而是混乱、令人沮丧、充满突破的现实。
因为网上每个“我用 AI 构建了一个应用”的故事听起来都很轻松。其实并不轻松。但非常可行。
周六上午：想法
我想构建一个简单的工具：一个内容日历，让你跨平台规划帖子，在日期之间拖拽，并标记为已发布。没什么革命性，但确实是我自己工作流程中需要的东西。
周六早上 9 点，我在终端里第一次打开了 Claude Code。
到 9:15，我已经犯了第一个错误。
错误 #1：没有计划就开始
我发给 Claude Code 的第一个提示是：
给我建一个内容日历应用
Claude 生成了一堆文件。屏幕上出现了一些东西。看起来像一个从没见过日历的人设计的内容日历。
这就是 90% 的人放弃的地方。 他们输入一个模糊的提示，得到一个模糊的结果，然后得出结论：氛围编程行不通。
问题不在于 Claude，而在于我。我没有给它任何可用的信息。
我本该这样做：
我本该从计划模式开始。在 Claude Code 中按 Shift + Tab 从执行模式切换到计划模式。在计划模式下，Claude 会先思考再构建。它会提问，规划架构，展示它要创建的内容。
我回头按正确方式做了：
我想构建一个内容日历 Web 应用。在写代码之前，先规划一下。
应用需要：
- 每周视图，7 列（周一到周日）
- 可以添加带标题、平台（Twitter、LinkedIn、Instagram）和状态（草稿、已安排、已发布）的帖子
- 拖拽功能，在日期之间移动帖子
- 简洁干净的设计，使用 Tailwind CSS
- 数据存储在本地数据库，以便在不同会话之间持久化
我们应该用什么技术栈？文件夹结构怎么安排？在构建之前，先给我讲讲架构。
Claude 返回了一个详细计划：Next.js 作为框架，SQLite 作为数据库，Tailwind 作为样式，清晰的文件结构按文件排列。
教训：始终从计划模式开始。始终详细描述你想要什么。花 5 分钟计划，能省下 2 小时的重建。
错误 #2：试图一次性构建所有东西
规划之后，我兴奋了。我让 Claude 一次性构建整个东西。
结果一团糟。有些功能能用，有些只实现了一半。拖拽功能坏了，数据库没有正确保存。我完全不知道从哪里开始修复。
我本该这样做：
一次只构建一个功能。这是氛围编程的黄金法则。
我重新开始，按这个顺序进行：
会话 1：只做基本页面布局，7 列，没有任何功能。
会话 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 几乎完美地匹配了设计。第一次就成功了。
然后如果有地方看起来不对，我不再描述，而是截图，圈出问题区域，粘贴进去，说“这个间距不对”或“这个字体太小”。
教训：对于视觉反馈，截图比文字好用 10 倍。总是粘贴图片，而不是描述你看到的东西。
周日：一切整合
到周日上午，我有了一个可用的应用：干净的设计、拖拽功能、持久化数据、功能正常的数据库。我完全不懂代码就构建了全部功能。
但它只存在于我的笔记本电脑上。该部署了。
错误 #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 展示错误来调试问题。我可以把可用的产品部署到互联网上。
这就是氛围编程。你不是程序员，你是产品经理。Claude 是程序员。你的工作是知道要构建什么，并清晰地沟通。
大多数人会继续告诉自己，在构建任何东西之前，他们必须学会编程。
而那些在这个周末打开终端的人，周一早上将拥有一个可用的应用。我知道，因为那正是发生在我身上的事。
关注我 @eng_khairallah1 ，获取更多 AI 课程、工具和工作流。每周更新新内容。
希望对你有帮助，Khairallah ❤️
