# How to Build Your First App Using Claude With Zero Experience (Full Course)
**作者**: Khairallah AL-Awady
**日期**: 2026-06-08T08:55:15.000Z
**来源**: [https://x.com/eng_khairallah1/status/2063907698417234316](https://x.com/eng_khairallah1/status/2063907698417234316)
---
I want to be very clear about something before we start.
Save this :)
I am not a developer. I have never been a developer. I do not have a computer science degree. I did not take a single coding bootcamp. I cannot read most code and tell you what it does.
But last weekend I shipped a working web application to the internet. Real users signed up. Real data was stored. Real features worked.
I built the entire thing with Claude Code in two days. And I am going to tell you the truth about what that experience was actually like. Not the curated version. The messy, frustrating, breakthrough-filled reality.
Because every "I built an app with AI" story online makes it sound effortless. It is not effortless. But it is very, very possible.
## Saturday Morning: The Idea
I wanted to build a simple tool. A content calendar that lets you plan your posts across platforms, drag them between days, and mark them as published. Nothing revolutionary. But something I actually needed for my own workflow.
I opened Claude Code in my terminal for the first time at 9am on Saturday.
By 9:15am I had already made my first mistake.
## Mistake #1: Starting Without a Plan
My very first prompt to Claude Code was:
Build me a content calendar app
Claude generated a bunch of files. Something appeared on the screen. It looked like a content calendar designed by someone who had never seen a calendar.
This is where 90% of people give up. They type a vague prompt, get a vague result, and conclude that vibe coding does not work.
The problem was not Claude. The problem was me. I had given it nothing to work with.
What I should have done:
I should have started in Plan Mode. Press Shift + Tab in Claude Code to switch from Act Mode to Plan Mode. In Plan Mode, Claude thinks before building. It asks questions. It maps out the architecture. It shows you what it plans to create.
I went back and did it properly:
I want to build a content calendar web app. Before writing any code, let's plan this.
The app needs:
- A weekly view with 7 columns (Monday through Sunday)
- The ability to add posts with a title, platform (Twitter, LinkedIn, Instagram), and status (draft, scheduled, published)
- Drag and drop to move posts between days
- A simple, clean design using Tailwind CSS
- Data stored in a local database so it persists between sessions
What tech stack should we use? What's the folder structure? Walk me through the architecture before building anything.
Claude came back with a detailed plan. Next.js for the framework. SQLite for the database. Tailwind for styling. A clean folder structure laid out file by file.
Lesson learned: Always start in Plan Mode. Always describe what you want in detail. The 5 minutes you spend planning saves you 2 hours of rebuilding.
## Mistake #2: Trying to Build Everything at Once
After planning, I got excited. I told Claude to build the whole thing in one go.
The result was a mess. Some features worked. Others were half-implemented. The drag and drop was broken. The database was not saving correctly. I had no idea where to start fixing it.
What I should have done:
Build one feature at a time. This is the golden rule of vibe coding.
I started over and followed this order:
Session 1: Just the basic page layout. Seven columns. No features. Session 2: Add the ability to create a post (just a simple form). Session 3: Display saved posts in the correct day column. Session 4: Add drag and drop functionality. Session 5: Add the status feature (draft/scheduled/published). Session 6: Make it look good.
Each feature got its own conversation. Fresh context. Clear task. Clean result.
When I built one feature at a time, each one worked perfectly. When I tried to build everything at once, nothing worked.
Lesson learned: One conversation per feature. Never mix multiple features in the same Claude Code session.
## Mistake #3: Not Creating a CLAUDE.md File
By Saturday afternoon I had a working basic layout and I was excited. But I kept running into the same problems:
Claude kept adding unnecessary complexity. It would create elaborate error handling systems when I just wanted a simple try-catch. It would add animation libraries when I just wanted a clean transition. It would restructure my entire folder system when I asked for one small change.
I was correcting the same things over and over.
Then I remembered reading about CLAUDE.md.
I created a file in my project root:
# CLAUDE.md
## Project Rules
- This is a simple content calendar. Keep everything minimal.
- Use Next.js 14 with the App Router
- Use Tailwind CSS for all styling. No other CSS frameworks.
- Use SQLite with Prisma ORM for the database
- Keep it simple. No unnecessary abstractions or design patterns.
- When I say "make it look good" I mean: clean spacing, readable fonts, subtle hover effects, rounded corners
- Never add new dependencies without asking me first
- Ask before refactoring any existing code
## Code Style
- Simple, readable code. A beginner should be able to understand it.
- Clear variable names. No abbreviations.
- Comments only for non-obvious logic
After creating this file, the experience changed dramatically. Claude stopped over-engineering. It stopped adding random libraries. It stopped restructuring things I had not asked it to touch.
Every time Claude did something I did not want, I added a new rule to CLAUDE.md. By Sunday night this file had 30+ rules and Claude was following all of them perfectly.
Lesson learned: Create CLAUDE.md on day one. Update it constantly. It is the single most powerful tool in Claude Code.
## Mistake #4: Not Using Screenshots
Saturday evening. The app works functionally but looks ugly. I typed this:
Make the design more modern and professional
Claude changed things. They looked different. Not better, just different.
I was trying to describe visual problems with words. That is incredibly inefficient.
Instead, I started taking screenshots of websites whose design I loved. I pasted them directly into Claude Code:
[screenshot of a clean calendar UI]
I want my calendar to look like this. Specifically:
- This exact shade of gray for the background
- These rounded cards for each post
- This amount of spacing between elements
- The way the active day is highlighted in blue
Claude matched the design almost perfectly. On the first try.
Then when something looked off, instead of describing it, I took a screenshot, circled the problem area, pasted it in, and said "this spacing is wrong" or "this font is too small."
Lesson learned: Screenshots are 10x better than words for visual feedback. Always paste images instead of describing what you see.
## Sunday: It All Came Together
By Sunday morning I had a working app with clean design, drag-and-drop, persistent data, and a functioning database. I had built the whole thing without understanding most of the code.
But it only existed on my laptop. Time to deploy.
## Mistake #5: Being Afraid of Deployment
Deployment sounded terrifying. Servers. Domains. DNS. Configuration files.
I almost stopped. I almost decided "running locally is good enough."
But I pushed through and asked Claude:
I want to deploy this app live to the internet. I want to use Vercel because I heard it's the easiest. Walk me through the exact steps.
Claude gave me seven steps:
1. Push the code to GitHub (Claude helped me set up Git)
2. Sign up for Vercel (free)
3. Connect Vercel to my GitHub repo
4. Set up the environment variables for the database
5. Click deploy
6. Wait 90 seconds
7. Get my live URL
I followed the steps. Three minutes later my app was live. I sent the URL to five people. They opened it. It worked.
Lesson learned: Deployment is not scary. It is just a checklist. Claude will walk you through every step.
## The 12 Rules I Wish I Knew Before Starting
Everything I learned in two days, compressed into rules:
Rule 1: Start in Plan Mode every time. Shift + Tab. Think before building.
Rule 2: One conversation per feature. Fresh context is better context.
Rule 3: Create CLAUDE.md on day one. Every correction becomes a permanent rule.
Rule 4: Use screenshots for every visual issue. Circle the problem. Paste it directly.
Rule 5: Build the simplest version first. Add complexity only after the simple version works.
Rule 6: Describe what you want in detail. The more specific your prompt, the better the output. "Build a login page" gets trash. "Build a login page with email and password fields, a 'forgot password' link below, a blue submit button, and a redirect to /dashboard on success" gets exactly what you asked for.
Rule 7: Use /compact when conversations get long. Claude's quality drops when the context fills up.
Rule 8: Commit to Git after every working feature. Claude can help you do this. If something breaks, you can roll back.
Rule 9: When something breaks, copy the error message and paste it into Claude. Say "Diagnose the root cause before fixing anything." Claude almost always finds the problem instantly.
Rule 10: Do not try to understand every line of code. Understand what each file does and how they connect. That is enough to direct Claude effectively.
Rule 11: When Claude gets stuck in a loop fixing the same thing over and over, stop. Start a fresh conversation. Paste only the relevant file and a clear description of the problem.
Rule 12: Ship it before it is perfect. Version one does not need to be beautiful. It needs to work. You can always make it better in version two.
## What I Built Since That Weekend
That was three weeks ago. Since then I have built:
- A client onboarding portal with login and file uploads
- An internal dashboard that tracks my content metrics
- A simple invoice generator that creates PDF invoices from a form
- A bookmark manager that saves and organizes links by topic
I still cannot read most code. I still do not understand 80% of what is happening in the files. But I can describe what I want clearly enough that Claude builds it. I can debug problems by showing Claude the error. I can deploy working products to the internet.
That is vibe coding. You are not the programmer. You are the product manager. Claude is the programmer. Your job is to know what to build and communicate it clearly.
Most people will keep telling themselves they need to learn to code before they can build anything.
The ones who open their terminal this weekend will have a working app by Monday morning. I know because that is exactly what happened to me.
Follow me @eng_khairallah1 for more AI courses, tools, and workflows. New content every week.
hope this was useful for you, Khairallah ❤️
## 相关链接
- [Khairallah AL-Awady](https://x.com/eng_khairallah1)
- [@eng_khairallah1](https://x.com/eng_khairallah1)
- [136K](https://x.com/eng_khairallah1/status/2063907698417234316/analytics)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [@eng_khairallah1](https://x.com/@eng_khairallah1)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [4:55 PM · Jun 8, 2026](https://x.com/eng_khairallah1/status/2063907698417234316)
- [136.9K Views](https://x.com/eng_khairallah1/status/2063907698417234316/analytics)
- [View quotes](https://x.com/eng_khairallah1/status/2063907698417234316/quotes)
---
*导出时间: 2026/6/9 13:34:16*
---
## 中文翻译
# 零基础如何使用 Claude 构建你的第一个应用程序（完整教程）
**作者**: Khairallah AL-Awady
**日期**: 2026-06-08T08:55:15.000Z
**来源**: [https://x.com/eng_khairallah1/status/2063907698417234316](https://x.com/eng_khairallah1/status/2063907698417234316)
---
在我们开始之前，我想把一件事说清楚。
把这篇文章保存起来 :)
我不是开发人员。我从未做过开发人员。我没有计算机科学学位。我没有上过任何编程训练营。我也看不懂大多数代码，无法告诉你它们是做什么的。
但是在上周末，我向互联网发布了一个能正常运行的 Web 应用程序。真实的用户注册了。真实的数据被存储了。真实的功能运行了。
我在两天内用 Claude Code 完成了整个构建。我将告诉你这段经历的真相。不是经过修饰的版本，而是混乱、沮丧却又充满突破的真实体验。
因为网上每一个“我用 AI 构建了一个应用”的故事都让它听起来毫不费力。其实并不容易。但这非常、非常可能实现。
## 周六上午：想法
我想构建一个简单的工具。一个内容日历，可以让你跨平台规划帖子，在不同天数之间拖拽它们，并标记为已发布。没什么革命性的东西。但这确实是我工作流中真正需要的。
我在周六上午 9 点第一次在终端中打开了 Claude Code。
到 9:15，我已经犯了第一个错误。
## 错误 #1：没有计划就开始
我对 Claude Code 的第一个提示词是：
给我构建一个内容日历应用
Claude 生成了一堆文件。屏幕上出现了一些东西。它看起来像一个从未见过日历的人设计的内容日历。
这就是 90% 的人放弃的地方。他们输入一个模糊的提示词，得到一个模糊的结果，然后得出结论说“氛围式编程”行不通。
问题不在于 Claude。问题在于我。我没有给它任何可供发挥的材料。
我应该做的：
我应该从“计划模式” 开始。在 Claude Code 中按 Shift + Tab 从执行模式 切换到计划模式。在计划模式下，Claude 会在构建前进行思考。它会提问。它会规划架构。它会向你展示它打算创建什么。
我回过头来，重新做了一遍：
我想构建一个内容日历 Web 应用。在写任何代码之前，我们先计划一下。
应用需要：
- 一个包含 7 列（周一到周日）的周视图
- 能够添加包含标题、平台和状态的帖子
- 拖拽功能，以便在不同日期之间移动帖子
- 使用 Tailwind CSS 的简洁、干净的设计
- 数据存储在本地数据库中，以便在会话之间保持持久化
我们应该使用什么技术栈？文件夹结构是怎样的？在构建任何东西之前，带我了解一下架构。
Claude 返回了一个详细的计划。使用 Next.js 作为框架。SQLite 作为数据库。Tailwind 用于样式化。清晰的文件夹结构，逐个文件列出。
经验教训：始终从计划模式开始。始终详细描述你想要的东西。你花 5 分钟计划，可以省下 2 小时的重建时间。
## 错误 #2：试图一次构建所有功能
计划完成后，我很兴奋。我让 Claude 一次性构建整个东西。
结果是一团糟。有些功能能用。有些只完成了一半。拖拽功能坏了。数据库保存不正确。我完全不知道该从哪里开始修复。
我应该做的：
一次构建一个功能。这是氛围式编程的黄金法则。
我重新开始，并遵循以下顺序：
第一阶段：只有基本的页面布局。七列。没有功能。
第二阶段：添加创建帖子的能力（只是一个简单的表单）。
第三阶段：在正确的日期列中显示保存的帖子。
第四阶段：添加拖拽功能。
第五阶段：添加状态功能（草稿/已计划/已发布）。
第六阶段：让它看起来好看。
每个功能都有自己的对话。全新的上下文。清晰的任务。干净的结果。
当我一次构建一个功能时，每一个都能完美运行。当我试图一次构建所有功能时，什么也运行不了。
经验教训：一个功能进行一次对话。永远不要在同一个 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 给了我七个步骤：
1. 将代码推送到 GitHub（Claude 帮我设置了 Git）
2. 注册 Vercel（免费）
3. 将 Vercel 连接到我的 GitHub 仓库
4. 为数据库设置环境变量
5. 点击部署
6. 等待 90 秒
7. 获取我的实时 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 ❤️
## 相关链接
- [Khairallah AL-Awady](https://x.com/eng_khairallah1)
- [@eng_khairallah1](https://x.com/eng_khairallah1)
- [136K](https://x.com/eng_khairallah1/status/2063907698417234316/analytics)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [CLAUDE.md](http://claude.md/)
- [@eng_khairallah1](https://x.com/@eng_khairallah1)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [4:55 PM · Jun 8, 2026](https://x.com/eng_khairallah1/status/2063907698417234316)
- [136.9K Views](https://x.com/eng_khairallah1/status/2063907698417234316/analytics)
- [View quotes](https://x.com/eng_khairallah1/status/2063907698417234316/quotes)
---
*导出时间: 2026/6/9 13:34:16*