⚠️ Alpha内测版本警告：此为早期内部构建版本，尚不完整且可能存在错误，欢迎大家提Issue反馈问题或建议

Skip to content

Vibe Vibe

Main Navigation 首页

主题

Sidebar Navigation

基础篇

写在最前面

找到你的位置

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

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

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

1.1.2 从 Coder 到 Commander 的角色转变

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

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

1.2.2 迷信二：要先学好英文

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

1.2.4 迷信四：Vibe Coding 只是玩具

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

1.2.6 迷信六：AI生成的代码总是完美的

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

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

1.3.2 所有工具的共同能力

1.3.3 按你的情况选择

1.3.4 本教程的工具策略

1.4 Vibe vs Spec：AI 编程的两种方式

1.4.1 什么是 Vibe Coding

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

1.4.3 如何选择和切换

1.4.4 Context 管理技巧

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 思维升级：从"我想做一个App"到"我要解决一个问题"

2.1.1 JTBD进阶技巧：深度理解与应用方法

2.1.1 JTBD实践应用：四场景分析与练习

2.1.1 JTBD理论：从功能思维到任务思维

2.2 逆向思维：先想清楚什么会让项目失败

2.2.1 逆向思维基础：从Carl Jacobi到Charlie Munger

2.2.2 Pre mortem失败模式分析：Vibe Coding项目避坑指南

2.2.3 Pre mortem实战指南：操作步骤与工具模板

2.3 减法思维：MVP不是「最小功能」，而是「最小可验证价值」

2.3.1 MVP基础：从概念到深层含义

2.3.2 真实案例对比：成功与失败的分水岭

2.3.3 功能策略：砍掉功能的艺术与不做清单

2.3.4 实践指南：减法思维的完整应用流程

2.4 故事思维：把用户当作故事的主角

2.4.2 产品即故事：用叙事结构思考需求

2.4.3 三维用户画像：让用户从纸面上站起来

2.4.4 用户旅程地图：把故事可视化

2.4.5 用故事思维写 Prompt：让 AI 真正理解你

2.4.6 实战练习：为你的项目应用故事思维

2.4.7 本节核心要点

2.5 灵魂三问：开发前必须回答的问题

2.5.2 问题一：用户是谁？

2.5.3 问题二：痛点在哪？

2.5.4 问题三：为什么选你？

2.5.5 灵魂三问自检清单

2.5.6 实战案例：四种场景的灵魂三问

2.5.7 本节核心要点

2.6 场景应用：这些思维工具不只是用来「做产品」的

2.6.1 核心洞见：一套思维，多种场景

2.6.2 数据分析场景：让 AI 做出有价值的分析

2.6.3 自动化脚本场景：识别值得自动化的任务

2.6.4 个人工具场景：警惕过度设计的陷阱

2.6.5 家人工具场景：站在他们的角度设计

2.6.6 本节总结：场景化思维速查表

2.7 问题发现：如何找到值得解决的问题

2.7.2 问题就在你身边，只是你没注意

2.7.3 "烦恼日记"法：系统性发现问题

2.7.4 什么样的问题适合用 Vibe Coding 解决

2.7.5 给不同人群的问题发现建议

2.7.6 实战练习：问题发现工作坊

2.7.7 本节核心要点

2.8 本章总结：产品经理的思维工具箱

2.8.2 开发前检查清单

2.8.3 从心法到技法

附录：心法篇补充材料

A. 思维模型速查表

B. 扩展案例库

C. 常见误区诊断清单

D. 深度参考资源

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

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

3.1.1 什么是提示词工程

3.1.2 Context is King：上下文为王

3.1.3 初学者最常犯的五个错误

3.2 结构化提示词框架

3.2.1 为什么需要框架

3.2.2 S.C.A.F.F. 框架（推荐框架）

3.2.3 Role → Goal → Constraints 框架（简化版）

3.2.4 万能提示词模板

3.2.5 框架选择指南

3.3 进阶提示技巧

3.3.1 Zero shot Prompting：直接提问的艺术

