Phase 2 — AI 编程实战

PRD 准备好了，终于开始写代码。打开 Cursor，把 PRD 里的第一个功能描述复制进去，告诉 AI 用什么框架（Next.js / React），它就开始写了。这节课手把手带你完成第一个功能——可能是一个导航栏、一个 Hero Section、或一个联系表单。重点不是代码本身，是你和 AI 的协作流程：描述需求 → AI 写代码 → 你预览效果 → 提出修改 → AI 改。

阅读「交付一个小功能的全流程」章节。自主节奏完成，巩固本节课的知识点。

AI 写的代码跑不通很正常——专业程序员写的代码也天天报错。关键是你怎么把报错信息给 AI。三步法：1）复制完整报错信息（不是截图，是文字）；2）告诉 AI 你在做什么操作时报的错；3）让 AI 解释报错原因再给修复方案。90% 的报错 AI 能一次修好。这节课列出新手最常见的 10 种报错和解决方法。

AI 写的代码不可能一次就对。学会读懂错误日志、识别 AI 常犯的错误模式，以及如何把错误信息精准地喂给 AI 让它自己修复——这才是 Vibe Coding 的核心技能。

学会使用约束来精确控制 AI 输出：长度限制、格式要求、内容边界、风格规定和禁止事项。

阅读「用 AI 做 Debug」章节。自主节奏完成，巩固本节课的知识点。

上节课讲了 Debug 的方法论，这节课实战。讲师故意制造 5 个真实 bug（CSS 样式错位、JS 报 undefined、API 连不上、页面空白、部署失败），现场用 Cursor + AI 一个一个修。你看完整的 Debug 流程：看报错 → 定位问题文件 → 复制给 AI → AI 分析原因 → 给修复代码 → 验证修复。不再怕报错了。

掌握 CoT 提示技术，让 AI 通过分步推理得出更准确、更可靠的答案。

你已经能用 AI 写代码和修 bug 了，但容易写着写着迷路——不知道下一步该做什么。这节课给你一个标准开发流程：1）看 PRD 选下一个功能 → 2）拆成小任务（每个 15-30 分钟）→ 3）一次只做一个任务 → 4）做完 commit → 5）预览检查 → 6）下一个。按这个节奏走，不管多大的项目都不会乱。

阅读「Vibe Coding 思维模型」章节。自主节奏完成，巩固本节课的知识点。

CMS（内容管理系统）是网站后台——管理员用它添加、修改、删除网站上的内容。比如餐厅老板在后台改菜单，前台网站自动更新。这节课用 Cursor + AI 从零搭一个 CMS：管理员登录界面、内容列表、添加/编辑/删除功能。你会第一次体验「后台改数据，前台立刻变」的感觉。

学习如何把设计稿或截图交给 AI，让它生成符合你项目规范的前端代码。掌握指定 UI 框架、约束组件结构、控制响应式行为的指令技巧。

阅读「与 AI 结对编程」章节。自主节奏完成，巩固本节课的知识点。

网页上的按钮、卡片、导航栏、轮播图、表单、弹窗、下拉菜单——这些都是前端组件。这节课介绍 15 个最常用的组件，每个展示长什么样、什么场景用、怎么告诉 AI 生成。以后你说「帮我加一个带图片和标题的卡片列表」，AI 就知道你要什么了。

不是一个页面一个页面写，而是用 AI 一次搭一个完整的多页面官网：首页（Hero + 功能介绍 + 客户评价 + CTA）、关于我们、服务列表、联系我们。这节课讲怎么给 AI 一个完整的网站结构描述，让它一次性生成所有页面的框架，你再逐页调整细节。比一页一页写快 5 倍。

阅读「多文件协作与项目级修改」章节。自主节奏完成，巩固本节课的知识点。

前面搭了前台页面，这节课搭后台系统。后台需要三个核心功能：管理员登录（不能谁都能进后台）、数据列表（展示所有内容）、增删改查（CRUD）。用 Cursor 告诉 AI 你的数据结构（比如服务名称、价格、描述、图片），它帮你生成完整的后台页面。这节课结束后你有一个能登录的后台管理界面。

