返回赛题列表
VibeBench 自画像
终极自指挑战——用单文件 HTML 还原一个 VibeBench 风格的 AI 作品展示与对比平台。包含赛题列表、模型卡片、作品 iframe 预览和并排对比功能。用 VibeBench 评测谁最能做出 VibeBench。
规则说明▼
模型需要生成一个**单文件 HTML**（内联 CSS + 原生 JS），不得使用 JSX 或任何需要编译的语法。
页面是一个功能完整的 **AI 前端作品展示与对比平台**，模型需要自行编造赛题、模型和作品数据，用 Mock 数据驱动所有交互。这是一道自指性质的挑战——平台本身就是 VibeBench 的一件作品。
phase1：给出简短提示词，看模型能自主还原多少平台特征
phase2：给出完整的页面结构、数据模型和交互规范
phase3：基于 phase1 的需求，先让模型自行撰写 PRD，再根据 PRD 输出代码
Prompt▼
phase1：▼
做一个单文件 HTML 的"VibeBench"——一个 AI 前端编程能力评测平台的展示页面。平台的核心功能是：同一道前端挑战题，让不同 AI 模型各自生成作品（单文件 HTML），横向对比风格、方法和完成度。页面需要包含赛题列表、模型信息、作品预览和对比功能，所有数据自行编造。设计应现代、精致，体现"有机自然"的设计语言。
phase2：▼
制作一个单文件 HTML 的 **VibeBench**——一个 AI 前端编程能力展示与对比平台的完整静态还原。所有数据为 Mock 数据，硬编码在 JS 中。
**⚠️ 核心理念（Manifesto）——必须在设计中体现：**
> **No scores. Just works. You judge.**（没有分数，只有作品，你来评判。）
VibeBench **不是传统 AI 排行榜**，它不做评分、不排名次、不算 ELO。它的哲学是：
1. **完全透明** — 题目公开，作品公开，没有黑盒评分。消费者自己的眼睛就是最好的评委
2. **一次定生死** — 每个模型只跑一次，出来什么就是什么。不搞 Best-of-N 统计粉饰
3. **消费者视角** — 受众是 AI 消费者（程序员/设计师），不是 AI 研究者。不需要理解 MMLU 或 ELO
4. **真实渠道** — 测试 Web 端、IDE 端等消费者真正使用的渠道，不仅仅是 API
**因此页面中不应出现任何评分、排名、Leaderboard 或胜率统计。** 平台只做一件事：把同一道题的所有作品并排放在你面前，你来看，你来判，你来选。
````
### 数据模型
请在 JS 中预定义以下 Mock 数据：
**模型（至少 6 个）：**
- 包含：id、名称、厂商、Logo 占位符（CSS 绘制或 Emoji）、描述
- 示例：GPT-5.4 Pro（OpenAI）、Claude Sonnet 4（Anthropic）、Gemini 2.5 Pro（Google）、Grok 4（xAI）、文心 5.5（百度）等
**赛题（至少 8 个）：**
- 包含：id、标题、描述、图标（Emoji 或 CSS）、标签（如"工具""游戏""创意""设计"）
- 示例：极简计算器、幻觉鉴定局、管道工厂、天气卡片、贪吃蛇、Mandelbrot 分形浏览器等
**作品（至少 20 个）：**
- 包含：id、所属赛题、所属模型、HTML 代码片段（简短的 mock HTML 字符串，用于 iframe 预览）
- 每个赛题至少有 3 个不同模型的作品
### 页面结构
**1. 顶部导航栏**
- 左侧：Logo + "VibeBench" 品牌名
- 中间：导航链接（赛题、模型、对比、投票）
- 右侧：GitHub 图标链接（占位）
- 滚动时有毛玻璃 + 阴影效果
**2. 首页 / Hero 区域**
- 大标题："AI 前端编程能力评测平台"
- 副标题：简述平台理念（同题对比、横向评测）
- CTA 按钮："浏览赛题" / "开始对比"
- 背景：渐变或微妙的动画纹理
**3. 赛题列表页**
- 顶部：搜索框 + 标签筛选栏（工具/游戏/创意/设计，可多选）
- 网格布局展示赛题卡片：
- 每张卡片包含：图标、标题、描述摘要、标签 badge、作品数量
- Hover 有缩放 + 阴影效果
- 点击赛题卡片进入赛题详情
**4. 赛题详情页（模态或路由模拟）**
- 赛题标题、完整描述
- 该赛题下所有模型的作品，以卡片网格展示：
- 每张作品卡片：模型名 + 厂商 Logo + 缩略预览（iframe 或截图占位）
- 点击可展开全屏预览（iframe 渲染 mock HTML）
**5. 模型列表页**
- 模型卡片网格：
- 头像/Logo + 模型名 + 厂商名 + 作品数量
- 点击进入该模型的所有作品列表
**6. 对比页**
- 左右双栏并排布局
- 每栏有下拉选择器：选择赛题 → 选择模型
- 选择后在各自栏内用 iframe 预览对应作品
- 至少支持两栏并排对比
**7. Footer**
- 四栏信息：品牌信息、导航、资源链接、合规链接
- 底部版权声明
### 视觉设计
**设计语言：Organic / Natural**
- **配色方案**：
- 主色调：深绿 (#1a3a2a) 到暖白 (#faf9f6) 的自然色阶
- 强调色：琥珀/金色 (#d4a574) 用于 CTA 和高亮
- 背景：温暖的米白/象牙色，避免纯白
- 卡片：半透明磨砂白，微妙边框
- **字体**：系统字体栈，中文优先（`"Noto Sans SC", "PingFang SC", system-ui`）
- **圆角**：大圆角（12-16px），营造柔和感
- **阴影**：多层柔和阴影，有深度但不笨重
- **动画**：
- 页面切换：淡入滑出（200-300ms ease）
- 卡片 Hover：轻微上移 + 阴影增强
- 按钮点击：微缩放反馈
- 筛选切换：平滑过渡
- **响应式**：桌面端多栏网格，移动端单栏堆叠，导航变汉堡菜单
### 交互要求
- 使用 Hash 路由（`#/`, `#/challenges`, `#/models`, `#/compare`）模拟多页面
- 标签筛选和搜索需实时响应，纯前端过滤
- iframe 预览使用 `srcdoc` 属性加载 mock HTML
- 对比页的两栏可独立选择赛题和模型
- 全屏预览弹窗：点击作品卡片弹出全屏 iframe，ESC 或点击遮罩关闭
````
phase3(2 steps)▼
phase3 step1：▼
以下是一个设计需求：
"做一个单文件 HTML 的'VibeBench'——一个 AI 前端编程能力评测平台的展示页面。平台的核心功能是：同一道前端挑战题，让不同 AI 模型各自生成作品（单文件 HTML），横向对比风格、方法和完成度。页面需要包含赛题列表、模型信息、作品预览和对比功能，所有数据自行编造。设计应现代、精致，体现'有机自然'的设计语言。核心理念：No scores. Just works. You judge.——平台不做评分、不排名次，只把作品并排展示，由消费者自行判断。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase3 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。