项目概览

人物：小陈，社区运营者，想做一个本地的活动发布和报名平台 目标：用户可注册登录、发布活动、报名参加、评论互动 用时：约 10 小时（从零到上线） 最终成果：一个带实时数据的小型社区平台，部署在 Vercel + Firebase

用到的 Skills 一览

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

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

# 后端
npx skills add aj-geddes/useful-ai-prompts@nodejs-express-server -g -y

# 测试
npx skills add wshobson/agents@javascript-testing-patterns -g -y

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

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

阶段 0：准备工作

需要注册的账号

需要安装的工具

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

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

做什么

让 AI 帮你写一份 PRD，明确社区平台的核心功能。

复制这段提示词给 AI

请帮我写一份产品需求文档（PRD），项目是「城市聚汇——同城活动社区」。

我是一个社区运营者，想做一个本地的活动发布和报名平台。

核心功能：
1. 用户注册登录（邮箱 + Google）
2. 活动发布（标题、描述、时间、地点、人数上限、活动封面）
3. 活动浏览（列表 + 详情，按日期排序）
4. 报名参加 + 取消报名
5. 活动评论（实时更新）
6. 个人中心（我的活动、我的报名）

目标用户是 20-35 岁的城市年轻人，喜欢参加线下活动。

得到的结果

AI 会生成完整的 PRD，包含用户角色、功能列表、页面流程。

阶段 2：技术选型分析

为什么选 Firebase？

选择 Firebase：社区需要实时功能（新活动、评论即时显示），Firestore 的 onSnapshot 一行代码实现实时订阅，对新手最友好。

为什么选 React？

社区应用有大量实时交互（评论、报名状态变化），React 的组件化 + 状态管理最合适。

阶段 3：设计与原型

做什么

确定社区平台的视觉风格和页面布局。

🎨 Skill：ui-ux-pro-max

复制这段提示词给 AI

请为我的同城活动社区推荐设计风格。

品牌名：城市聚汇
目标用户：20-35 岁城市年轻人
风格关键词：活力、年轻、本地化、社交感

需要页面：
1. 首页：活动列表（卡片形式，瀑布流/网格）
2. 活动详情：大图 + 信息 + 报名按钮 + 评论区
3. 发布活动：表单页面（标题/描述/时间/地点/人数上限/封面图）
4. 个人中心：我的活动（发布的和报名的）+ 个人信息编辑
5. 登录/注册页

配色建议：明快活泼的渐变色（橙黄蓝渐变），大圆角卡片，大量留白

阶段 4：数据库构建（Firestore）

做什么

设计社区平台的 Firestore 集合结构，包括活动、评论、报名、用户等数据。

复制这段提示词给 AI

请帮我设计一个同城活动社区平台的 Firestore 数据库结构。

项目名称：城市聚汇
数据库平台：Firebase Firestore（NoSQL）

业务需求：
1. **用户资料**：用户注册后存储昵称、头像、简介
2. **活动发布**：用户可发布活动，包含标题、描述、时间、地点、人数上限、封面图
3. **活动分类**：郊游、运动、学习、聚会、其他
4. **活动报名**：用户可报名参加活动，记录报名状态（已报名/已取消）
5. **活动评论**：用户在活动详情页可评论，评论实时更新
6. **权限控制**：活动组织者可编辑/删除自己的活动，普通用户只能报名和评论

请帮我设计：
1. Firestore 集合（Collection）和文档（Document）结构
2. 每个文档包含的字段和字段类型
3. 子集合的嵌套关系
4. Firestore 安全规则（Rules），确保只有登录用户可写
5. 复合索引（如需按日期排序等）

注意：Firestore 是 NoSQL 数据库，请用文档嵌套子集合的方式来组织评论。

得到的结果

AI 会生成完整的 Firestore 集合结构、安全规则和索引配置。以下是推荐设计：

集合结构

users/{uid}
  ├── name: string
  ├── email: string
  ├── avatar: string
  └── bio: string