学习

掌握让 AI 输出合法、稳定、可被程序直接消费的 JSON 数据的技巧。

阅读「前后端协同与 API 生成」章节。自主节奏完成，巩固本节课的知识点。

数据库就是存数据的地方。你的网站需要存用户信息、产品列表、订单记录——这些数据不能写死在代码里，要存在数据库里才能动态更新。这节课讲数据库的最基本概念：表（Table）、行（Row）、列（Column）、主键（ID）。用日常表格类比，5 分钟就能理解。后面的课会用 Supabase 免费搭一个真实数据库。

阅读「数据与知识库协作」章节。自主节奏完成，巩固本节课的知识点。

用户注册、登录、忘记密码、修改个人信息——几乎每个网站都需要用户系统。这节课用 Cursor + AI 实现完整的用户系统：注册表单（邮箱 + 密码）→ 登录验证 → 用户会话管理 → 个人中心页面。AI 帮你处理密码加密、Token 管理这些技术细节，你只需要描述需求和检查效果。

AI 生成的代码能跑不等于安全。学习 AI 代码中最常见的安全问题——硬编码密钥、缺少输入校验、权限漏洞，掌握一份 Security Review 清单来守住底线。

前面分别做了前台页面和后台 CMS，这节课把它们连起来。管理员在后台添加一个 Service（比如「网站设计 $500」），前台官网的服务列表页自动出现这条内容。核心操作：前台调 API → 从数据库读数据 → 渲染到页面。用 Cursor 告诉 AI 数据流向，它帮你写 API 和数据获取代码。

最完整的业务闭环：用户在官网浏览 Service → 选择 → 填写订单信息 → 提交 → 管理员在后台看到这个订单。这节课实现从用户下单到管理员查看的完整流程，包括订单表单、订单列表、订单状态管理。做完这节课，你的网站就不只是展示页面了，它能接单了。

代码写完了，但只在你自己电脑上能看到。部署就是把代码放到互联网上，让所有人通过网址访问。这节课讲部署的三个核心概念：服务器（代码放哪）、域名（网址是什么）、DNS（域名怎么指向服务器）。下节课实操部署，这节先理解原理。

阅读「脚手架与自动化交付」章节。自主节奏完成，巩固本节课的知识点。

Vercel 是最简单的部署平台——连接 GitHub 仓库，点一个按钮，网站就上线了。这节课手把手操作：注册 Vercel → 连接 GitHub → 部署 → 拿到一个 .vercel.app 网址 → 绑定自己的域名（可选）。5 分钟你的网站就在互联网上了。每次 push 代码到 GitHub，Vercel 自动重新部署。

代码写完了不算完，部署上线才是真正的

网站上线了但没人能搜到怎么办？SEO（搜索引擎优化）就是让 Google 把你的网站排在搜索结果前面。这节课讲 SEO 最基本的 5 件事：标题标签（title tag）、描述标签（meta description）、URL 结构、图片 alt 文字、页面加载速度。不需要很深，知道这 5 件事就比 90% 的新网站强。

学习如何用 AI 从非结构化文本中提取结构化数据，掌握 NER、简历解析、合同分析等实用技巧。

阅读「内容创作全景图」章节。自主节奏完成，巩固本节课的知识点。

上节课讲了 SEO 概念，这节课实操。用 AI 帮你做 3 件事：1）检查你网站的 SEO 问题（用 Lighthouse 或 PageSpeed Insights）；2）生成每个页面的 title 和 meta description；3）优化图片和加载速度。做完之后用 Google Search Console 提交你的网站，等 Google 收录。

练习职场三大高频场景：写邮件、写周报、分析数据。每个场景都用 Prompt 公式实战，做完就能直接用在工作里。

阅读「AI 调研、摘要与知识库」章节。自主节奏完成，巩固本节课的知识点。