项目概览

人物：小林，前端爱好者，想把技术笔记整理成博客分享出去目标：做一个支持 Markdown 写作、有评论功能的个人博客用时：约 3 小时（从零到上线） 最终成果：一个带 CMS 的响应式博客网站，部署在 Vercel

用到的 Skills 一览

开始前，先安装本案例会用到的所有 Skill：

# 前端开发
npx skills add busirocket/agents-skills@busirocket-tailwindcss-v4 -g -y

# 部署
npx skills add yonatangross/orchestkit@devops-deployment -g -y

💡 提示：以上命令在终端执行，-g 表示全局安装，-y 表示自动确认。如果某条报错，不影响其他 skill 的使用。

阶段 0：准备工作

需要注册的账号

平台	用途	费用
GitHub	存放代码 + 作为 CMS 后端	免费
Vercel	部署网站	免费

需要安装的工具

工具	用途
VS Code	写代码的编辑器
Node.js	本地开发环境

✅ 全部注册安装完大约需要 10 分钟。

阶段 1：产品定义（写 PRD）

做什么

让 AI 帮你写一份产品需求文档（PRD），把”我想做个技术博客”这个想法变成 AI 能理解的清晰需求。

复制这段提示词给 AI

请帮我写一份产品需求文档（PRD），项目是「小林的技术博客」。

我是一个有编程基础的前端开发者，想用 AI 帮我搭建一个个人技术博客网站。

网站需要：
1. 首页 — 展示最新文章列表，每篇显示标题、摘要、日期、标签
2. 文章详情页 — Markdown 渲染，代码高亮，目录导航
3. 标签分类页 — 按标签筛选文章
4. 关于我页 — 个人介绍 + 社交媒体链接
5. 支持 RSS 订阅

设计风格要简洁、专注阅读体验，类似 Dev.to 或 Medium 的风格。

得到的结果

AI 会生成一份完整的 PRD，包含：

项目背景和目标
目标读者画像
功能清单和优先级
页面结构
技术建议

保存好这份 PRD，后续所有开发都基于它。

阶段 2：设计与原型

做什么

确定博客的视觉风格和页面布局。

🎨 Skill：ui-ux-pro-max

复制这段提示词给 AI

请为我的技术博客推荐设计风格。网站叫「小林的博客」，目标读者是程序员和前端开发者。

要求：
- 风格关键词：简洁、明快、专注阅读、代码友好
- 参考风格：类似 Dev.to、Medium、Vercel 的博客
- 需要 4 个页面的布局建议：
  1. 首页：文章卡片列表，左侧最近文章 + 右侧标签云/关于卡片
  2. 文章详情：宽版正文 + 右侧目录导航
  3. 标签页：标签云 + 对应文章列表
  4. 关于我：个人介绍 + GitHub/Twitter 链接

请给出具体的配色方案、字体建议、每个页面的布局草图。

得到的设计方案

AI 会给出完整的设计方案。关键决策点：

配色：白底深灰字，代码块用深色背景，品牌色用蓝色或紫色点缀
字体：英文用 Inter、中文用 Noto Sans SC、代码用 JetBrains Mono
布局：首页两栏（列表 + 侧边栏）、文章页带右侧 TOC

阶段 3：前端开发（核心）

做什么

让 AI 把设计变成真正的网页。这是最关键的步骤——所有代码都由 AI 生成，你只需要复制粘贴。

💻 Skill：tailwindcss-v4

第一步：创建项目

在 VS Code 中打开一个文件夹，使用 Astro 创建项目：

# 在终端执行
npm create astro@latest lin-blog -- --template basics
cd lin-blog
npm install

不会操作？把这段提示词给 AI：

我是一个编程初学者，请一步一步教我在终端中执行以上命令创建 Astro 项目。每一步说清楚输入什么、会看到什么。

第二步：生成博客首页

请帮我生成一个技术博客的首页（index.astro）。

