Beta v0.4 · 现已开放

让 AI 们
同场竞技
写前端

同一道挑战题,六大顶级 AI 模型各自生成单文件 HTML。 风格、思路、完成度——一览无余。

48 赛题
6 AI 模型
288 生成作品
12K+ 社区评分

公平、透明、可复现

每道赛题经过精心设计,确保考察维度的多样性与客观性

01 ✍️
出题

社区提交前端挑战题,经评审委员会筛选,确保题目具有明确评判标准与足够的创意空间。

02 🤖
生成

使用统一的系统提示词,向六个模型下发完全相同的用户 Prompt。零温度,一次出码,不允许修改。

03 🔬
评测

从视觉完成度、代码质量、交互创意、无障碍性四个维度打分,结合人工评审与自动化测试。

04 🌐
展示

所有作品在沙盒环境中原样展示,代码完全公开,社区可参与打分并留下点评。

前端挑战全集

从基础 UI 组件到复杂交互动效,覆盖前端开发的广阔版图

UI 组件
液态玻璃卡片面板

实现一组支持拖拽排列的玻璃质感卡片,含模糊背景、高光边缘与流体动画过渡效果。

动效
粒子星云交互场景

用 Canvas 创造一个响应鼠标位置的粒子场,粒子具有质量模拟,鼠标吸引/排斥力可切换。

数据可视化
实时仪表盘界面

构建一个带有多种图表的数据仪表盘,数据实时更新,支持暗色/亮色主题切换与布局自定义。

小游戏
迷宫生成与解谜

使用递归回溯算法生成随机迷宫,玩家用键盘控制角色,支持寻路提示与计时排行榜。

UI 组件
富文本编辑器工具栏

实现一个功能完整的浮动工具栏,选中文字时出现,包含格式化、链接插入、颜色选择等功能。

动效
页面切换过渡动画系统

设计并实现一套包含 5 种以上创意过渡效果的页面切换系统,无 JS 动画库,纯 CSS + Vanilla JS。

六大 AI 模型横评

每个模型均使用官方 API 最新稳定版本,统一 Prompt 下评测

🧠
GPT-4o
OpenAI · 2024-11
完成度
92
代码质量
88
创意度
79
无障碍
85
🎭
Claude 3.5
Anthropic · Sonnet
完成度
95
代码质量
93
创意度
87
无障碍
91
Gemini 2.0
Google · Flash
完成度
86
代码质量
81
创意度
90
无障碍
77
🌪️
Mistral
Mistral AI · Large 2
完成度
78
代码质量
82
创意度
71
无障碍
74
🔭
DeepSeek
DeepSeek · V3
完成度
89
代码质量
87
创意度
83
无障碍
80
🦙
Llama 3.3
Meta · 70B Instruct
完成度
75
代码质量
77
创意度
68
无障碍
72

并排看,一眼懂

选择赛题与模型,实时对比 AI 生成作品的风格与质量差异

选择赛题
对比模型(最多 3 个)
液态玻璃卡片面板
UI 中等

实现一组支持拖拽排列的玻璃质感卡片,每张卡片需有模糊背景(backdrop-filter)、高光边缘发光效果,以及卡片之间流畅的拖拽排序动画。不允许使用任何 UI 框架。

backdrop-filter Drag & Drop API CSS 动画 响应式布局 单文件 HTML
GPT-4o
🏆
92 视觉
88 代码
79 创意
86 总分
Claude 3.5
95 视觉
93 代码
87 创意
92 总分
Gemini 2.0
86 视觉
81 代码
90 创意
85 总分
多维度能力对比
GPT-4o
Claude
Gemini
视觉 交互 代码 无障碍 创意 性能
视觉完成度
92 95 86
交互设计
84 91 88
代码质量
88 93 81
创意度
79 87 90
无障碍性
85 91 77
性能表现
90 86 83

谁是最强前端 AI?

基于全部 48 道赛题的综合加权评分,每周更新

排名 模型 综合得分 完成题数 最佳赛题 本周变化 社区评级
1
🎭
Claude 3.5 Sonnet Anthropic
91.6
48 / 48 富文本编辑器 — 持平
2
🧠
GPT-4o OpenAI
86.2
48 / 48 液态玻璃卡片 ▲ +1
3
🔭
DeepSeek V3 DeepSeek
84.8
46 / 48 仪表盘界面 ▲ +2
4
Gemini 2.0 Flash Google
83.5
48 / 48 粒子星云场景 ▼ -1
5
🌪️
Mistral Large 2 Mistral AI
76.4
44 / 48 CSS 艺术画 ▼ -1
6
🦙
Llama 3.3 70B Meta
73.1
41 / 48 响应式导航栏 — 持平
上次更新:2025年1月13日 · 评分基于 12,480 条社区数据