你的咖啡人格测验：Free AI Courses 4.1 用 AI 从零搭建 Web 应用
【免费下载链接】free-ai-coursesInteractive course teaching Product Managers how to use Claude Code effectively项目地址: https://gitcode.com/GitHub_Trending/cl/free-ai-courses
Free AI Courses 的 Vibe Coding 模块（4.1–4.5）教你用 AI 从零搭建 Web 应用：全程不写一行代码，由 Claude Code 当"工程师"，你当"产品经理"，最终做出一个可分享给朋友的咖啡人格测验应用，并部署上线，获得一个真实可访问的网址 🎉
什么是 Vibecoding：你描述，AI 写代码
**Vibecoding（氛围编程）**的核心理念是"把感觉交给 AI"——你只描述想要的结果，AI 负责实现。它把传统写代码变成了两件事：
- 说清楚你要什么（清晰的需求）
- 给出好反馈（知道什么是对的）
在这个模块里，你和 AI 的关系就像真正的创业团队：你是 PM，Claude 是工程师。你描述、它构建、你评审、它打磨。这套"指挥而不实现"的技能，迁移到与设计师、开发公司或任何 AI 工具合作都完全适用。
咖啡人格测验：一个绝佳的 AI Web 应用首项目
4.1 课程带你构建的是"What's Your Coffee Personality?"（你的咖啡人格是什么）测验：
- 访客回答几道趣味问题
- 每道题的答案为不同人格类型计分
- 得分最高的人格获胜，附带一句咖啡推荐——比如"你是大胆冒险家——试试 Double Espresso！"
这其实是一个伪装成性格测验的推荐引擎：输入 → 计分 → 输出。项目不大，但具备真实 Web 应用的完整要素——问题、答案、逻辑、结果页，是练习"需求 → 构建 → 迭代"流程的完美沙盒。
课程资料详见：course-materials/lesson-modules/4-vibe-coding/4.1-setup/CLAUDE.md
快速上手：三步进入 4.1 课程
| 步骤 | 操作 |
|---|---|
| 1️⃣ 打开 AI 应用 | 在 Claude 桌面端打开Code标签，新建项目 |
| 2️⃣ 安装课程 | 粘贴启动提示词，AI 自动安装课程资料（含模块 4） |
| 3️⃣ 开始上课 | 输入/start-4-1，进入互动式 4.1 Setup 课 |
课程会引导你创建一个quiz-project/文件夹，作为你测验应用所有代码的家。全程约 10 分钟，不需要任何编程基础。
模块总览文档：website/pages/vibe-coding/index.mdx
构建闭环：需求 → 构建 → 迭代 → 保存 → 上线
整个模块（5 节课、约 1.5–2 小时）围绕同一个闭环展开：
- 4.1 Setup——建立 PM/工程师心态，创建项目文件夹
- 4.2 Plan——Claude 采访你，共同敲定需求，产出
REQUIREMENTS.md（这就是你与"工程师"之间的合同） - 4.3 Build & Iterate——看着 AI 用 JavaScript + Next.js 框架把应用搭出来，截图反馈、持续微调
- 4.4 GitHub——把代码存到 GitHub，做版本备份
- 4.5 Go Live——部署上线，获得一个可以发给朋友的真实 URL
几个你可能会听到的名词，其实不用懂：
- JavaScript：网站最常用的编程语言，Claude 替你会写
- Next.js：流行的网站框架，像盖房子的框架，帮你跳过从零搭建的麻烦
- 部署（Deploying）：把代码放上互联网的过程
从测验应用出发：技能可以迁移到任何项目
完成这个咖啡人格测验后，你掌握的流程对落地页、内部工具、数据看板、原型等一切 Web 项目同样有效。这正是这门课的独特之处——大多数 AI 编程课只教到"能跑一个 demo"，而它坚持把你带过最后一步：一个真实存在于互联网上、链接真实可点的东西 🚀
各课详细内容：
- 搭建心态与构建闭环：website/pages/vibe-coding/setup.mdx
- 需求定义与推荐引擎逻辑：website/pages/vibe-coding/plan.mdx
- 版本保存：website/pages/vibe-coding/github.mdx
- 部署上线：website/pages/vibe-coding/go-live.mdx
小结
用 Free AI Courses 的 Vibe Coding 模块，你可以在 2 小时内用 AI 从零搭建并上线一个 Web 应用。不需要写代码，你需要的是产品思维：清晰的需求、敏锐的审美、果断的反馈。打开咖啡，敲下/start-4-1，你的第一款 AI 应用之旅现在开始 ☕
【免费下载链接】free-ai-coursesInteractive course teaching Product Managers how to use Claude Code effectively项目地址: https://gitcode.com/GitHub_Trending/cl/free-ai-courses
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