3.3.2 Few shot Prompting：用示例教会 AI

3.3.3 Chain of Thought：让 AI "想一想"再回答

3.3.4 Tree of Thoughts：探索多条推理路径

3.3.5 Self Critique：让 AI 自我检查

3.3.6 技巧选择指南：什么情况用什么技巧

3.4 编写你的第一份 PRD

3.4.1 什么是 PRD，为什么 Vibe Coding 需要它

3.4.2 从第二章成果到 PRD：整合你的思考

3.4.3 适合初学者的 PRD 模板（精简版）

3.4.4 用优先级引导 AI 分阶段开发

3.4.5 PRD 实战：从想法到文档

3.5 迭代对话的艺术

3.5.1 为什么一次提问往往不够

3.5.2 迭代对话的基本模式

3.5.3 有效反馈的艺术

3.5.4 上下文管理：让 AI 记住你说过的话

3.5.5 知道何时开始新对话

3.6 当 AI 不听话时

3.6.1 AI 常见的"不听话"表现

3.6.2 诊断问题：AI 错在哪里

3.6.3 修正策略：怎么让 AI 改对

3.6.4 兜底策略：当 AI 真的搞不定

3.6.5 预防胜于治疗：减少"不听话"的概率

3.7 本章总结与实战演练

3.7.1 本章核心要点回顾

3.7.2 第二章 + 第三章：完整工作流

3.7.3 提示词速查清单

3.7.4 实战演练：综合练习

3.7.5 从本章到下一章

附录：常用 Prompt 模板库

A.1 项目创建类模板

A.2 代码修改类模板

A.3 问题解决类模板

A.4 文档生成类模板

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

4.1 开始之前：整合你的准备工作

4.1.1 回顾第二章成果：小李的待办清单

4.1.2 准备你的 AI IDE

4.1.3 工具准备与环境检查

4.1.4 本节检查清单

4.2 第一轮：搭建页面框架

4.2.1 用第三章框架写第一个 Prompt

4.2.2 生成静态页面

4.2.3 调整样式与布局

4.2.4 阶段性成果检查

4.2.5 完整 Prompt 对话记录

4.3 第二轮：实现核心功能

4.3.1 功能一：添加任务

4.3.2 功能二：删除任务

4.3.3 功能三：标记完成

4.3.4 迭代优化的艺术

4.3.5 阶段性成果检查

4.4 第三轮：让数据活起来

4.4.1 为什么需要数据存储

4.4.2 使用本地存储（localStorage）

4.4.3 测试数据持久化

4.4.4 完整功能验证与阶段回顾

4.5 Debug 实战：当 AI 代码报错时

4.5.1 常见错误类型速查

4.5.2 用 AI 帮你修 AI 的代码

4.5.3 真实案例复盘

4.5.4 Debug 心法总结

4.6 收尾与回顾

4.6.1 完整项目展示

4.6.2 从 0 到 1 的完整历程回顾

4.6.3 你学到了什么

4.6.4 下一步可以做什么

第 5 章：精进 —— 从「能用」到「好用」

5.1 后悔药：代码改崩了怎么办

5.1.1 一个真实的噩梦场景

5.1.2 零门槛方案：AI IDE 自带历史功能

5.1.3 手动版本管理

5.1.4 进阶方案：GitHub Desktop 入门

5.1.5 GitHub Desktop 实操

5.1.6 版本管理最佳实践

5.2 见世面：把网页发到互联网上

5.2.1 为什么要部署上线

5.2.2 部署平台选择指南

5.2.3 Zeabur 部署实战（大陆首选）

5.2.4 Vercel 部署实战

5.2.5 部署后的实用操作

5.2.6 大陆访问解决方案（可选）

5.2.7 其他部署选择

5.2.8 部署常见问题

5.2.9 本节检查清单

5.3 护城河：AI 时代的安全意识

5.3.0 2025年安全现状：触目惊心的数字

5.3.1 为什么这一节很重要

5.3.2 绝对禁区：永远不要告诉 AI

5.3.3 代码中的安全隐患

5.3.4 初学者安全检查清单