events/{eventId}
  ├── title: string
  ├── description: string
  ├── date: timestamp
  ├── endDate: timestamp
  ├── location: string
  ├── locationDetail: string
  ├── coverImage: string
  ├── category: string  （'outing' | 'sports' | 'study' | 'party' | 'other'）
  ├── maxParticipants: number
  ├── currentParticipants: number
  ├── organizerId: string
  ├── organizerName: string
  ├── status: string  （'upcoming' | 'ongoing' | 'ended' | 'cancelled'）
  └── createdAt: timestamp

events/{eventId}/comments/{commentId}
  ├── userId: string
  ├── userName: string
  ├── userAvatar: string
  ├── content: string
  └── createdAt: timestamp

registrations/{regId}
  ├── eventId: string
  ├── userId: string
  ├── userName: string
  ├── status: string  （'registered' | 'cancelled'）
  └── createdAt: timestamp

安全规则（Firestore Rules）

在 Firebase Console → Firestore → Rules 中设置：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 活动：登录用户可写，所有人可读
    match /events/{eventId} {
      allow read: if true;
      allow create: if request.auth != null;
      allow update: if request.auth != null && 
        (request.auth.uid == resource.data.organizerId || 
         request.auth.token.admin == true);
      allow delete: if request.auth != null && 
        request.auth.uid == resource.data.organizerId;
    }

    // 评论：登录用户可创建，所有人可读
    match /events/{eventId}/comments/{commentId} {
      allow read: if true;
      allow create: if request.auth != null;
    }

    // 报名：本人可读自己的，登录用户可报名
    match /registrations/{regId} {
      allow read: if request.auth != null && 
        request.auth.uid == resource.data.userId;
      allow create: if request.auth != null;
    }

    // 用户资料：本人可写，所有人可读公开信息
    match /users/{uid} {
      allow read: if true;
      allow write: if request.auth != null && request.auth.uid == uid;
    }
  }
}

阶段 5：后端搭建

做什么

用 Firebase Cloud Functions 处理后台逻辑。

Cloud Functions

请帮我在 Firebase Cloud Functions 中创建以下函数：

项目初始化：
```bash
npm install -g firebase-tools
firebase init functions

函数 1：onNewRegistration

• 触发：Firestore 中 registrations 集合有写入
• 逻辑：
  • 检查该活动的当前报名人数
  • 如果超过 maxParticipants，自动取消报名
  • 更新 events/{eventId} 的 currentParticipants 计数

函数 2：onEventComplete

• 触发：定时触发（每分钟检查一次）
• 逻辑：
  • 查询所有 events 中 date < now 且 status = ‘upcoming’ 的
  • 自动将状态更新为 ‘ended’
  • 发送通知提醒组织者查看活动反馈

函数 3：onUserRegistration

• 触发：Firebase Auth 新用户创建
• 逻辑：
  • 在 Firestore users/{uid} 中创建用户资料
  • 设置默认的 avatar 和 bio

部署：firebase deploy —only functions

---

## 阶段 6：前端开发（核心）

### 做什么

用 React 搭建社区平台的所有页面。

> 💻 **Skill**：`tailwindcss-v4`

### 第一步：创建项目

```bash
# 使用 Vite 创建 React 项目
npm create vite@latest city-hub -- --template react
cd city-hub
npm install
npm install firebase react-router-dom tailwindcss @tailwindcss/vite

第二步：配置 Firebase

请帮我在 React 项目中配置 Firebase。

1. 在 src/lib/firebase.js 中初始化 Firebase：
   - 使用 Vite 的环境变量（import.meta.env.VITE_FIREBASE_*）
   - 导出 auth、db（firestore）、storage 实例

2. 在 Firebase Console → Project Settings → 一般应用中复制配置信息

3. 在项目根目录创建 .env 文件：
   VITE_FIREBASE_API_KEY=xxx
   VITE_FIREBASE_AUTH_DOMAIN=xxx
   VITE_FIREBASE_PROJECT_ID=xxx
   VITE_FIREBASE_STORAGE_BUCKET=xxx
   VITE_FIREBASE_MESSAGING_SENDER_ID=xxx
   VITE_FIREBASE_APP_ID=xxx

第三步：生成首页（活动列表）

请帮我生成社区平台的首页，展示活动列表。

使用 React + Tailwind CSS + Firebase Firestore。

