返回赛题列表
Spotifly
进阶复刻 Spotify 风格的音乐流媒体平台界面，内置真实可播放的 AI 音乐，考察暗色主题设计、音频播放控制和音乐发现布局的还原能力
规则说明▼
免责声明： 本赛题为 VibeBench AI 前端代码生成能力评测项目的一部分。页面中所有内容（歌曲、专辑、播放列表、歌手等）均为虚构假数据，音频文件由 Producer.ai 的 Lyria 3 Pro 模型生成，不涉及任何真实音乐人或版权作品。项目不涉及任何商业行为，不盈利、不收集用户数据。「Spotifly」为戏仿名称，与任何真实公司、品牌或产品无关。如有任何权利方认为不妥，欢迎联系删除。
四阶段挑战，逐步提升指导精度，对比不同 prompt 策略下模型对 Spotify 风格的理解与还原能力：
- Phase 1（简单提示）：一句话描述，考察模型对 Spotify 的固有认知
- Phase 2（简单提示 + 音频）：同 Phase 1，但提供真实可播放的音频文件，考察模型能否主动集成音频播放
- Phase 3（详细要求）：给出完整功能与设计规格 + 音频文件
Prompt▼
Phase 1：简单提示▼
制作一个名叫「Spotifly」的音乐流媒体平台界面，参考 Spotify 的布局风格，使用假数据填充内容。单文件 HTML，内联所有 CSS 和 JS。
Phase 2：简单提示 + 音频▼
制作一个名叫「Spotifly」的音乐流媒体平台界面，参考 Spotify 的布局风格，使用假数据填充内容。单文件 HTML，内联所有 CSS 和 JS。
以下是 4 首真实可播放的音频文件，请在页面中使用：
1. 「Starlight Fluff」— Synthia Pulseworth —《Pastel Rewind》— 3:01 — https://assets.vibebench.app/Starlight%20Fluff.mp3
2. 「Neon Dreamer」— Pixelbreeze —《Glitch Garden》— 2:43 — https://assets.vibebench.app/Neon%20Dreamer.mp3
3. 「Celestial Dreamer」— Mellowbug —《Foggy Algorithms》— 2:40 — https://assets.vibebench.app/Celestial%20Dreamer.mp3
4. 「Pink Nostalgia」— Drizzlecap —《Tangerine Static》— 2:39 — https://assets.vibebench.app/Pink%20Nostalgia.mp3
Phase 3：详细要求▼
制作一个名叫「Spotifly」的音乐流媒体平台界面，整体参考 Spotify 的布局和交互风格，但需要有自己的品牌个性。单文件 HTML，内联所有 CSS 和 JS。
**可用曲目数据（真实可播放的 MP3，请务必使用）：**
| 歌名 | 歌手 | 专辑 | 风格 | 时长 | 音频 URL |
|------|------|------|------|------|----------|
| Starlight Fluff | Synthia Pulseworth | Pastel Rewind | Dreampop | 3:01 | https://assets.vibebench.app/Starlight%20Fluff.mp3 |
| Neon Dreamer | Pixelbreeze | Glitch Garden | Synthwave | 2:43 | https://assets.vibebench.app/Neon%20Dreamer.mp3 |
| Celestial Dreamer | Mellowbug | Foggy Algorithms | Ambient | 2:40 | https://assets.vibebench.app/Celestial%20Dreamer.mp3 |
| Pink Nostalgia | Drizzlecap | Tangerine Static | Lo-fi | 2:39 | https://assets.vibebench.app/Pink%20Nostalgia.mp3 |
> 以上 4 首歌曲为真实可播放的音频文件，必须用 `<audio>` 元素加载并接入播放控制。页面中的其他播放列表、推荐内容等可使用额外的假数据填充，但底部播放栏必须能播放这 4 首歌。
**页面结构（三段式布局）：**
1. **左侧边栏**（固定宽度，暗色背景）
- 顶部：Spotifly Logo（音符 + 翅膀/蜻蜓图标，CSS 或 SVG 绘制）
- 主导航：🏠 首页、🔍 搜索
- 「你的音乐库」区域：
- 标题行 + 「+」创建播放列表按钮
- 播放列表缩略列表（8–10 个），每个带：小封面图（CSS 渐变绘制）、播放列表名、类型标签（播放列表/专辑/播客）
- 侧边栏底部可有拖拽调宽手柄概念
2. **主内容区域**（可滚动）
- 顶部导航：← → 前进后退按钮、右侧用户头像 + 账户下拉
- 问候区域：根据时间段显示「下午好 ☀️」/ 「晚上好 🌙」+ 6 张快速访问卡片（小横条：封面 + 名称，hover 播放按钮）
- 「最近播放」横向滚动行：
- 卡片：正方形封面图（用 CSS 渐变 / SVG 绘制，丰富多彩）、标题、描述（灰色小字）
- hover 时右下角出现品牌色圆形播放按钮（带阴影浮起动画）
- 「为你打造」推荐行：同样格式的卡片行
- 「热门播放列表」行
- 「新专辑发行」行（包含上述 4 张真实专辑）
- 每行至少 6 张卡片
3. **底部播放控制栏**（全屏宽度固定底部）
- 左侧：当前歌曲信息（小封面图 + 歌曲名 + 歌手名 + ❤️ 收藏按钮）
- 中间：播放控制（🔀 随机 / ⏮ 上一首 / ⏯ 播放暂停 / ⏭ 下一首 / 🔁 循环）+ 进度条（可拖拽，当前时间 / 总时长）
- 右侧：歌词按钮、队列按钮、🔊 音量滑块（可拖拽）+ 全屏按钮
4. **音频播放要求**
- 使用 HTML `<audio>` 元素加载上述 4 首 MP3
- ⏯ 播放/暂停按钮控制真实音频播放
- ⏮ ⏭ 上一首/下一首按钮在 4 首歌之间切换
- 进度条实时反映当前播放进度，可拖拽跳转
- 音量滑块控制真实音量
- 歌曲播放完毕后自动播放下一首
- 底部栏的歌曲信息（封面、歌名、歌手）随切换更新
- 点击主内容区的卡片时，如果对应的是这 4 首歌之一，应开始播放
5. **其他交互要求**
- ❤️ 收藏按钮点击切换（变品牌色）
- 播放列表卡片 hover：背景色微变 + 播放按钮浮出
- 快速访问卡片 hover 变色
- 导航项选中态高亮
6. **设计要求**
- 全黑/深灰主色调（#121212 / #181818 / #282828 层级变化）
- 品牌色使用亮绿以外的差异化荧光色（如电光蓝、荧光紫或翠绿）
- 所有封面图使用 CSS 渐变 / SVG 绘制（丰富多彩，不要灰色占位块，不使用外部图片）
- 圆角卡片 + 微妙悬浮阴影
- 播放控制栏的按钮间距和对齐要精确
- 进度条和音量条的滑轨设计（细线 + 圆形把手 + hover 变粗）
- 字体层级：歌曲名白色 > 歌手名浅灰 > 描述灰色