Skip to content

Vibe Vibe

Main Navigation 首页

0. 序章

主题

Sidebar Navigation

基础篇

写在最前面：这份教程是写给谁的

写给不同的你

自测清单：你应该从哪里开始？

学完这份教程，你将获得什么

第 1 章：觉醒 —— 为什么现在是编程最好的时代

1.1 编程已死，编程永生：从 Coder 到 Commander

1.1.1 2025 年，编程世界发生了什么

1.1.2 从 Coder 到 Commander 的角色转变

1.1.3 一个类比帮你理解

1.1.4 这对你意味着什么

1.2 核心概念：Vibe Coding 与 Spec Coding 详解

1.2.1 什么是 Vibe Coding

1.2.2 什么是 Spec Coding（规范驱动开发）

1.2.3 Vibe vs Spec：什么时候用什么

1.2.4 其他你需要知道的概念

1.3 破除迷信：不懂英文、数学不好也能写代码吗？

1.3.1 迷信一："编程需要数学很好"

1.3.2 迷信二："要先学好英文"

1.3.3 迷信三："需要懂很多技术名词"

1.3.4 迷信四："Vibe Coding 只是玩具"

1.3.5 迷信五："AI 会抢走程序员的工作"

1.4 工具初探：AI 编程工具选型指南

1.4.1 AI 编程工具全景图（2025 年版）

1.4.2 所有工具的共同能力

1.4.3 按你的情况选择

1.4.4 本教程的工具策略

1.4.5 各工具快速上手指南

1.5 Hello World：你的第一个 3 分钟 AI 网页

1.5.1 目标与准备

1.5.2 Step by Step 操作

1.5.3 恭喜你！你已经完成了什么

1.5.4 常见问题 FAQ

第 2 章：心法 —— 像产品经理一样思考

2.1 拒绝功能堆砌：为什么你的 AI 写不出复杂的 App？

2.1.1 最常见的错误

2.1.2 背后的思维误区

2.1.3 真实案例对比

2.1.4 正确的思维方式

2.2 MVP 思维：如何设计一个"能跑的最小版本"

2.2.1 什么是 MVP

2.2.2 为什么 AI 时代 MVP 更重要

2.2.3 MVP 设计三步法

2.2.4 MVP 设计模板

2.2.5 常见 MVP 设计错误

2.3 灵魂三问：用户是谁？痛点在哪？为何用你？

2.3.1 问题一：用户是谁？

2.3.2 问题二：痛点在哪？

2.3.3 问题三：为什么用你的？

2.3.4 灵魂三问检查清单

2.4 实战演练：拆解一个"背单词软件"的想法

2.4.1 原始想法

2.4.2 用灵魂三问分析

2.4.3 用 MVP 思维设计

2.4.4 写给 AI 的 Prompt

2.4.5 举一反三：其他想法的拆解思路

第 3 章：技法 —— 与 AI 对话的艺术

3.1 提示词工程基础：Context is King

3.1.1 核心理解

3.1.2 好的 Prompt 四要素：WHAT WHO HOW NOT

3.1.3 对比示例

3.1.4 提升效果的技巧

3.1.5 Prompt 模板库

3.2 用户旅程地图：把想法变成 AI 能懂的路径

3.2.1 什么是用户旅程地图

3.2.2 用户旅程的基本结构

3.2.3 用户旅程模板

3.2.4 实例：背单词软件的用户旅程

3.2.5 如何把用户旅程转化为 Prompt

3.3 编写第一份 PRD：让 AI 不再胡编乱造

3.3.1 什么是 PRD

3.3.2 简化版 PRD 模板（适合 AI 编程）

3.3.3 用户故事的写法

3.3.4 实例：背单词软件 PRD

3.3.5 让 AI 帮你写 PRD

3.4 功能优先级 P0/P1/P2：学会对 AI 说"这个先不做"

3.4.1 什么是 P0/P1/P2

3.4.2 为什么优先级很重要

3.4.3 如何划分优先级

3.4.4 在 Prompt 中使用优先级

3.4.5 优先级划分练习

第 4 章：实战 —— 从 0 到 1 开发个人工具

4.1 环境准备：无需命令行的开发环境搭建

4.1.1 方案 A：纯网页方案（推荐新手）

4.1.2 方案 B：本地 + AI 对话方案

4.1.3 方案 C：专业 IDE 方案（有编程基础）

4.1.4 本章使用的方案

4.2 第一轮：生成静态页面 —— 先看"脸"

4.2.1 项目选择：「每日一句」网页

4.2.2 Step 1：描述基本页面

4.2.3 Step 2：查看效果，调整样式

4.2.4 Step 3：确认静态页面 OK

4.2.5 阶段性成果

4.3 第二轮：注入逻辑与交互 —— 再长"脑"

4.3.1 Step 1：添加多条名言

4.3.2 Step 2：测试交互

4.3.3 Step 3：添加动画效果（可选）

4.3.4 阶段性成果

4.4 第三轮：数据存储基础

4.4.1 为什么需要数据存储

4.4.2 从 LocalStorage 开始（最简单）

4.4.3 理解 LocalStorage 的工作原理

4.4.4 进阶：云端存储简介（了解即可）

4.4.5 阶段性成果

4.5 Debug 指南：当 AI 报错时，如何用 AI 修复 AI

4.5.1 最常用的方法：复制粘贴大法

4.5.2 如何打开浏览器控制台

4.5.3 错误类型速查表

4.5.4 当 AI 反复修不好时

4.5.5 Debug 心态

第 5 章：进阶 —— 真实世界的开发流程

5.1 版本管理：为什么我改崩了回不去？

5.1.1 问题场景：改崩了回不去的痛

5.1.2 什么是版本管理

5.1.3 入门方案：手动版本管理

5.1.4 正规方案：Git 图形化工具

5.1.5 用 GitHub Desktop 的基本流程

5.1.6 版本管理最佳实践

5.2 部署上线：把你的网页发给全世界

5.2.1 为什么要部署

5.2.2 最简单的部署方案：Vercel

5.2.3 其他部署选择

5.2.4 部署后的自定义域名（可选）

5.2.5 部署常见问题

5.3 安全意识：不要把密码告诉 AI

5.3.1 绝对不能做的事情

5.3.2 为什么这很危险

5.3.3 正确的做法

5.3.4 初学阶段的简单建议

5.3.5 安全检查清单

5.4 局限性：Vibe Coding 搞不定的时刻

5.4.1 "Vibe Coding 宿醉"现象

5.4.2 Vibe Coding 适合什么

5.4.3 什么时候需要专业支持

5.4.4 Vibe Coding 的正确定位

5.4.5 从 Vibe Coding 到专业开发的进阶路径

第 6 章：不同人群的学习路径与资源

6.1 文科生/商科生路径

6.1.1 你的优势

6.1.2 推荐发展方向

6.1.3 推荐项目清单

6.1.4 进阶学习建议

6.1.5 案例：HFT 协会金融专业学生的故事

6.2 理工科学生路径

6.2.1 你的优势

6.2.2 推荐发展方向

6.2.3 推荐项目清单

6.2.4 进阶学习建议

6.2.5 从 Vibe 到专业开发的桥梁

6.3 职场人士路径

6.3.1 你的优势

6.3.2 推荐发展方向

6.3.3 推荐项目清单

6.3.4 与技术同事协作的建议

6.3.5 职场应用案例

6.4 推荐学习资源

6.4.1 官方文档

6.4.2 优质中文社区

6.4.3 推荐关注的人/账号

6.4.4 推荐书籍/课程

6.5 持续学习建议

6.5.1 建立学习习惯

6.5.2 保持更新