想象这样一个场景：客户需要你搭建一个轻量级博客系统，支持文章发布、分类管理以及标签检索，界面无需华丽，但代码必须简洁高效，能够在本地顺利运行，并且未来可以方便地集成评论模块。这类需求本质上属于典型的展示型后端结合静态前端，正是Vibe Coding最擅长的实战领域。

打开Cursor Pro，创建一个空文件夹，在Composer（快捷键Cmd+K）中输入以下提示：

“使用Next.js 15 + TypeScript + Tailwind CSS + Markdown文件驱动，构建一个极简技术博客系统。要求：首页展示最新3篇文章的摘要；每篇文章页面支持标题、日期、分类、标签以及正文渲染；所有内容从 /content/posts/ 目录下的 .md 文件自动读取；路由采用App Router；无需数据库，无需登录，纯静态生成。”

大约二十秒后，AI便生成了完整的项目结构——app/layout.tsx、app/page.tsx、app/posts/[slug]/page.tsx、lib/mdx.ts、content/posts/hello-world.md等文件一应俱全。接着运行npm install && npm run dev，在localhost:3000即可直接看到首页效果。

手动补全AI生成代码的关键缺失环节

AI生成的代码往往会遗漏三个关键衔接点，这些步骤必须手动补充：

进入app/posts/[slug]/page.tsx，定位到await getPostBySlug(slug)这一行，手动添加import { getPostBySlug } from '@/lib/mdx'——否则控制台会报错“ReferenceError: getPostBySlug is not defined”，导致页面白屏。

然后检查lib/mdx.ts，确认getPostBySlug函数是否已经生成。如果没有，请手动编写约七行代码：使用fs.readFileSync读取文件，借助gray-matter解析frontmatter，返回title/date/tags/content等字段。如果遗漏这一步，整个文章页面将无法加载。

最后，在content/posts/目录下创建一个test.md文件，严格按照规范编写YAML frontmatter（必须包含标题、日期、分类、标签），否则首页列表将为空——AI不会自动为你生成示例内容文件。

快速添加分类与标签导航功能

有两种实现思路。第一种：利用Cursor的“Refactor with AI”功能，选中app/page.tsx中的posts.map(...)区域，右键选择“Improve code”，然后输入提示：“增加左侧边栏，列出所有出现过的 category 和 tags，点击跳转到对应筛选页面，URL 格式为 /category/{name} 和 /tag/{name}”。AI会自动生成新路由和过滤逻辑。

第二种方法更加轻量：不修改路由，直接在首页底部插入一行标签云。在app/page.tsx末尾添加以下代码：{Array.from(new Set(posts.flatMap(p => p.tags))).map(tag => {tag})}。手动编写只需五秒钟，无需依赖AI。

需要注意的是，如果posts数组中某篇文章的tags字段为undefined，这段代码将会报错。因此，务必确保每篇.md文件的frontmatter中都正确设置了tags: []。

部署前必须完成的三处修改

第一处：打开next.config.js，在module.exports对象中添加output: 'export'——这是启用静态导出的必要条件，否则构建过程会失败。

第二处：删除整个app/api/目录。如果AI顺便生成了无用的API路由，保留它们会导致next export报错“API routes are not supported in export mode”。

第三处：修改package.json中的scripts，将"build": "next build"改为"build": "next build && next export"，并确保输出目录为out/—— 这是Vercel静态托管唯一认可的构建产物目录。