返回赛题列表
Readit
复刻 Reddit 风格的社区论坛首页，考察投票机制、帖子信息流和社区侧边栏的还原能力
规则说明▼
> **免责声明：** 本赛题为 VibeBench AI 前端代码生成能力评测项目的一部分。页面中所有内容（帖子、社区、用户等）均为虚构假数据，项目不涉及任何商业行为，不盈利、不收集用户数据。「Readit」为戏仿名称，与任何真实公司、品牌或产品无关。如有任何权利方认为不妥，欢迎联系删除。
三阶段挑战，逐步提升指导精度，对比不同 prompt 策略下模型对 Reddit 风格的理解与还原能力：
- **Phase 1（简单提示）**：简单的描述，考察模型对 Reddit 的固有认知
- **Phase 2（详细要求）**：给出完整功能与设计规格
- **Phase 3（PRD 驱动）**：模型先自行撰写 PRD，再根据 PRD 生成代码
Prompt▼
Phase 1：简单提示▼
制作一个名叫「Readit」的社区论坛首页，参考 Reddit 的布局风格，使用假数据填充内容。单文件 HTML，内联所有 CSS 和 JS。
Phase 2：详细要求▼
制作一个名叫「Readit」的社区论坛首页，整体参考 Reddit 的布局和交互风格，但需要有自己的品牌个性。子社区叫「r/频道名」。单文件 HTML，内联所有 CSS 和 JS。
**页面结构：**
1. **顶部导航栏**
- 左侧：Readit Logo（外星人/机器人吉祥物变体，CSS 绘制或 emoji 代替）
- 中间：搜索框（带「搜索 Readit」占位符）
- 右侧：通知图标、创建帖子按钮、用户头像 + Karma 值下拉
2. **排序标签栏**
- 帖子列表顶部的排序选项：🔥 热门 / 🆕 最新 / ⬆️ 最佳 / 📈 上升中
- 选中态有底部指示条
3. **帖子信息流**（主内容区）
- 每个帖子卡片包含：
- 左侧投票区：⬆ 上票按钮、票数、⬇ 下票按钮（竖向排列）
- 帖子主体：
- 元信息行：r/子社区名 · 发帖人 u/用户名 · 时间（如「5小时前」）
- 帖子标题（加粗，1–2 行）
- 可选预览内容（文字帖显示 2–3 行预览 / 图片帖显示缩略图 / 链接帖显示来源域名）
- Flair 标签（彩色小药丸标签，如「讨论」「搞笑」「新闻」）
- 底部操作栏：💬 评论数 / 🔗 分享 / 💾 收藏 / ⋯ 更多
- 帖子类型混搭：至少 12 个帖子，包含纯文字帖、图片帖、链接帖
- 内容风格：有趣的假子社区（如 r/白日做梦、r/代码段子、r/猫猫哲学、r/AI互助会）
4. **右侧边栏**
- 「社区信息」卡片：社区名、简介、成员数 + 在线人数、创建日期、加入按钮
- 「社区规则」卡片：5 条规则（可折叠）
- 「热门社区」推荐列表：5 个子社区（图标 + 名称 + 成员数）
- 「回到顶部」浮动按钮
5. **交互要求**
- ⬆⬇ 投票按钮可点击切换三态（上票 / 下票 / 未投票），票数实时变化，按钮变色（上票橙、下票蓝）
- 排序标签切换（可复用数据或打乱顺序）
- 帖子卡片 hover 阴影增强
- 加入按钮点击后变为「已加入 ✓」
- 暗色/亮色主题切换
6. **设计要求**
- Readit 的品牌色（不要直接用 Reddit 橙红，做出差异化）
- 卡片式帖子布局（有边框或阴影分割，不要混为一片）
- 投票区的视觉权重要足够（Reddit 标志性左侧投票栏）
- Flair 标签的颜色多样且协调
- 字体层级：子社区名 > 标题 > 预览文 > 元信息
phase3(2 steps)▼
Phase3 Step1：▼
以下是一个设计需求：
「制作一个名叫 Readit 的社区论坛首页，模仿 Reddit 的布局和交互风格，子社区叫 r/ 频道名，使用假数据填充内容。」
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
Phase3 Step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。