5.3.5 AI 推荐的库安全吗（Slopsquatting）

5.3.6 永远审查代码

5.3.7 本节要点总结

5.4 再进化：项目的持续迭代与优化

5.4.1 你的项目不是一次性的

5.4.2 收集反馈

5.4.3 功能扩展

5.4.4 代码优化

5.4.5 从项目到作品集

5.5 知边界：Vibe Coding 的能与不能

5.5.1 Vibe Coding 能做什么

5.5.2 Vibe Coding 的局限性

5.5.3 什么信号告诉你需要学更多

5.5.4 正确的心态

5.5.5 进阶版预告

5.6 启程前：本章总结与进阶预告

5.6.1 本章核心要点回顾

5.6.2 基础版完整学习路径

5.6.3 你现在能做什么

5.6.4 进入进阶版的准备

5.6.5 结语

结语：给未来的你

下部预告：Vibe Coding 全栈实战教程

进阶版核心内容详解

附录

A. Prompt 速查清单

B.1 JavaScript 错误

B.2 CSS/样式问题

B.3 交互问题

B.4 工具问题

C.1 AI 编程相关

C.2 开发相关

C.3 技术相关

D.1 对话式 AI 对比

D.2 IDE 集成式对比

D.3 专用 AI IDE 对比

D.4 部署平台对比

E.1 个人工具类（10 个）

E.2 效率工具类（10 个）

E.3 内容创作类（10 个）

E.4 数据可视化类（10 个）

进阶篇

第一章：环境搭建与代码运行基础

快速开始

1.1 代码格式演变

1.2 技术栈概念

1.3 浏览器与服务器基础

1.4 Terminal 终端入门

1.5 包管理与项目配置

1.6 模型与工具

1.7 创建项目

1.8 Localhost 与端口

第二章：AI 使用说明书

推荐配置

2.1 AI 编程的经济学

2.2 VibeCoding 工作流

2.3 MCP、插件与 Skills

2.4 项目规则配置

2.5 高效调试心法

第三章：产品思维与文档驱动

PRD 模板

3.1 想法验证实战

3.2 与 AI 确认需求

3.3 PRD 编写实战

3.4 从 PRD 到代码

第四章：你必须知道的开发基础

4.0 代码运行的三种状态

4.1 技术栈决策框架

4.2 从 PRD 到技术文档

4.3 如何读懂 AI 生成的代码

4.4 API 与 HTTP 基础

4.5 前后端分离概念

4.6 配置文件格式

4.7 API 集成实战

4.8 项目说明书结构

第五章：界面(UI)与交互(UX)

5.1 AI 设计工具

5.2 组件库

5.2 动画与交互库

5.3 UI 风格与灵感

5.4 让页面更高级的效果

第六章：数据持久化与数据库

6.0 领取你的数据库

6.1 数据存储演进

6.2 数据库基础概念

6.3 如何操作数据库

6.4 数据库设计与优化

第七章：后端API开发

CRUD 快速示例

第八章：安全与用户认证

用户系统快速示例

8.1 安全开发流程

8.2 安全问题诊断手册

8.3 认证方式与方案选择

8.4 权限与路由保护

8.5 进阶安全防护

第九章：功能测试流程与自动化脚本

9.1 测试策略与分层

9.2 API测试

9.3 E2E测试与问题定位

9.4 TDD与自动化工作流

第十章：Localhost 与公网访问

快速开始

第十一章：Git 版本控制与跨平台协作

Git 协作流程示例

11.1 Git 基础与数据流向

11.2 云端仓库与认证配置

11.3 协作问题诊断与解决

11.4 团队工作流最佳实践

第十二章：无服务器部署与 CI/CD 自动化

12.1 部署到 EdgeOne Pages

12.2 部署到类 Vercel 平台

12.3 CI/CD 与自动化

12.4 运维基础与成本优化

第十三章：域名解析原理与网络接入

13.1 域名购买与 DNS 配置

13.2 备案与访问问题解决

第十四章：云服务器运维与项目部署

14.1 VPS 选购指南