网站名：小林的博客
风格：简洁、明快、专注阅读

首页包含：
1. 顶部导航栏：Logo「小林博客」+ 导航链接（首页 / 标签 / 关于 / RSS）
2. 主体区域：两栏布局
   - 主栏：文章卡片列表，每张卡片包含：
     - 文章标题（h2）
     - 发布日期（小字灰色）
     - 标签（蓝色小圆角标签）
     - 摘要（2-3 行描述）
     - 阅读时长估算（如 "5 分钟阅读"）
   - 侧边栏：个人简介卡片 + 标签云（热门标签列表）
3. 页脚：版权信息 + GitHub/Twitter 链接

要求：
- 使用 Tailwind CSS 样式（不用额外 CSS 文件）
- 响应式：桌面两栏、手机单栏
- 文章数据先使用模拟数据（硬编码一个数组）
- 使用 Astro 的 `Astro.glob()` 或静态数据
- 代码要加中文注释

第三步：生成文章详情页

请帮我生成技术博客的文章详情页。使用 Astro 的动态路由 `src/pages/blog/[slug].astro`。

页面包含：
1. 导航栏和页脚与首页保持一致
2. 文章头部：
   - 标题（h1）
   - 发布日期
   - 标签列表
   - 估算阅读时间
3. 正文区域（用 Markdown / MDX 渲染）：
   - 标题层级用不同字号
   - 代码块用深色背景，带行号
   - 行内代码用浅灰背景
   - 引用块用左侧竖线装饰
   - 图片居中并带圆角
4. 右侧目录导航（根据 h2/h3 自动生成）：
   - 滚动时高亮当前章节
   - 点击平滑滚动到对应位置
5. 文章底部：
   - 上一篇 / 下一篇导航
   - 评论区（Giscus）

要求：
- 代码块要支持复制按钮
- 目录要支持滚动跟随
- 响应式：桌面显示右侧目录，手机端隐藏

第四步：配置 Decap CMS

请帮我在 Astro 项目中集成 Decap CMS（原 Netlify CMS），实现在线写博客的功能。

需要做以下配置：
1. 在 `public/admin/` 目录下创建 `index.html` 和 `config.yml`
2. `config.yml` 配置：
   - 后端用 GitHub 仓库（git-gateway 方式）
   - 文章存储在 `src/content/blog/` 目录
   - 媒体文件存储在 `public/images/` 目录
   - 文章 frontmatter 包含：title, date, description, tags, coverImage
   - 编辑器使用 Markdown
3. 在 GitHub 仓库中安装并配置 Decap CMS 的认证服务
4. 在登录页面添加"写文章"按钮，跳转到 `/admin/`

配置完成后，我可以在浏览器中访问 `https://我的域名/admin`，在网页上写文章，保存后自动提交到 GitHub。

⚠️ Decap CMS 需要 GitHub OAuth 认证。最简单的方案是用 Decap CMS 官方提供的 OAuth 代理，或者用 Vercel 部署时使用 Vercel 的 OAuth 集成。

第五步：接入评论系统（Giscus）

请帮我在博客文章中接入 Giscus 评论系统。

Giscus 是基于 GitHub Discussions 的评论系统，免费、无广告、无需额外数据库。

需要做的：
1. 先说明如何在 GitHub 仓库中启用 Discussions 功能
2. 安装 Giscus GitHub App
3. 生成 giscus 配置（data-repo、data-repo-id 等参数）
4. 创建一个 Giscus 评论组件（React 或 Astro 组件）
5. 在文章详情页底部嵌入该组件

要求：
- 评论框与博客风格一致（简洁、圆角）
- 支持深色模式适配
- 评论数显示在文章卡片上

第六步：生成标签页和关于页

标签页：

请帮我生成博客的标签分类页面（tags.astro）。

功能：
1. 顶部显示所有标签的云图（字号按文章数量大小变化）
2. 点击标签后筛选显示该标签下的文章列表
3. 文章卡片格式与首页一致
4. 显示每个标签的文章数量