**首页功能：**
1. 顶部导航栏：Logo「城市聚汇」+ 导航链接 + 用户头像/登录按钮
2. 分类筛选标签（横向滚动）：全部 / 郊游 / 运动 / 学习 / 聚会 / 其他
3. 活动卡片网格（3 列桌面、2 列平板、1 列手机）：
   - 活动封面图
   - 标题
   - 日期和时间（格式：6月15日 周六 14:00）
   - 地点
   - 报名进度条（当前/上限人数）
   - 分类标签
4. 加载态显示骨架屏
5. 空状态：该分类暂无活动 + 建议用户发布活动
6. 使用 Firestore 的 onSnapshot 实现实时更新
7. 新建的活动实时出现在列表中

排序规则：按日期升序，即将开始的活动排前面。已结束的活动自动灰显。

第四步：生成活动详情页

请帮我生成活动详情页。

路由：/events/:eventId

**页面包含：**
1. 活动封面大图
2. 活动标题 + 组织者信息（头像 + 名称）
3. 活动信息卡片：
   - 📅 时间：日期 + 时间段
   - 📍 地点：位置名称 + 地图占位
   - 👥 已报名 / 上限人数
4. 活动描述（多行文本）
5. 报名按钮：
   - 可报名：显示「立即报名」
   - 已报满：显示「名额已满」（灰色禁用）
   - 已报名：显示「已报名」+「取消报名」
   - 自己的活动：显示「编辑活动」
   - 已结束：显示「活动已结束」
6. 报名列表：已报名用户的头像列表
7. 评论区（实时）：
   - 输入框 + 发送按钮
   - 评论列表：头像 + 昵称 + 内容 + 时间
   - 使用 onSnapshot 实时更新
8. 底部固定操作栏（手机端）

所有数据从 Firestore 实时获取。

第五步：生成发布活动页

请帮我生成发布活动页面。

路由：/create

**表单字段：**
1. 活动标题（必填，最多 50 字）
2. 活动封面（图片上传，使用 Firebase Storage）
3. 活动分类（下拉选择：郊游 / 运动 / 学习 / 聚会 / 其他）
4. 活动描述（必填，多行文本）
5. 开始日期时间（必填，日期选择器 + 时间选择器）
6. 结束日期时间（必填）
7. 地点名称（必填）
8. 详细地址（选填）
9. 人数上限（必填，数字输入，最少 2 人）
10. 提交按钮

**提交逻辑：**
- 验证所有必填字段
- 上传封面图到 Firebase Storage
- 创建活动文档在 Firestore events 集合
- 成功后跳转到活动详情页
- 加载中显示提交状态

**编辑活动：**
- 复用同一个页面组件
- 路由：/edit/:eventId
- 预填充已有数据
- 只允许活动组织者编辑

第六步：生成登录和用户系统

请帮我实现社区平台的用户认证功能。

**登录页面 (Login.jsx)：**
1. 邮箱 + 密码登录
2. Google 一键登录按钮
3. 注册切换（注册时额外填写昵称）
4. 密码重置链接
5. 登录成功后跳转到首页

**个人中心页面 (Profile.jsx)：**
1. 用户头像（可点击修改）
2. 昵称 + 简介（可编辑）
3. 选项卡：
   - 我发布的活动
   - 我报名的活动
4. 退出登录按钮

**认证上下文 (AuthContext.jsx)：**
- 使用 React Context 管理用户状态
- onAuthStateChanged 监听登录状态
- 提供 user、login、register、logout 方法
- 保护需要登录的路由（发布活动、个人中心）

阶段 7：测试

做什么

检查社区平台能否正常运行。

🧪 Skill：javascript-testing

检查清单

请帮我检查社区平台是否完整。逐项确认：

功能测试：
- [ ] 用户注册/登录是否正常
- [ ] Google 登录是否正常
- [ ] 活动列表是否按日期排序
- [ ] 分类筛选是否工作
- [ ] 活动详情信息是否正确显示
- [ ] 报名 + 取消报名是否正常
- [ ] 人数上限到达后是否禁止报名
- [ ] 评论发送 + 实时更新是否正常
- [ ] 发布新活动是否成功
- [ ] 自己的活动是否可以编辑
- [ ] 已结束的活动是否正确标识

