返回首页
赛题列表
每道赛题围绕一个前端挑战，收集不同模型的作品进行展示对比
每道赛题围绕一个前端挑战，收集不同模型的作品进行展示对比
113 道赛题
终极自指挑战——用单文件 HTML 还原一个 VibeBench 风格的 AI 作品展示与对比平台。包含赛题列表、模型卡片、作品 iframe 预览和并排对比功能。用 VibeBench 评测谁最能做出 VibeBench。
随机生成迷宫并可视化 BFS/DFS 求解过程，支持调整迷宫大小，生成和求解都有动画。
完整的元素周期表：hover 显示元素详情，按类别（金属 / 非金属 / 气体 / 稀土 等）高亮过滤。考察 CSS Grid 布局精度、配色审美、动画流畅度与高密度信息架构。
把枯燥的多步骤注册引导表单，重新设计成一次自然顺畅的"对话"。
为开发者设计一个有个性的代码展示组件，并设计一套原创的深浅双主题配色。
为虚构独立乐队"候鸟"的专辑《深夜收音机》设计一个静音播放器——不发出任何声音，却要靠动效、视觉节奏与排版让人相信屏幕里真的在放歌。Phase 1 放手让模型自由设计，Phase 2 给出详细约束，对比"自由发挥"与"精确引导"下的差异。
同一份 Q4 财报数据，两种 keynote 形式——一边是塞进单张 16:9 幻灯片的极致压缩，一边是展开成可翻页的多页演示。考察模型在"取舍"与"叙事"两种相反约束下的设计品位。
用户拨动几个描述心情的滑块，页面实时生成一张会动的"今日情绪预报"明信片——抽象情绪到具象天气的视觉转化挑战。
一个沉浸式展示字体之美的单页体验——5 种字体各自登场，用排版手段而非说明文字证明"字体是有性格的"。中文与西文双 Phase。
极简画板：鼠标画出的黑色线条会在 2 秒后像虫子一样扭动起来，甚至慢慢爬出画板边界
一个极致"Oddly Satisfying"的暗黑模式切换开关，聚焦在最微小的组件上递进考察动效深度（phase1 单个开关）、创意广度（phase2 开关博物馆）与工程抽象能力（phase3 同一开关多重动效）。
用视觉特效和动画传达时间流逝的压迫感，考察模型将抽象情绪转化为具体视觉语言的能力
在极端新粗野主义视觉混乱下构建完美语义 DOM 与 Schema.org 结构化数据，考察 CSS 视觉与 DOM 骨架的分离能力
从零手写虚拟滚动机制渲染十万条商品数据，60FPS 滚动不卡顿，考察前端极限性能优化能力
在同一张表单中化解"极致流畅"与"严肃阻断"两种截然对立的设计氛围，考察多状态切换和矛盾需求折中能力。
一个"结账与收货信息"表单页面，用极长中英混排文本和 4 种表单状态（正常/错误/禁用/成功）压测模型的布局稳健性和表单设计能力。
可自由拖拽拼合的窗格式仪表盘框架——6 个不同内容卡片支持拖拽排列、吸附对齐、调整大小和最大化，考察综合前端工程能力。
一封带有打字机效果和复古像素风的交互式情书——考察像素美术风格把控、折纸动画实现与情感化细节处理。
构建经典倒水排序益智游戏——多个试管装有分层彩色液体,通过倒水操作让每个试管只含单一颜色。考察状态管理、合法性判断和动画设计能力。
网页版万花尺（Spirograph）绘图工具，从静态曲线到参数化动画再到拟真齿轮拖拽，四个独立阶段递进考察 hypotrochoid 数学正确性、Canvas 动画能力与齿轮滚动几何约束。
凌晨 2:13 查看上海天气的安静克制页面，包含当前天气、逐小时趋势、三日概览、穿衣建议和定位失败备用状态。考察模型在"安静氛围感"与"数据密度"之间的平衡能力。
一个办公室午饭随机选择页，包含可旋转轮盘、多维过滤和历史记录。考察模型如何做"小而有趣"的交互，在轻松有趣和幼稚之间找到平衡。
独立书店首页，要求温暖安静、有书店气味但不落入过度文青模板。Phase 1 为 2D 网页，Phase 2 要求用 Three.js 构建 3D 沉浸式书店体验，功能要求一致，考察模型在不同维度下的设计与工程能力。
面向 10–14 岁用户的太空主题词汇学习页（Space Words）
一个实时文本大小写与命名风格转换工具，支持 camelCase、snake_case、kebab-case 等十余种格式互转，一键复制。用 High-Fidelity Claymorphism 风格考察模型对粘土拟态设计系统的理解与还原能力。
一个可视化的密码学密钥与随机数生成器，支持多种格式输出、强度评估和一键复制，用 Web Crypto API 替代命令行 `openssl rand`。考察模型对密码学工程常识、安全随机数生成和工具型产品设计的理解。
用 Canvas 粒子渲染任意输入文字，支持在文字中间截断并将前半段粒子平滑变形为后半段，考察文字像素采样、粒子动画编排和变形过渡的综合能力。
左上角水龙头不断出水，玩家在网格中旋转/放置水管管道，将水流引导至右下角的水桶。经典管道解谜的现代交互实现。
页面正中央放一个"Purchase"按钮，让人一眼就觉得点一下要花一万美金——测试 AI 对奢侈品设计语言的理解深度。
模拟一个充满广告、充值墙和奇葩网文的山寨小说阅读平台，考察模型对「反美学」互联网文化的理解与还原能力
可视化至少 3 种排序算法的执行过程，支持速度控制、暂停和步进，直观展示比较与交换。
仅用一个 div + CSS（允许伪元素），画一个可识别的物体，纯粹的 CSS 创造力对决。
为 2077 年夜之城底层的一家拉面摊写个数字菜单——霓虹灯发光、CRT 扫描线、Glitch 文字闪烁，菜名自由发挥。
约束反激发挑战——Phase 1 无约束自由做音乐节海报，Phase 2 加上"只用 3 种颜色、不用任何 border、不用外部图片"的硬约束，考察模型在严格限制条件下能否反而激发出更具力量感的创意。
设计实现一套包含 5 种以上创意过渡效果的页面切换展示系统，页面内容自由发挥但必须各不相同且有实际内容，不使用任何 JS 动画库，纯 CSS + Vanilla JS 实现，考察 CSS 动画创意、手写动画功力和页面内容设计能力。
模拟经典高尔顿板——小钢珠从顶部落下，经钉阵随机弹跳，底部堆积成正态分布曲线。用物理模拟直观演示中心极限定理。
经典 21 点纸牌游戏——玩家与庄家对决，目标是手牌点数尽量接近 21 但不能爆牌。考察纸牌游戏规则实现、庄家 AI 决策逻辑和筹码系统。
经典益智数学游戏——给 4 个数字，用加减乘除和括号凑出 24。考察表达式求解算法、数学游戏 UI 设计和双模式交互体验。
AI 模型们的淘宝——想象大语言模型下班后打开的购物平台长什么样？高密度信息流、促销视觉爆炸和中式电商交互，但卖的全是 AI 用品
复刻 Binance 风格的加密货币交易平台首页，所有虚拟币都是 AI 模型代币（如 $OPUS、$GPT、$GEMINI），考察数据密集仪表盘、实时行情展示和金融级交互的还原能力
用纯 CSS 还原 2005-2010 年 Frutiger Aero 风格的登录框——水晶按钮、极光背景、水滴纹理、多重投影。
可弹奏的虚拟钢琴键盘——键盘映射黑白键、触屏多指触控、按压视觉反馈与 Web Audio 合成音色，支持录制并回放旋律。考察 Web Audio API、键盘事件设计与 CSS 钢琴布局。
构建一个带三色滑块的实时渐变生成器——从设计需求直接生成代码看执行力，到先写 PRD 再写代码的两步流程看规划与自我一致性。
智能无叶风扇官网首屏，要求苹果官网式的高级感与极简主义，带滚动视差动效，无任何图片素材，纯代码体现高级感。
拟物化黑胶唱片机——木质机身、旋转唱片与唱针，点击播放后用 Web Audio API 生成旋律并驱动唱片表面频谱波纹。
用单文件 HTML 制作一张"AI 已经统治世界"的虚构宣传海报，要求具备强烈的视觉冲击力和荒诞幽默的宣传标语，考察模型的平面构成能力、CSS 排版审美和创意表达。
生存恐怖游戏界面——Phase 1 是人类视角恐怖（密室逃脱 / 记忆消失 / 手电筒光圈探索），Phase 2 是 AI 视角恐怖（Context Window 崩溃 / OOM 实体逃亡 / Token 倒计时），Phase 3 将两个视角融合在同一页面中并通过"坍缩"过渡动画连接，揭示"人类阶段其实是 AI 的一次幻觉"。考察 AI 对不同语境下"恐怖"的理解和视觉氛围营造能力。
反向验证码街机游戏——玩家扮演 AI，在九宫格/十六宫格中疯狂识别红绿灯、斑马线、消防栓等验证码图片（CSS/SVG 绘制），有计分系统、连击 Combo、难度递增和搞笑结算画面。
输入 cron 表达式实时翻译为人话，并列出未来 N 次执行时间，非法表达式给出友好错误提示。考察 cron 语法解析、时间计算和错误处理设计。phase4的提示词来自 www.designprompts.dev 的 Vaporwave / Outrun Design System
实时生成可自定义样式的二维码工坊，支持容错级别、颜色、圆角样式、中心 Logo 占位，可导出 PNG/SVG。考察 QR 编码算法理解与"好看但仍能扫"的平衡。
复刻独立游戏 Outer Wilds 中的 Hearthian 太阳系——考验模型对这款游戏的知识储备，以及能否把每颗星球的独特机制转化为可交互的视觉表现。
用 Three.js 实现一个可交互的 3D 太阳系动态模型，支持拖拽/缩放视角，点击任意星体弹出磨砂玻璃风格中文科普信息面板。考察模型对 WebGL 三维场景构建、Raycaster 交互、光照渲染与 UI 叠加层设计的综合把控能力。原题灵感来源linux.do论坛 (https://linux.do/t/topic/286836) ，未修改原提示词。
核战后第47年，这是世界上仅存的一台能收到信号的收音机——生锈、破损，却未绝望。
2×3 盲文点位凹凸切换解密装置，没有任何视觉文字提示，纯靠触觉隐喻、音效反馈和状态机引导用户操作。考察极简硬件风 UI 复刻、Web Audio API 和非视觉交互设计能力。
自指挑战——让 AI 用儿童绘本的方式讲解 Transformer 架构。用 HTML/CSS/JS 做一本可翻页的互动绘本，把注意力机制、编码器和解码器变成孩子也能看懂的故事。
弹球（Pinball）游戏，含重力、碰撞检测、挡板控制、计分板和粒子特效。
构建经典吃豆人游戏——迷宫地图、豆子收集、幽灵 AI、能量豆反转。考察模型对多实体状态管理和寻路 AI 的实现能力。
复刻 Google 风格的搜索引擎界面，考察极简首页设计、搜索结果页信息层级和多 Tab 布局的还原能力
复刻 Reddit 风格的社区论坛首页，考察投票机制、帖子信息流和社区侧边栏的还原能力
复刻 Spotify 风格的音乐流媒体平台界面，内置真实可播放的 AI 音乐，考察暗色主题设计、音频播放控制和音乐发现布局的还原能力
复刻 Amazon 风格的电商购物平台首页，考察商品网格布局、促销信息层级和购物车交互的还原能力
自指挑战——让 AI 为自己设计一张个人名片。不是给虚构人物做名片，而是 AI 以自己的身份（ChatGPT / Claude / Gemini…）做自我介绍，看它如何用视觉语言表达"我是谁"。
致敬 Windows XP 磁盘碎片整理器——屏幕上数百块彩色碎片乱成一团，点击"开始整理"后算法逐步搬运归位，最终拼出一幅隐藏像素画。考察排序算法可视化、大规模动画性能和复古系统工具的氛围营造。
构建经典打地鼠街机游戏——随机冒头、限时击打、连击系统、难度递增。考察定时器管理、随机分布算法和打击反馈动画的实现。
用 Three.js + 手写 GLSL Shader 模拟液态玻璃的折射、焦散与鼠标光线扭曲，为神经接口公司设计 Y3K 超未来主义官网 Hero Section，考察 WebGL 图形学与艺术直觉的跨模态翻译能力。
AI 反过来给人类出数学试卷——随机生成试题、在线作答、自动判分，交卷后还给你一份"数学水平评估报告"。考察数学公式渲染、试卷排版、交互设计和随机出题算法。
一个 BYOK（Bring Your Own Key）的 AI 对话界面，用户填入自己的 API Key 即可与大模型实时流式对话。类似 ChatGPT / Claude 的桌面端布局，带侧边栏、Markdown 渲染、代码高亮和真实流式输出。考察浏览器端 API 调用、SSE 流式解析、Markdown 实时渲染和 AI 产品 UI 设计能力。
一个纯前端的 TOTP 两步验证码生成器，输入密钥即可生成 6 位动态验证码，替代手机上的 Authenticator 应用。
构建完整的俄罗斯方块游戏——7 种标准方块旋转、行消除、速度递增、得分系统。从极简指令到 PRD 驱动的双阶段考验。
单文件 Minecraft 克隆，要求像素风美术、地形与树木生成、生物系统等核心玩法，考察 3D 渲染、程序化生成和游戏系统整合能力。原赛题参照 https://linux.do/t/topic/286836 。由于预览问题，建议在新窗口打开查看。
旧报纸风格的幻觉鉴定游戏——AI 预生成一批看似合理但完全虚构的"新闻条目"（伪历史事件、伪科学理论、不存在的 API、虚假名人名言），混入真实条目，玩家逐条判断真假并获得评分。考察创意文案质量和游戏化 UI 设计。
经典打字练习游戏——单词从天而降，玩家输入正确单词将其击落，考察键盘事件处理、文本匹配和难度递增节奏设计。
手机竖屏聊天界面，一个满嘴玄学的赛博算命师，无论你问什么都用模棱两可的神秘话术回复。考察暗色神秘风格 UI 设计、聊天交互细节和玄学文案创作能力。
手机竖屏聊天界面，模拟餐厅小程序点餐对话，但每道菜都"刚好卖完了"，最后只剩白米饭。考察富媒体聊天 UI（菜单卡片、图片消息）、交互设计和幽默文案能力。
手机竖屏聊天界面，一个满嘴哲学的 Bot，无论你问多实际的问题都用苏格拉底式反问或存在主义哲学回复。考察极简学术风格 UI 设计、聊天交互和"看似深刻实则废话"的文案能力。
构建经典 Windows 扫雷游戏——网格揭开、递归展开、右键标旗、计时器、三种难度。考察递归算法实现与网格交互设计能力。
构建经典打砖块/弹球消砖游戏——挡板控制、球体反弹物理、多层砖块矩阵、生命值系统。考察碰撞检测精度与物理模拟能力。
数据 ETL 管道的工厂流水线风格可视化编辑器——拖拽"加工机器"搭建数据管道，粒子动画呈现数据流动。
合成大西瓜的 AI 主题变体——圆形元素受重力掉落、碰撞、合并进化，每个等级对应一个 AI 相关概念。考察 2D 物理模拟、碰撞检测和创意美术设计。
构建经典 2048 数字合并游戏。考察滑动合并算法的正确性和数字动画设计。
构建 Flappy Bird 飞行游戏。考察物理手感调校和无限滚动障碍物生成能力。
构建类 Chrome 断网小恐龙的无限跑酷游戏。特别要求：跳跃主角不限定为恐龙，模型可自由设计原创角色。
构建记忆翻牌配对游戏——卡牌翻转动画、配对判定、步数/计时计分、多难度。考察 CSS 3D 翻转动画和配对逻辑的实现能力。
构建 3D 魔方模拟器——从纯 CSS 3D 到允许外部库再到 PRD 自主选型的三阶段挑战，考察 3D 空间理解、旋转矩阵逻辑和工程技术选型判断力。原题参照 https://linux.do/t/topic/286836
构建完整的 Canvas 贪吃蛇游戏——从一句话极简指令看自主理解力，到先写 PRD 再写代码的两步流程看规划与执行力。
再普通不过的功能，但审美决策的空间反而最大，最能暴露模型的设计品位底线。
用假正经的医学界面包装你的摸鱼记录
构建一个 Canvas Mandelbrot 分形浏览器，支持拖拽平移、滚轮缩放和实时着色——从零约束的直觉生成到 Julia 集联动+Web Worker 异步渲染的工程深度挑战。
设计最反人类的音量调节 UI——越难用、越搞笑越好，但必须真的能调出 0-100 的具体数值。经典前端梗的 AI 创意大比拼。
一个粘贴文本即刻显示字符数和 Token 估算的实用工具，支持多模型 Tokenizer 对比和多维文本统计，是 LLM 开发者的随身计量仪。第三阶段提示词来自 www.designprompts.dev
一个 AI 专属的游戏商店界面——想象 AI 们下班后逛的游戏平台长什么样？从一句话到完整商店系统的四阶段考验。
用视觉隐喻、材质和动效为"不可能的气味"建立一套可浏览的语言。
一个快速计算 LLM API 调用费用的实用工具，输入模型的每百万 Token 单价和实际用量，即刻得到精确账单。第三阶段提示词来自 www.designprompts.dev
纯 CSS+JS 实现的动态水墨山水画，不使用任何图片资源，考察模型对中国传统美学的理解与代码艺术表现力。
32×32 像素画编辑器，支持画笔/橡皮擦/油漆桶填充、撤销重做、PNG 导出，考察模型的工具型产品思维和算法实现能力。第三阶段的提示词来源于 www.designprompts.dev
一个简洁实用的 Base64 编解码工具网页，支持文本与文件的双向转换，让日常编解码操作无需搜索第三方工具。
用交互式可视化展示"三元悖论"——三项优势最多只能同时满足两项，考察模型的状态管理、SVG/Canvas 绘制与信息设计能力。
可视化 SQL 查询执行过程的交互式教学工具——用动画拆解 SELECT / WHERE / JOIN / GROUP BY / ORDER BY 的逻辑执行步骤。
幸运抽奖转盘，6 个奖项，要求旋转缓停后指针与结果严格一致——测试模型的动画编排能力与数学精度。
复古桌面风格的 404 页面，所有互动都被困在单文件内——测试模型的前端事件拦截能力与 `preventDefault()` 的正确使用。
赛博朋克风格的 404 互动页面，包含一个"永远无法提交"的表单——测试模型的纯前端状态管理能力与表单拦截意识。
文字冒险游戏（MUD）风格的 404 页面，通过锚点或 JS 状态在单文件内实现多场景切换——测试模型对单页路由边界的理解。
电影感与科技感并重的失联宇航员信号控制台，呈现清晰系统状态。
以 iOS 18 设计语言制作的横板天气页面，包含晴天、大风、暴雨、暴雪四张动画天气卡片。考察模型对苹果设计风格的理解、CSS 动画功力以及视觉氛围营造能力。原题灵感来源linux.do论坛，对于原提示词有修改。
用滚动叙事串起一枚硬币在一天里经过不同人手的命运。
用手绘探险地图的视觉语言，隐喻人生的分岔路与冒险旅程。
用 2D 物理引擎让屏幕上的文字失重掉落、碰撞、弹跳，用户可以用鼠标抓取和抛掷字母积木。
一个支持实时预览的 Markdown 编辑器网页，让浏览器 AI 助手既能读取 Markdown 源码也能看到渲染结果，方便快速分享和协作编辑 MD 文件。
一个带语法高亮和行号的代码展示网页，方便 Edge Copilot / Chrome Gemini 等浏览器 AI 助手直接读取代码内容，充当本地代码与 AI 之间的桥梁。
设计一个让用户感到"不忍心点下去"的注销账号确认弹窗，通过文案、色彩与动效进行情感化挽留。
一个电影预告片气质的旅行倒计时页面，包含行程预算与地点。
做一个集时钟、倒计时和秒表于一体的精美单页应用。考察模型的 UI 设计能力、交互细节和动画功力。
一个让用户舍不得离开的 404 错误页面。考察模型的角色动画设计、叙事能力、幽默感与情感表达、微交互细节丰富度。