14.2 VPS 初始化与安全配置

14.3.1 应用商店与 Docker 基础

14.3.2 部署 Next.js 应用

14.3.3 部署静态网站

14.3.4 部署前后端分离应用

14.4 配置域名与证书

14.5 其他好玩的应用

第十五章：SEO、分享与数据统计

15.1 Open Graph 与社交分享

15.2 SEO 全攻略

15.3 Umami 统计部署

15.4 法律合规实践

第十六章：用户反馈与产品迭代

16.1 产品上线后的困惑

16.2 收集反馈的渠道

16.3 反馈分类与优先级

16.4 用户访谈技巧

16.5 数据驱动决策

16.6 迭代节奏管理

16.7 持续迭代文化

NEXT LEVEL

实践篇

文科生/商科生项目

理工科学生项目

职场人士项目

我的一点点 Vibe 的编程经验分享——从执行者到决策者

核心技能 (Core 1 4)

AI Agent 开发

🎨 Vibecoding 案例分享：零代码打造 AI 绘本生成器

开源 AI 画布：我的 Vibecoding 实践历程

全栈项目实战

全栈实战：AI 简历优化 SaaS (AI Resume Polish)

工具与效率

优质文章篇

知名公司博客

AI 辅助发布与 AI 部署助手

使用 ComputeEval 评估 LLM 生成的 CUDA 代码

Claude Code：代理式编码的最佳实践

GitHub Copilot Vibe Coding 工作坊

GitLab Duo Agent Platform：AI 代理平台

Google Gemini 2.0：代理时代的 AI

如何帮助每个人成为 10 倍工程师？

IBM watsonx Code Assistant：主机现代化的代理式 AI 能力

Replit Agent：AI 结对编程员

利用 AI 编码助手大规模开发量子应用：NVIDIA CUDA Q 实践

GitLab Duo Workflow：AI 驱动开发的未来

Microsoft Build 2025：AI 代理时代与开放代理网络

并非所有 AI 辅助编程都是 Vibe Coding

OpenAI 2025 开发者战略

超大上下文窗口：AI 编码助手的性能倍增器

Vibe Coding 案例研究：ScubaDuck

Vibe Coding 详解：工具与指南

使用 Vercel v0 详解 Vibe Coding

Vibe Coding 即元编程

"Vibe Coding" 是未来，但也令人恐惧

Vibe Coding 即将来临（YouTube 版）

使用 Vibe Coding 将博客从 Express 迁移到 Next.js

使用 Amazon Q CLI 进行 Vibe Coding

Vibe Coding 与 Anthropic Claude：AI 辅助软件开发的新时代

使用 GitHub Copilot 进行 Vibe Coding

Vibe Coding 专题讨论

什么是 Vibe Coding？

优质播客

第117期 Vibe Coding：当 AI 将你的想法转化为代码

2025 年 AI 辅助软件开发（DORA 报告深度解读）

AI 与软件开发者 Practical AI #262

Claude Code：Anthropic 的终端 AI 代理

2024 年开发者如何使用 AI 编码工具

如何成为一名 Vibe Coder

像 Claude Code 构建者一样使用它

AI 与裁员潮 Frontend Happy Hour #191

RIP Vibe Coding：2025年2月 10月的兴衰

生成式 AI 对软件开发的影响

Vibe Coding 与 AI 代理的崛起

Vibe Coding 是个问题 Syntax #887

Vibe Coding 即将来临

Vibe Coding Is The Future（Spotify 版）

Vibe Coding 专题讨论

我们仍需讨论 Vibe Coding：对2025年度词汇的反思

研究报告

大语言模型 Vibe Coding 综述

代理式 AI 安全：威胁、防御、评估与未来方向

AI | 2025 Stack Overflow 开发者调查中的 Vibe Coding 章节

AI 50：AI 代理超越聊天

LLM 驱动安全代码生成的实证研究

你从 AI 中获得价值了吗？差距在扩大

Vibe Coding 完全指南：2025年5月版

AI 代码助手的使用与影响研究