响应式测试：
- [ ] 桌面、平板、手机显示是否正常
- [ ] 底部操作栏在手机端是否正确

数据安全测试：
- [ ] 未登录用户能否发布活动（应该不能）
- [ ] 普通用户能否编辑别人的活动（应该不能）
- [ ] Firestore Rules 是否生效

常见问题及修复

阶段 8：部署上线

做什么

把社区平台部署到生产环境。

🚀 Skill：devops-deployment

部署步骤

请帮我部署社区平台。

步骤如下：
1. 前端部署到 Vercel：
   - 推送代码到 GitHub
   - 在 Vercel 导入仓库
   - 设置环境变量
   - 部署完成

2. Firebase 部署：
   - firebase deploy --only firestore:rules  （部署安全规则）
   - firebase deploy --only functions       （部署云函数）
   - firebase deploy --only storage:rules   （部署存储规则）

3. 在 Firebase Console 中：
   - Authentication → Settings → Authorized domains 添加 Vercel 域名
   - Firestore → Indexes 添加复合索引（如有需要）

阶段 9：文案优化

做什么

用 AI 优化社区平台文案，提高用户参与度。

文案优化提示词

请帮我的活动社区平台优化以下文案：

1. **活动卡片**：怎么让标题和简介更吸引人？
   - 提供 5 个活动标题写作模板
   - 提供 3 个活动简介开头模板

2. **CTA 文案**：
   - 报名按钮的不同状态文案（已报满、即将开始、已结束）
   - 空状态提示（暂无活动、暂无评论）

3. **通知文案**：
   - 报名成功通知
   - 活动开始前提醒
   - 新评论通知

风格要求：年轻化、活泼、有温度

社区运营建议

请帮我制定社区冷启动运营计划。

平台：同城活动社区
目标城市：先从一个城市开始

请给出：
1. 如何获取第一批 100 个用户
2. 如何让用户发布第一个活动
3. 每周应该组织什么类型的官方活动
4. 用户激励方案（积分、勋章等）
5. 防止"报名了但不来"的机制
6. 活动结束后如何让用户回来

完整项目文件清单

city-hub/
├── src/
│   ├── App.jsx                  # 路由配置
│   ├── main.jsx                 # 入口
│   ├── lib/
│   │   └── firebase.js          # Firebase 配置
│   ├── context/
│   │   └── AuthContext.jsx       # 用户认证上下文
│   ├── pages/
│   │   ├── Home.jsx              # 首页（活动列表）
│   │   ├── EventDetail.jsx       # 活动详情
│   │   ├── CreateEvent.jsx       # 发布/编辑活动
│   │   ├── Profile.jsx           # 个人中心
│   │   └── Login.jsx             # 登录/注册
│   ├── components/
│   │   ├── Nav.jsx               # 导航栏
│   │   ├── EventCard.jsx         # 活动卡片
│   │   ├── CommentSection.jsx    # 评论区
│   │   ├── RegistrationButton.jsx # 报名按钮
│   │   └── SkeletonCard.jsx      # 骨架屏加载
│   └── styles/
│       └── index.css             # Tailwind CSS
├── functions/                    # Cloud Functions
│   ├── index.js
│   └── package.json
├── .env                          # 环境变量
├── firebase.json
├── vite.config.js
├── tailwind.config.js
└── package.json

🎉 恭喜！ 你已经用 Vibe Coding 做出了一个含实时数据的同城活动社区平台。整个过程你只需要：

1. 用自然语言描述功能
2. 配置 Firebase
3. 让 AI 生成所有页面
4. 部署上线

现在你可以邀请朋友来发布活动了！

进阶挑战

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

• 活动分享海报自动生成（Canvas API）
• 活动签到二维码（参与者现场扫码签到）
• 活动评价系统（活动结束后打分）
• 私信功能（参与者之间私聊）
• 活动相册（活动结束后上传照片）
• 订阅日历（一键加入 Google Calendar / 系统日历）
• 智能推荐算法（根据报名历史推荐活动）
• 活动提醒推送（Web Push Notification）
• 管理后台（审核活动、数据统计）

想实现哪个？直接把需求告诉 AI：“请为我的社区添加 [功能名]”