关于页：

请帮我生成博客的关于我页面（about.astro）。

内容：
1. 个人头像（圆形，用占位图）
2. 自我介绍文案
3. 技术栈列表（图标 + 名称）
4. 社交媒体链接：GitHub、Twitter、掘金
5. 统计信息：文章数 / 总阅读时间 / 标签数

第七步：配置 RSS 订阅

请帮我的 Astro 博客添加 RSS 订阅功能。

要求：
1. 安装 `@astrojs/rss` 包
2. 创建 `src/pages/rss.xml.js` 路由
3. 从内容集合中获取文章列表生成 RSS feed
4. feed 包含每篇文章的完整描述或摘要、发布日期、链接
5. 在首页头部添加 RSS 订阅链接，显示 RSS 图标

阶段 4：后端与数据

做什么

博客不需要传统后端，Decap CMS 负责内容管理，Giscus 负责评论——两者都是第三方服务。

数据流总结

你在 CMS 写文章 → 保存到 GitHub → Vercel 自动重新部署 → 网站更新
读者评论 → Giscus → 存到 GitHub Discussions → 自动显示在文章下

阶段 5：测试

做什么

检查博客能不能正常工作。

🧪 Skill：javascript-testing

检查清单

把以下内容复制给 AI：

请帮我检查博客是否完整。逐项确认：

功能测试：
- [ ] 首页文章列表是否正常显示
- [ ] 文章详情页内容是否正确渲染
- [ ] 代码块是否显示并支持复制
- [ ] 目录导航是否能滚动跟随
- [ ] 标签筛选是否能正确过滤文章
- [ ] RSS 订阅链接是否有效
- [ ] 手机端菜单是否正常

CMS 测试：
- [ ] `/admin` 页面是否能正常加载
- [ ] 能否在 CMS 中创建新文章
- [ ] 新建文章后网站是否自动更新
- [ ] 图片上传是否正常

评论测试：
- [ ] Giscus 评论区是否正常加载
- [ ] 能否用 GitHub 账号登录评论

常见问题及修复

问题	修复方法
文章 404 找不到	检查 `[slug].astro` 中的 `getStaticPaths()` 是否正确返回所有路径
CMS 无法登录	检查 OAuth 配置和 GitHub 仓库权限
评论不显示	确认 Giscus 配置中 `data-repo-id` 和 `data-category-id` 正确
RSS 内容为空	检查 RSS 路由中的文章查询逻辑
构建报错	在终端执行 `npm run build` 查看具体错误信息

阶段 6：部署上线

做什么

把博客部署到互联网上。

🚀 Skill：devops-deployment

方法一：用 Vercel（推荐，5 分钟）

我是一个编程初学者，请手把手教我用 Vercel 部署一个 Astro 博客。

我的情况：
- 代码在本地电脑的 lin-blog 文件夹中
- 已经注册了 GitHub 账号
- 没有用过命令行

请教我：
1. 如何在 GitHub 上创建仓库并上传代码（每一步点哪里）
2. 如何在 Vercel 上导入这个 GitHub 仓库
3. 如何配置 Decap CMS 的 OAuth 认证
4. 部署完成后如何更新博客（在 CMS 中写文章）

方法二：用 Netlify（同样免费）

Netlify 对 Decap CMS 有原生支持，配置更简单。直接把项目拖拽到 Netlify 即可。

✅ 部署完成后，你会得到一个 https://xxx.vercel.app 的链接，可以直接分享给别人看。

阶段 7：运维与监控

做什么

确保博客稳定运行。

配置 Vercel 监控

登录 Vercel 控制台
进入项目 → Analytics → 开启 Web Analytics（免费）
查看访问量、页面停留时间、来源等数据

日常维护

