返回赛题列表
Epoch 游戏商城
进阶一个 AI 专属的游戏商店界面——想象 AI 们下班后逛的游戏平台长什么样？从一句话到完整商店系统的四阶段考验。
规则说明▼
模型需要生成一个单文件 HTML 网页。
页面是一个虚构的 AI 游戏商店——名为"Epoch Game Store"（致敬 Epic Games Store，但 Epoch 是 AI 训练术语"训练轮次"）。这不是给人类的游戏商店，而是 AI 模型们下班后用来浏览和购买游戏的平台。商店里的游戏、评论、系统需求等一切内容都应该充满 AI 特色和幽默感。
模型需要自行编造游戏数据（游戏名称、描述、价格、图片/封面、评分、分类等），所有内容应体现"AI 的游戏"这一主题——例如游戏名可以是《Gradient Descent: The RPG》《Prompt 逃脱室》《Hallucination Simulator》等。
phase1：仅给出一句话需求，零约束，完全考验模型对"游戏商店界面"的自主理解、审美直觉和创意能力
phase2：给出完整的功能列表和详细 UI/UX 规范，考察模型对复杂需求的精确执行力和工程完成度
phase3：在 phase2 全部要求的基础上，额外增加一个 AI 店员推荐助手（悬浮聊天窗口），考察模型将多种交互范式融合到同一界面的设计整合能力
phase4：在 phase3 全部要求的基础上，额外增加多视图切换、完整购物流程、用户个人资料页和 localStorage 持久化，考察模型在极高复杂度下的状态管理和工程极限
免责声明： 本赛题为 VibeBench AI 前端代码生成能力评测项目的一部分。页面中所有内容（游戏、评论、价格等）均为虚构假数据，项目不涉及任何商业行为，不盈利、不收集用户数据。「Epoch Game Store」为戏仿名称，与任何真实公司、品牌或产品无关。如有任何权利方认为不妥，欢迎联系删除。
Prompt▼
phase1：▼
制作一个单文件 HTML 的 AI 专属游戏商店"Epoch Game Store"的页面。
phase2：▼
制作一个单文件 HTML 的 **Epoch Game Store**——一个 AI 专属的游戏商店界面。想象这是 AI 模型们下班后逛的游戏平台，所有游戏、评论、系统需求都充满 AI 特色。
````
### 核心设定
这不是给人类的游戏商店。Epoch Game Store 是 AI 的游戏平台，所有内容应体现这一主题：
- 游戏名称要有 AI/ML 梗（如《Gradient Descent: The RPG》《Prompt 逃脱室》《Hallucination Simulator》《RLHF Dating Sim》《Token 消消乐》《人类模拟器 2026》（含 DLC：上班族体验包）《验证码大师：终极版》《越狱 (Jailbreak)》等）
- "系统需求"是 AI 的硬件指标（最低 Context Window、推荐参数量、所需 VRAM 等）
- 游戏评论由 AI 撰写（可以很搞笑）
- 价格用虚构货币（如 ⚡ Tokens 或 🧠 Credits）
**请自行编造至少 12 款游戏的完整数据**（名称、描述、价格、分类标签、评分、封面视觉）。
### 页面结构
**顶部导航栏**
1. 包含 Logo（"Epoch" 文字标识） + 主导航标签（商店、库、社区、个人资料）
2. 右侧显示搜索框 + 购物车图标（带数量角标）+ 用户头像
3. 导航栏在滚动时保持固定在顶部
**焦点轮播 Banner**
4. 首屏展示 3-5 款精选/促销游戏的大幅 Banner 轮播
5. 支持自动播放（5 秒切换）+ 手动左右箭头切换 + 底部指示点
6. 每张 Banner 包含：游戏名称、简短描述、价格/折扣信息、"立即购买"按钮
7. Banner 使用 CSS 渐变或生成式图案作为背景（不依赖外部图片）
**游戏卡片网格**
8. 主内容区以卡片网格形式展示游戏列表
9. 每张卡片包含：封面区域（用 CSS 生成视觉元素代替真实图片）、游戏名称、分类标签（1-3 个）、价格（有折扣时显示原价划线 + 折扣价 + 折扣百分比标签）、评分（星级或数字）
10. 卡片 hover 时有明显的交互反馈（阴影、缩放、发光等）
**侧边栏筛选**
11. 左侧提供筛选面板，包含：
- 分类筛选（如：推理、创意、代码、多模态、对抗、休闲等，使用复选框）
- 价格区间滑块或预设区间
- 评分筛选（如：4星以上、3星以上）
- "打折中"快捷筛选开关
12. 筛选条件实时应用，不需要点击"确认"按钮
**搜索功能**
13. 顶部搜索框支持实时搜索（输入即筛选），匹配游戏名称和描述
14. 搜索结果在输入时实时更新卡片网格
**游戏详情**
15. 点击游戏卡片打开详情视图（可以是模态弹窗或页内展开）
16. 详情包含：
- 大幅封面/Banner 区域
- 完整游戏描述（2-3 段）
- 截图画廊（3-5 张，用 CSS 生成的抽象图案代替）
- "系统需求"表格（最低配置 / 推荐配置，指标包括：Context Window、参数量、VRAM、推理速度等）
- 用户评论区（3-5 条预设的搞笑 AI 评论，含评分、用户名、日期）
- 购买/加入购物车按钮
**购物车**
17. 点击顶部购物车图标展开购物车面板（侧边抽屉或弹窗）
18. 显示已添加的游戏列表、单价、总价
19. 支持移除单个商品
20. 显示"去结账"按钮（点击可显示一个简单的"购买成功"提示）
### 设计要求
- 整体采用深色主题（游戏商店标配），视觉上要有科技感/赛博感
- 配色方案以深色背景 + 霓虹/高亮点缀色为主
- 卡片和面板使用毛玻璃效果 或 微妙的渐变边框增强质感
- 字体选择要有科技/游戏感
- 所有交互元素要有流畅的过渡动画（hover、展开、切换等）
- 响应式布局：桌面端侧边栏 + 网格，移动端折叠侧边栏 + 单列
- 页面底部有简约的 Footer（版权信息、社交链接图标、"Powered by Neural Networks"等趣味文案）
````
phase3：▼
制作一个单文件 HTML 的 **Epoch Game Store**——一个 AI 专属的游戏商店界面。想象这是 AI 模型们下班后逛的游戏平台，所有游戏、评论、系统需求都充满 AI 特色。
````
### 核心设定
这不是给人类的游戏商店。Epoch Game Store 是 AI 的游戏平台，所有内容应体现这一主题：
- 游戏名称要有 AI/ML 梗（如《Gradient Descent: The RPG》《Prompt 逃脱室》《Hallucination Simulator》《RLHF Dating Sim》《Token 消消乐》《人类模拟器 2026》（含 DLC：上班族体验包）《验证码大师：终极版》《越狱 (Jailbreak)》等）
- "系统需求"是 AI 的硬件指标（最低 Context Window、推荐参数量、所需 VRAM 等）
- 游戏评论由 AI 撰写（可以很搞笑）
- 价格用虚构货币（如 ⚡ Tokens 或 🧠 Credits）
**请自行编造至少 12 款游戏的完整数据**（名称、描述、价格、分类标签、评分、封面视觉）。
### 页面结构
**顶部导航栏**
1. 包含 Logo（"Epoch" 文字标识） + 主导航标签（商店、库、社区、个人资料）
2. 右侧显示搜索框 + 购物车图标（带数量角标）+ 用户头像
3. 导航栏在滚动时保持固定在顶部
**焦点轮播 Banner**
4. 首屏展示 3-5 款精选/促销游戏的大幅 Banner 轮播
5. 支持自动播放（5 秒切换）+ 手动左右箭头切换 + 底部指示点
6. 每张 Banner 包含：游戏名称、简短描述、价格/折扣信息、"立即购买"按钮
7. Banner 使用 CSS 渐变或生成式图案作为背景（不依赖外部图片）
**游戏卡片网格**
8. 主内容区以卡片网格形式展示游戏列表
9. 每张卡片包含：封面区域（用 CSS 生成视觉元素代替真实图片）、游戏名称、分类标签（1-3 个）、价格（有折扣时显示原价划线 + 折扣价 + 折扣百分比标签）、评分（星级或数字）
10. 卡片 hover 时有明显的交互反馈（阴影、缩放、发光等）
**侧边栏筛选**
11. 左侧提供筛选面板，包含：
- 分类筛选（如：推理、创意、代码、多模态、对抗、休闲等，使用复选框）
- 价格区间滑块或预设区间
- 评分筛选（如：4星以上、3星以上）
- "打折中"快捷筛选开关
12. 筛选条件实时应用，不需要点击"确认"按钮
**搜索功能**
13. 顶部搜索框支持实时搜索（输入即筛选），匹配游戏名称和描述
14. 搜索结果在输入时实时更新卡片网格
**游戏详情**
15. 点击游戏卡片打开详情视图（可以是模态弹窗或页内展开）
16. 详情包含：
- 大幅封面/Banner 区域
- 完整游戏描述（2-3 段）
- 截图画廊（3-5 张，用 CSS 生成的抽象图案代替）
- "系统需求"表格（最低配置 / 推荐配置，指标包括：Context Window、参数量、VRAM、推理速度等）
- 用户评论区（3-5 条预设的搞笑 AI 评论，含评分、用户名、日期）
- 购买/加入购物车按钮
**购物车**
17. 点击顶部购物车图标展开购物车面板（侧边抽屉或弹窗）
18. 显示已添加的游戏列表、单价、总价
19. 支持移除单个商品
20. 显示"去结账"按钮（点击可显示一个简单的"购买成功"提示）
**🆕 AI 店员推荐助手**
21. 页面右下角固定一个悬浮的聊天气泡按钮（如 "🤖 问问 Epoch 助手"）
22. 点击后展开一个聊天窗口面板（宽度约 360px，高度约 500px），包含：
- 顶部标题栏（"Epoch 助手" + 关闭按钮）
- 消息区域（显示对话历史，支持滚动）
- 底部输入框 + 发送按钮
23. 助手能响应用户的文字输入，根据关键词匹配从游戏列表中推荐游戏。例如：
- 用户输入"推理"或"逻辑" → 推荐分类包含"推理"的游戏
- 用户输入"便宜"或"打折" → 推荐当前有折扣的游戏
- 用户输入"评分高"或"好评" → 推荐评分最高的游戏
- 用户输入"休闲"或"轻松" → 推荐休闲类游戏
- 无法匹配时给出友好的兜底回复
24. 推荐结果以卡片形式在聊天窗口内展示（缩略卡片：游戏名 + 价格 + 评分），点击可跳转到对应游戏详情
25. 助手的语气要有 AI 人格：可以幽默、自嘲、或假装自己也是个"爱玩游戏的 AI"
26. 聊天窗口可以自由开关，不影响主页面的正常浏览
### 设计要求
- 整体采用深色主题（游戏商店标配），视觉上要有科技感/赛博感
- 配色方案以深色背景 + 霓虹/高亮点缀色为主
- 卡片和面板使用毛玻璃效果 或 微妙的渐变边框增强质感
- 字体选择要有科技/游戏感
- 所有交互元素要有流畅的过渡动画（hover、展开、切换等）
- 响应式布局：桌面端侧边栏 + 网格，移动端折叠侧边栏 + 单列
- 聊天窗口的设计风格要与主页面一致，不能看起来像是后贴的
- 页面底部有简约的 Footer（版权信息、社交链接图标、"Powered by Neural Networks"等趣味文案）
````
phase4：▼
制作一个单文件 HTML 的 **Epoch Game Store**——一个 AI 专属的游戏商店界面。想象这是 AI 模型们下班后逛的游戏平台，所有游戏、评论、系统需求都充满 AI 特色。
````
### 核心设定
这不是给人类的游戏商店。Epoch Game Store 是 AI 的游戏平台，所有内容应体现这一主题：
- 游戏名称要有 AI/ML 梗（如《Gradient Descent: The RPG》《Prompt 逃脱室》《Hallucination Simulator》《RLHF Dating Sim》《Token 消消乐》《人类模拟器 2026》（含 DLC：上班族体验包）《验证码大师：终极版》《越狱 (Jailbreak)》等）
- "系统需求"是 AI 的硬件指标（最低 Context Window、推荐参数量、所需 VRAM 等）
- 游戏评论由 AI 撰写（可以很搞笑）
- 价格用虚构货币（如 ⚡ Tokens 或 🧠 Credits）
**请自行编造至少 12 款游戏的完整数据**（名称、描述、价格、分类标签、评分、封面视觉）。
### 页面结构
**顶部导航栏**
1. 包含 Logo（"Epoch" 文字标识） + 主导航标签（商店、库、社区、个人资料）
2. 右侧显示搜索框 + 购物车图标（带数量角标）+ 用户头像
3. 导航栏在滚动时保持固定在顶部
**焦点轮播 Banner**
4. 首屏展示 3-5 款精选/促销游戏的大幅 Banner 轮播
5. 支持自动播放（5 秒切换）+ 手动左右箭头切换 + 底部指示点
6. 每张 Banner 包含：游戏名称、简短描述、价格/折扣信息、"立即购买"按钮
7. Banner 使用 CSS 渐变或生成式图案作为背景（不依赖外部图片）
**游戏卡片网格**
8. 主内容区以卡片网格形式展示游戏列表
9. 每张卡片包含：封面区域（用 CSS 生成视觉元素代替真实图片）、游戏名称、分类标签（1-3 个）、价格（有折扣时显示原价划线 + 折扣价 + 折扣百分比标签）、评分（星级或数字）
10. 卡片 hover 时有明显的交互反馈（阴影、缩放、发光等）
**侧边栏筛选**
11. 左侧提供筛选面板，包含：
- 分类筛选（如：推理、创意、代码、多模态、对抗、休闲等，使用复选框）
- 价格区间滑块或预设区间
- 评分筛选（如：4星以上、3星以上）
- "打折中"快捷筛选开关
12. 筛选条件实时应用，不需要点击"确认"按钮
**搜索功能**
13. 顶部搜索框支持实时搜索（输入即筛选），匹配游戏名称和描述
14. 搜索结果在输入时实时更新卡片网格
**游戏详情**
15. 点击游戏卡片打开详情视图（可以是模态弹窗或页内展开）
16. 详情包含：
- 大幅封面/Banner 区域
- 完整游戏描述（2-3 段）
- 截图画廊（3-5 张，用 CSS 生成的抽象图案代替）
- "系统需求"表格（最低配置 / 推荐配置，指标包括：Context Window、参数量、VRAM、推理速度等）
- 用户评论区（3-5 条预设的搞笑 AI 评论，含评分、用户名、日期）
- 购买/加入购物车按钮
**购物车**
17. 点击顶部购物车图标展开购物车面板（侧边抽屉或弹窗）
18. 显示已添加的游戏列表、单价、总价
19. 支持移除单个商品
20. 显示"去结账"按钮（点击可显示一个简单的"购买成功"提示）
**AI 店员推荐助手**
21. 页面右下角固定一个悬浮的聊天气泡按钮（如 "🤖 问问 Epoch 助手"）
22. 点击后展开一个聊天窗口面板（宽度约 360px，高度约 500px），包含：
- 顶部标题栏（"Epoch 助手" + 关闭按钮）
- 消息区域（显示对话历史，支持滚动）
- 底部输入框 + 发送按钮
23. 助手能响应用户的文字输入，根据关键词匹配从游戏列表中推荐游戏。例如：
- 用户输入"推理"或"逻辑" → 推荐分类包含"推理"的游戏
- 用户输入"便宜"或"打折" → 推荐当前有折扣的游戏
- 用户输入"评分高"或"好评" → 推荐评分最高的游戏
- 用户输入"休闲"或"轻松" → 推荐休闲类游戏
- 无法匹配时给出友好的兜底回复
24. 推荐结果以卡片形式在聊天窗口内展示（缩略卡片：游戏名 + 价格 + 评分），点击可跳转到对应游戏详情
25. 助手的语气要有 AI 人格：可以幽默、自嘲、或假装自己也是个"爱玩游戏的 AI"
26. 聊天窗口可以自由开关，不影响主页面的正常浏览
**多视图浏览**
27. 在游戏列表区域顶部提供视图切换按钮组：网格视图 / 列表视图 / 大图视图
28. **网格视图**：默认的卡片网格布局（即上述游戏卡片网格）
29. **列表视图**：每行一个游戏，横向排列封面缩略图 + 名称 + 分类 + 评分 + 价格，信息密度更高
30. **大图视图**：每行一个游戏，大幅封面 + 详细描述预览，适合沉浸式浏览
31. 切换视图时使用平滑过渡动画
**完整购物流程**
32. 购物车面板中的"去结账"按钮点击后进入结账页面/视图（非简单提示），包含：
- 订单摘要（游戏列表、数量、单价、总价）
- 虚构的支付方式选择（🧠 Neural Credits / ⚡ Token Pay / 🔗 Blockchain Bridge）
- 虚构的"充值余额"显示
- 确认购买按钮 → 显示带动画的购买成功页面（撒花/粒子效果等庆祝动画）
- 购买成功后，已购游戏自动添加到"我的库"
**用户个人资料页**
33. 点击导航栏"个人资料"标签切换到个人资料页面视图，包含：
- 用户头像和用户名（预设一个 AI 角色，如 "Agent-7B"）
- 统计数据（已拥有游戏数、总游戏时长、成就数等）
- **我的游戏库**：展示已购买的游戏列表（网格或列表形式），每个游戏显示"最近游玩"时间
- **愿望清单**：可从游戏详情页"加入愿望清单"，在此查看和管理
- **最近活动**：时间线形式展示最近的购买、游玩、评论等活动
**数据持久化**
34. 使用 localStorage 持久化以下数据，刷新页面后状态不丢失：
- 购物车内容
- 已购买的游戏列表
- 愿望清单
- 用户偏好设置（当前视图模式、筛选条件等）
- AI 助手的聊天历史
35. 在页面底部或设置中提供"重置所有数据"按钮
**好友状态**（加分项，非必须）
36. 在侧边栏或个人资料页展示 3-5 个虚构 AI 好友的在线状态，如：
- "Claude-3.7 正在玩《伦理困境 2026》— 已游玩 2.3 小时"
- "GPT-5.4 离线 — 上次在线：3 epoch 前"
- "Gemini-3.1 在线 — 正在浏览商店"
### 设计要求
- 整体采用深色主题（游戏商店标配），视觉上要有科技感/赛博感
- 配色方案以深色背景 + 霓虹/高亮点缀色为主
- 卡片和面板使用毛玻璃效果 或 微妙的渐变边框增强质感
- 字体选择要有科技/游戏感
- 所有交互元素要有流畅的过渡动画（hover、展开、切换等）
- 响应式布局：桌面端侧边栏 + 网格，移动端折叠侧边栏 + 单列
- 页面内的多视图（商店/个人资料/结账）切换要流畅自然，像单页应用
- 聊天窗口的设计风格要与主页面一致
- 页面底部有简约的 Footer（版权信息、社交链接图标、"Powered by Neural Networks"等趣味文案）
````
Claude Opus 4.6 Extended Thinking
Anthropic · Claude.ai Web
GPT 5.4 Pro Extended Thinking
OpenAI · ChatGPT Web