从结对编程到 AI 副驾驶：对比研究

从 Vibe Coding 到 Context Engineering：2025年软件开发回顾

AI 对开发速度的影响有多大？

微软 2024 年工作未来报告

并非所有 AI 辅助编程都是 Vibe Coding（但 Vibe Coding 很棒）

代理式 AI 的崛起

保护 AI 生成代码与 Vibe Coding IDE 的安全

2025 年开发者生态系统现状

AI 系统中的技术债务

2025年可视化开发与 Vibe Coding 现状

万亿美元的 AI 软件开发栈

Vibe Coding：对话式 AI 软件开发的混合方法案例研究

Vibe Coding：探索基于 AI/语音编码的研究探针

Vibe Coding：通过与人造智能对话进行编程

Vibe Coding：迈向语义与意图级软件开发的 AI 原生范式

Vibe Coding 与 Agentic Coding 对比

Vibe Coding 白皮书

关于 Vibe Coding 你需要知道的一切（基于 Vercel State of Vibe Coding 报告）

优质 Newsletter

Vibe Coder 新时代已经到来

AI 代理周刊：软件开发版

AI 开发必备通讯

Almost Timely News：我如何使用 AI 编程

Claude Code：代理式编码最佳实践

如何有效使用生成式 AI 完成软件工程任务

我用 Vibe Coding 构建了一个自动撰写 AI 主题 Substack 的系统

两年使用 AI 工具进行软件工程的经验总结

规范驱动的 AI 开发：开源工具包入门

Vibe Coding 的过去与未来

"Vibe Coding" 的真相

2025 年 AI 工程现状：从编码代理到容器化集群

TLDR AI 通讯（2025年12月版）

顶级 AI 代理工作流模式

Vibe Coding // BRXND Dispatch 第76期

Vibe Coding 通讯 | AI 驱动开发的每周见解

Vibe Coding：思考与预测

Vibe Engineering（氛围工程学）

什么是 Vibe Coding？

开发者社区

2025 年 AI 编码最佳实践

AI Vibe Coding 教程 + 工作流（Cursor 最佳实践）

Andrej Karpathy：软件正在再次变革

构建本地 AI 编码助手：Qwen3 + Ollama + Continue.dev 指南

vibecoding：面向 Vibe Coder 的活文档库

Cursor Vibe Coding 教程完全新手版（无需经验）

AI 编码平台的必备最佳实践

从 Vibe Coding 到 CLI 代理：我的 2025 终极开发者指南

Zed 代码编辑器入门：代理式编辑

Google 的 Vibe Coding 平台删除了整个硬盘

完全新手如何开始 Vibe Coding Emergent

2025年 Vibe Coder 访谈[Vibe Coding 意味着完全依赖 AI]

Reddit 上的 Vibe Coding：社区如何分享技巧、妙招和有趣的编程时刻

r/vibecoding：Vibe Coding 专属讨论区

Cursor 编码初学者指南 | Lee Robinson

关于 Vibe Coding 的残酷真相及你为什么应该关心

2025年 Vibe Coding 终极指南（高级工作流版）

Vibe Coding 2025年度方法论

33分钟掌握 Vibe Coding 基础

Vibe Coding 是你为自己设下的陷阱

Vibe Coding 手册

Vibe Coding：AI 生成代码的真相

Vibe Coding vs Agentic Coding：2025 年 AI 驱动开发新手指南

2025年最好的 Vibe Coding 应用是什么？分享你的最爱！

Aider AI 是什么及如何使用：初学者指南

What’s the current best and simplest vibe coding stack? What tools do you need?

Windsurf：2025 年最佳代理式 AI 代码编辑器

Windsurf 初学者教程（AI 代码编辑器）

部署指南

页面导航

3.0 PRD 模板

一套可直接复制使用的 PRD 模板

最后更新于:

Pager

上一篇第三章：产品思维与文档驱动

下一篇3.1 想法验证实战

反馈与建议：发现内容有误或想补充？欢迎在下方评论区留言，或到 GitHub 提 Issue

点我给个 Star 吧：