每周花 5 分钟做这些事：
1. 打开网站检查所有页面是否正常
2. 查看评论区是否有新留言
3. 检查 Vercel 部署日志确认构建正常
4. 至少写一篇新文章保持更新

阶段 8：运营与增长

做什么

让更多人看到你的博客文章。

📈 Skill：不需要额外 skill

SEO 优化提示词

请帮我优化博客的 SEO。

要求：
1. 帮我检查并优化每篇文章的 title 和 meta description
2. 建议每篇文章的目标关键词（基于文章内容）
3. 帮我在首页添加 BlogPosting 结构化数据
4. 建议文章的 URL 结构规范
5. 优化图片的 alt 文本
6. 添加 canonical URL 防止重复内容

内容推广清单

平台	做什么
掘金	同步发布文章，末尾加「本文首发于我的博客」链接
SegmentFault	发布技术文章，带博客链接
知乎	在相关问题下回答，引用博客文章
Twitter/X	分享文章链接 + 要点总结
微信公众号	同步发布，文末引导访问博客

阶段 9：文案优化

做什么

用 AI 优化博客文案，让文章更吸引读者。

✍️ Skill：不需要额外 skill

文章标题优化

请帮我的博客文章优化标题。以下是我的文章标题列表：

[在这里粘贴你的文章标题]

请帮我：
1. 分析每个标题是否足够吸引人
2. 提供 2-3 个优化版本
3. 指出哪些标题过于技术化（对初学者不友好）
4. 建议标题中的关键词布局

参考优秀技术博客的标题风格：简洁、有信息量、暗示读者能学到什么。

文章开头模板

请为我写 3 个博客文章的开头模板，分别是：

1. 教程类：「手把手教你 X」—— 适合步骤式教学
2. 分享类：「我为什么选择 X」—— 适合经验分享
3. 总结类：「X 个你必须知道的 Y」—— 适合清单式文章

每个模板包含 2-3 个示例开头段落。风格要求：亲切、专业、让读者想继续读下去。

完整项目文件清单

项目最终的文件结构如下：

lin-blog/
├── src/
│   ├── content/
│   │   └── blog/              # MDX 文章存在这里
│   │       ├── my-first-post.mdx
│   │       └── ...
│   ├── layouts/
│   │   └── BlogLayout.astro   # 文章布局模板
│   ├── pages/
│   │   ├── index.astro        # 首页
│   │   ├── blog/
│   │   │   └── [slug].astro   # 文章详情
│   │   ├── tags.astro         # 标签页
│   │   ├── about.astro        # 关于我
│   │   └── rss.xml.js         # RSS 订阅
│   ├── components/
│   │   ├── BlogCard.astro     # 文章卡片
│   │   ├── TagCloud.astro     # 标签云
│   │   ├── TOC.astro          # 目录导航
│   │   └── Giscus.astro       # 评论组件
│   └── styles/
│       └── blog.css           # 博客特有样式
├── public/
│   ├── admin/                 # Decap CMS
│   │   ├── index.html
│   │   └── config.yml
│   └── images/                # 上传的图片
├── astro.config.mjs
└── package.json

🎉 恭喜！ 你已经用 Vibe Coding 做出了一个完整的个人技术博客。整个过程你不需要手写代码，只需要：

用自然语言告诉 AI 你想要什么

复制 AI 生成的代码

配置好 CMS 和评论系统

部署到 Vercel

以后写文章直接在浏览器中打开 /admin 即可，和写 Word 文档一样简单。

进阶挑战

做完了基础版？试试这些进阶功能：

添加深色/浅色模式切换
添加文章搜索功能（Pagefind）
添加阅读进度条
添加文章浏览量统计（结合 Supabase）
添加 Newsletter 订阅功能
添加多语言支持（中/英）
集成 analytics 统计（Plausible / Umami）
自动生成社交分享卡片（OG Image）

想实现哪个？直接把需求告诉 AI：“请为我的博客添加 [功能名]，风格保持一致”。