返回赛题列表
Amazoom
进阶复刻 Amazon 风格的电商购物平台首页，考察商品网格布局、促销信息层级和购物车交互的还原能力
规则说明▼
免责声明： 本赛题为 VibeBench AI 前端代码生成能力评测项目的一部分。页面中所有内容（商品、价格、品牌名等）均为虚构假数据，项目不涉及任何商业行为，不盈利、不收集用户数据。「Amazoom」为戏仿名称，与任何真实公司、品牌或产品无关。如有任何权利方认为不妥，欢迎联系删除。
两阶段挑战，逐步提升指导精度，对比不同 prompt 策略下模型对 Amazon 风格的理解与还原能力：
- Phase 1（简单提示）：一句话描述，考察模型对 Amazon 的固有认知
- Phase 2（详细要求）：给出完整功能与设计规格
Prompt▼
Phase1：▼
制作一个名叫「Amazoom」的电商购物平台首页，参考 Amazon 的布局风格，使用假数据填充内容。单文件 HTML，内联所有 CSS 和 JS。
Phase2：▼
制作一个名叫「Amazoom」的电商购物平台首页，整体参考 Amazon 的布局和交互风格，但需要有自己的品牌个性。单文件 HTML，内联所有 CSS 和 JS。
**页面结构：**
1. **顶部导航栏**（深色背景）
- 左侧：Amazoom Logo（闪电/速度箭头图标 + 品牌名）
- 配送地址显示（📍 配送至 上海）
- 中间：搜索框（左侧带分类下拉：全部 / 电子 / 图书 / 服饰 / 家居）+ 搜索按钮
- 右侧：语言选择、「账户与列表」下拉、「退货与订单」、🛒 购物车（带数字角标）
- 第二行副导航：☰ 全部分类、今日特价、优惠券、新品上市、排行榜
2. **Hero 轮播区**
- 大幅轮播 Banner（3–5 张），用渐变色 + 大字标题模拟促销主题
- 自动轮播 + 左右箭头 + 底部圆点指示器
- 轮播下方半遮挡放 4 张分类推荐卡片
3. **商品推荐区域**
- 多行横向滚动商品行，每行有标题：
- 🔥「今日特价」
- 📦「为你推荐」
- ⭐「好评如潮」
- 🆕「新品速递」
- 每个商品卡片包含：
- 商品图片（1:1 白底，用渐变 + emoji 模拟商品类型）
- 商品标题（2 行截断）
- ⭐ 星级评分（1–5 星，支持半星，如 ⭐⭐⭐⭐☆ 4.2）
- 评价数量（如「1,234 条评价」）
- 价格：大号现价（¥199）+ 删除线原价（~~¥399~~）+ 折扣百分比（-50%）
- 「Amazoom 优选」角标（类似 Amazon's Choice）
- 「加入购物车」按钮
- 至少 16 个商品，内容多样（电子产品、图书、厨具、文具、AI 相关趣味商品等）
4. **分类导航卡片**
- 4 × 2 或 2 × 4 分类卡片网格
- 每张卡片：分类名称 + 代表性商品图标 + 「查看更多」链接
- 分类：电子产品、图书、家居厨具、服饰、运动户外、数码配件、食品饮料、宠物用品
5. **页面底部**
- 「返回顶部」按钮（全宽浅灰条）
- 多列页脚链接（了解我们、赚取收益、付款方式、需要帮助？）
- 最底部：Logo + 语言/地区/货币选择
6. **交互要求**
- 🛒 购物车角标数字随「加入购物车」点击实时增加（+1 弹跳动画）
- 商品卡片 hover：图片轻微放大 + 标题变主题色
- 商品横向滚动行支持左右箭头导航
- 搜索框输入时显示搜索建议下拉（假数据）
- 轮播 Banner 自动播放 + 手动切换
- 星级评分 hover 显示具体分值
7. **设计要求**
- 顶部导航栏使用深色（不要直接用 Amazon 的深蓝灰，设计 Amazoom 自有色调）
- 商品卡片干净白底，信息层级清晰
- 价格的视觉权重要大（大字号 + 红/橙色 + 删除线对比）
- 整体要有电商平台的「信息密集但不混乱」的秩序感
- 促销角标的红色/橙色跳出感