昨天 Deepseek-R1 0528 正式开源。
在 LiveCodeBench 上，它的表现几乎与 OpenAI 的 o3 (high) 相当；在 Aider 的多语言基准测试中，与 Claude Opus 不相上下。
在官网上线的时候藏师傅快速测试了一下前端能力，发现强的离谱，于是就想整个大活。
我用同样的提示词，分别发给 Claude Opus 4、Sonnet 4、Gemini 2.5 Pro 以及 DeepSeek R1-0528，让它们在六个越来越变态的前端开发任务中一决高下。
知道有些朋友等不及，先说结论：
Deepseek-R1-0528 在前端能力上稍逊于 Opus4，彻底超过了 Sonnet 4 以及 Gemini 2.5 Pro。
基本上 Opus 可以完成的任务 R1 都能完成，，甚至 Opus 4 不能完成的 R1 也可以完成，只是完成度和结果质量上稍微差一些。
考虑到 R1 跟这三者的价格差异，这个成绩已经非常邪门了，tmd 无法想象 R2 的质量。
这个测试真的是又费钱又费人， 直接把 POE 额度 Claude 额度还有API 都烧没了，希望各位可以给点个赞或者喜欢，我们开始看案例。
测试 1：仓库管理系统
先来一个昨天跑的比较复杂的效果，我会让这四个模型分别生成一个完整的仓库管理系统，支持商品管理、商品的出库、入库、还有对应的看板。
提示词：请帮我创建一个完整的网页版商品管理工具，具体要求如下：
功能需求
1. 商品管理
- 商品信息录入：商品名称、种类/分类、SKU编号、价格、库存数量
- 商品图片管理：支持图片上传预览（可用文件选择器模拟）
- 商品列表展示：表格形式展示所有商品，支持搜索和筛选
- 商品编辑：支持修改商品信息
- 商品删除：支持删除商品（需确认提示）
2. 库存管理
- 入库操作：增加商品库存数量，记录入库时间和数量
- 出库操作：减少商品库存数量，记录出库时间和数量
- 库存记录：显示每个商品的库存变动历史
3. 界面功能
- 仪表板：显示商品总数、库存总值、低库存预警等统计信息
- 响应式设计：适配桌面和移动设备
- 数据持久化：使用localStorage保存数据
技术要求
样式和图标
- CSS框架：使用 TailwindCSS 3.0+ CDN引入
- 图标库：使用 Heroicons 或 Feather Icons CDN引入
- 字体：使用 Google Fonts
代码结构
- 单页面应用：HTML + CSS + JavaScript
- 模块化设计：将功能分解为不同的JavaScript模块
- 数据格式：使用JSON格式存储商品数据
界面设计要求
- 现代化UI：简洁美观的界面设计
- 颜色方案：使用专业的商务色彩搭配
- 交互反馈：按钮点击、表单验证等交互效果
- 表单验证：必填字段验证、数据格式验证
数据结构示例
请生成完整的HTML文件，包含所有必要的CSS和JavaScript代码，确保功能完整且可以直接在浏览器中运行。
我们来看一下这个测试的结果，其实逻辑挺复杂的，对于模型的上下文长度、审美和逻辑处理能力都是考验。
这个案例上除了 Deepseek 全部翻车了，Claude 4 翻的有点离谱了说实话。
Deepseek-R1-0528：R1 的升级版非常强，你看这个界面非常的专业，而且也可以新建商品，正常执行出库入库，把商品、库存管理、库存报表分了三个页面整体非常清晰，还有一个专门的看板页，他还写了一些假数据方便测试，其他几个模型没数据，添加商品不能用，测试就完全没办法进行了。
Claude Opus 4：上来就拉了坨大的，页面非常简单，采用的是顶部导航的方式，而不是 Saas 平台常见的侧边栏，而且添加商品一点保存就报错，测试没办法进行了。
Claude Sonnet 4：相较于 Opus 4 的界面更加的简陋，而且点击添加商品按钮就没有反应了，都没有展开表单弹窗，那其他的页面自然都是摆设。
Gemini 2.5 Pro：谷歌这个比 Claude 好点，可以添加商品可以运行，但是有 Bug，我第一次试的时候可以，录视频就不行了，不过 Gemini 的交互设计的很复杂，出入库和记录都在一个表格里面，有点难度分。
测试 2：点阵动画编辑器
接下来是一个考验视觉能力的测试，我让他们几个分别用 P5.js 做一个点阵动画的编辑器，支持运动方式、调整点的形状、大小、速度等一堆条件。
提示词：请创建一个基于P5.js的全屏互动点阵动画生成器，满足以下技术需求：
## 核心功能
– 使用P5.js实现全屏点阵动画，动画需覆盖整个视口区域
– 点阵矩阵总面积必须至少是可见区域的10倍，确保即使在最小网格间距下也能完全覆盖
– 提供多种动画模式：波浪(Wave)、脉冲(Pulse)、涟漪(Ripple)、噪声(Noise)
– 支持多种点形状选择：圆形、方形、十字、三角形、菱形等
– 所有控制面板放置在页面右侧，移动设备下可折叠至底部
## 可调节参数
– 点阵密度：控制每行/每列点的数量
– 形状大小：调整点的尺寸
– 动画速度：控制动画效果的速度和幅度
– 网格间距：调整点与点之间的距离
## 技术规范
– 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和P5.js
– 实现完整的深色/浅色模式切换功能，默认跟随系统设置
– 代码需包含性能优化逻辑，仅渲染可见区域内及边缘附近的点
– 动画必须流畅运行，无卡顿
## 响应式设计
– 页面必须在所有设备上（手机、平板、桌面）完美展示
– 移动端视图中，控制面板应可折叠/展开
– 针对不同屏幕尺寸优化布局和字体大小
– 确保移动端有良好的触控体验
## 界面要素
– 动画模式选择器（波浪、脉冲、涟漪、噪声）
– 形状选择器（带图标展示各种形状）
– 滑块控制：密度、大小、速度、间距
– 主题切换按钮
– 显示矩阵覆盖信息和总点数
来看一下结果，说实话，我是没想到这个测试其他模型会这么惨烈的，除了 Deepseek-R1 其他几个模型的动画完全都没办法动。
Deepseek-R1-0528：非常完美，每个按钮和滑块都能正常操作，点整也在正常运动。他甚至给加了点阵的数据，夜间模式切换后颜色也没问题，如果非要挑刺的话就是颜色选择的选中状态有一点点问题，但是这个问题相较于其他几个模型的惨烈表现根本不算问题。
Claude Opus 4：好消息有点阵，坏消息它不动的，右边的内容倒是可以正常操作，但是夜间模式切换后的配色有问题。
Claude Sonnet 4：这个就别说了，相当拉跨，点阵都没有的，甚至连按钮的选中态都没有，滑块只有点，不如用默认组件呢。
Gemini 2.5 Pro：也是报错没有点阵，右侧内容都正常操作，主题切换也没问题，不过用的默认组件美观度差点。
测试 3：图片渐变色提取工具
这个是我之前写过的一个工具，逻辑描述不多，样式描述多一点，主要功能是从图片中提取五组渐变色。
提示词：根据以下文件内容生成一个 HTML 网页，支持给上传的图片提取5组渐变色，用户可以直接复制五组16进制渐变色，需要实现颜色提取功能
1. 使用 网易云音乐 风格的视觉设计，白色色底配合与#FE1110相近的颜色作为高亮
3. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 中英文混用，中文大字体粗体，英文小字作为点缀
4. 简洁的勾线图形化作为数据可视化或者配图元素
5. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
6. 模仿 apple 官网的动效，向下滚动鼠标配合动效
7. 数据可以引用在线的图表组件，样式需要跟主题一致
7. 使用 Framer Motion （通过CDN引入）
7. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
8. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
9. 避免使用emoji作为主要图标
10. 左下角胶囊按钮展示作者的推特，名称为：歸藏，链接为：XXXX
这个案例上 Claude 终于是扬眉吐气正常了，Deepseek-R1-0528 的页面细节和美观度非常厉害，但是没有实现功能，Opus 4 和 Sonnet 4 页面都简陋些，但是起码功能是好的，Gemini 则都不行。
Deepseek-R1-0528：Deepseek 再用上了我的提示词之后页面的美学表现真是没得说，而且他还自己给页面加了很多方便 SEO 的内容，比如应用场景介绍，处理时间等等，渐变色的展示卡片也非常细致，就是没有实现取色逻辑。
Claude Opus 4：这次 Claude 终于没让人失望，完成了页面功能，但页面内容非常简陋，基本只有一个放图片的和结果，而且取色逻辑也很差，但起码能用了。
Claude Sonnet 4：Sonnet 4 也完成了功能，我甚至觉得 Sonnet 的结果比 Opus 还要好一些，当然丰富度上还是没有 Deepseek 强。
Gemini 2.5 Pro：这次是最拉的，不止页面细节和美观度不行，功能也没有实现，启动直接报错。
测试 4：白噪音日签网站
接下来是一个可以播放白噪音的日签网站生成，很适合做新标签页的插件，支持从 Spotify 播放白噪音，网页会展示
提示词：请帮我创建一个简洁优雅的日签网站，具体要求如下：
视觉设计
- 背景图片：使用下面几个图片链接随机获取高质量风景图片作为背景
- 图片链接：XXXX
- 图片处理：添加25% 黑色遮罩，和一点点图片高斯模糊，确保文字清晰可读
- 整体风格：简约现代，风景图作为网页背景增加沉浸感
- 动画框架使用 anime.js （通过CDN引入：JsDelivr jsdelivr.com），使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript，使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
时间显示模块
- 顶部：显示月日格式（如”05月29日”），字体较小，居中
- 次行：显示”星期X · 农历X月初X”格式，字体更小
- 中央：突出显示当天日期数字，超大字体，白色，居中
名言展示模块
- 内容：随机显示中外哲学家、作家的经典名言
- 排版：名言居中显示，字体适中，行间距舒适
- 署名：底部右对齐显示”作家，XXX”或”哲学家，XXX”
- 名言库：包含励志、人生感悟、智慧思考等不同主题的名言
音乐播放功能
- 位置：页面左下角，默认收起
- 内容：嵌入Spotify白噪音播放列表
- 代码：
技术实现
- 响应式设计：适配桌面端和移动端
- 字体选择：使用优雅的中文字体，google font 引入
- 颜色方案：主要使用白色文字，确保在各种背景下的可读性
- 加载优化：图片懒加载，提升页面性能
交互功能
- 自动刷新：每日自动更换背景图和名言
- 手动刷新：提供刷新按钮，允许用户手动更换内容
文案风格
- 名言选择：倾向于积极正面、富有哲理的短句
- 语言风格：简洁有力，避免过于冗长
- 主题分类：人生感悟、励志成长、智慧思考、情感表达等
请按照以上要求，生成一个完整的HTML/CSS/JavaScript网站，确保界面美观、功能完善、用户体验良好。
这个测试其实就纯粹看各个模型对于美学的表现的理解了，这种展示类型的网页一般都能完成。
只能说 Claude Opus 4 在这块还是很权威的，各种细节表现都很好，Gemini 2.5 Pro 也不错，甚至给图片的切换加上了动效，Deepseek 和 Sonnet 4 坐一桌了。
Deepseek-R1-0528：我先跑的 Deepseek，本来以为已经很好了，整体美学上有问题的第一个是左下角的音乐按钮有点扁，然后就是名言的部分，不应该加黑色遮罩，文字的对齐方式也有点怪，不过他也给刷新加了动效。
Claude Opus 4：Opus 4 的这个美学真的无可挑剔，各个字体的大小比例，间距都非常舒服，而且还给名言加上了引号人物名称和引号的透明度还做了处理，就连 Spotify 播放器都套了一个 UI 做了展开收起的动效，太完美了。
Claude Sonnet 4：Sonnet 4 的效果跟 Deepseek 问题很像，音乐播放按钮、文字的大小、对齐方式和间距都可以继续优化。
Gemini 2.5 Pro：Gemini 的效果也不错，如果去掉文字的投影就更好了，它也针对 Spotify 播放器 UI 做了处理，文字细节也没啥问题，切换动效很明显图片有个拉伸的效果。
测试 5：睡眠 APP 页面生成
接下来是移动设备应用的测试，让他们分别写一个睡眠监测应用，提示词中会提出对应的技术栈和设计要求，同时会要求生成多个可交互的页面。
提示词：# 睡眠监测APP开发需求
## 项目概述
请帮我创建一个**完整的睡眠监测APP**，包含4个主要的功能页面，界面需要美观且专业。
## 技术栈要求
### 前端技术
– HTML5 – 页面结构
– TailwindCSS v3.0+ – 样式框架（通过CDN引入）
– JavaScript – 必要的交互逻辑
– Anime.js v4.0.2 – 动画效果库
– CDN: `https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm`
### 图标和图表
– **图标库**: Font Awesome 或 Material Icons（CDN引入）
– **图表组件**: 在线图表组件，样式需与主题保持一致
– **数据可视化**: 支持睡眠数据的图表展示
## 设计要求
### 响应式设计
– 完全响应式布局
– 移动设备优先设计
– 桌面端和移动端都需良好显示
### 交互效果
– **按钮交互**: 悬停时轻微放大效果
– **表单交互**: 输入框聚焦时显示渐变边框
– **卡片交互**: 悬停时阴影加深效果
– **动画效果**: 使用Anime.js实现流畅的页面动画
## 功能页面需求
请生成睡眠监测APP所需的完整页面，包括但不限于：
– 主页/仪表盘
– 睡眠记录页面
– 数据分析页面
– 设置页面
– 其他相关功能页面
## 代码输出要求
– 每个页面为独立的HTML文件
– 代码结构清晰，注释完整
– 确保所有CDN链接可用
– 提供完整可运行的代码
在移动端的逻辑和界面上，Cluade Opus 4 再次展现了他的强大，完成了多个页面逻辑也不错，其他几个模型都只生成了一个页面，不过 Deepseek R1 0528 这次的审美突然在线了，样式美观度做的很好，虽然生成了单个页面但是很完整。
Deepseek-R1-0528：只生成了一个页面，但是整体的审美不错，卡片的细节和图标的处理都很好，整个页面也很完整很长，另外还给导航做了响应式设计，在移动端和桌面端完全不同。
Claude Opus 4：确实强，只有 Opus4 完整生成了全部的页面，不过这次的审美就不太行了，完全是用做网页的逻辑做的，导航的图标小的可怜。
Claude Sonnet 4：只生成了单个页面而且还报错了，页面的审美也不太行，属于将就把任务完成了。
Gemini 2.5 Pro：谷歌每次都跟别人不一样，真的一个页面一个页面生成，给了四个文件，相互之间不能交互，另外页面全部报错，每个页面都只有导航没有内容，这就有点拉了。
测试 6：复杂功能俄罗斯方块
最后还是小游戏测试收尾，我设计了一个比较复杂的俄罗斯方块游戏，有特殊方块，还有主题切换、方块落点预测、方块暂存等一堆功能，可以说是终极考验了。
提示词：请帮我创建一个功能完整、视觉精美的俄罗斯方块网页游戏，要求如下：
核心游戏功能
- 完整的俄罗斯方块机制：7种标准方块（I、O、T、S、Z、J、L）
- 流畅的操作控制：左右移动、旋转、快速下降、瞬间下降
- 智能消除系统：支持1-4行同时消除，有特殊动画效果
- 渐进难度系统：根据消除行数自动提升下降速度和等级
高级功能特性
- 预览系统：显示下一个和下下个方块
- 暂存功能：Hold键暂存当前方块，每轮只能使用一次
- 幽灵方块：半透明显示方块的着陆位置
- 连击系统：连续消除有额外分数加成和视觉特效
- 特殊技能：
- 炸弹方块（清除周围区域）
- 激光消除（清除整行）
- 时间暂停（3秒内方块停止下降）
视觉设计要求
- 现代化UI界面：
- 渐变背景或粒子效果
- 毛玻璃效果的游戏面板
- 流畅的动画过渡
- 响应式设计适配不同屏幕
- 丰富的视觉特效：
- 方块下降和旋转的平滑动画
- 消除时的爆炸或闪光特效
- 连击时的震屏效果
- 等级提升的庆祝动画
- 主题系统：至少3套不同的视觉主题可切换
音效系统
- 完整的音效反馈：移动、旋转、着陆、消除、游戏结束等
- 背景音乐：循环播放的游戏BGM
- 音量控制：可独立调节音效和背景音乐音量
游戏模式
- 经典模式：传统俄罗斯方块玩法
- 限时模式：在规定时间内获得最高分
- 挑战模式：预设障碍物，增加难度
- 禅模式：无时间压力，纯粹享受游戏
数据统计功能
- 实时统计：当前分数、等级、消除行数、游戏时间
- 历史记录：最高分、最佳等级、总游戏时间
- 成就系统：解锁各种游戏成就
- 本地存储：保存游戏记录和设置
技术要求
- 使用纯HTML5/CSS3/JavaScript，无需外部框架
- 代码结构清晰：面向对象编程，模块化设计
- 性能优化：流畅的60FPS动画，无卡顿
- 兼容性：支持主流现代浏览器
- 响应式设计：适配PC和移动设备
用户体验
- 直观的操作说明：内置教程和按键提示
- 暂停/继续功能：随时暂停游戏
- 设置菜单：可调节游戏难度、音效、视觉效果等
- 游戏状态保存：支持中途保存和继续游戏
代码质量要求
- 注释详细：每个函数和重要代码段都要有说明
- 错误处理：完善的异常捕获和处理机制
- 代码优雅：遵循最佳实践，易于理解和维护
- 可扩展性：方便后续添加新功能
请提供完整的HTML文件，包含所有CSS和JavaScript代码，确保可以直接在浏览器中运行。代码要体现出专业的编程水平和对游戏开发的深度理解。
在小游戏上 Claude 是有东西在的，不管是 Opus 还是 Sonnet 都按照要求生成了对应的俄罗斯方块，特别是特殊方块这个逻辑，Deepseek搞定了 Claude 都忽略了的主题，但是落掉了特殊方块，Gemini 2.5 Pro 就惨了生成的不能玩。
Deepseek-R1-0528：非常好中规中矩的完成了任务，但是丢掉了特殊方块的设计，干脆就没做，可能是提示词遵循的问题，整个网页更像游戏的界面所有的按钮都像正常的组件。
Claude Opus 4：完成了特殊方块的逻辑其他逻辑也没问题，但是忽略了主题切换这个提示词，他没做，相较于 DeepSeek 的问题要小一些，但是界面是写死的完全没有响应式逻辑，比例稍微不对几个按钮就点不到了。
Claude Sonnet 4：跟 Opus 类似，甚至我觉得 Sonnet 4 完成的比 Opus 要更好，页面的适配度也不错，这个感觉是Sonnet赢了，所有需要做的功能他都做了。
Gemini 2.5 Pro：涉及到复杂逻辑 Gemini 几乎每次都拉跨，这次是完全没办法玩，因为砖块的落点有 Bug 完全看到不会落在哪里，垫底。
看到这里，我想你已经和我一样，被 DeepSeek-R1 的表现整麻了。
很难想象这只是一个小的模型升级带来的提升，再来看看跟 DeepSeek R1 0528 对比的这几个模型的价格。
Opus 4 是他的 30 倍，我这还是用的 Openrouter 的价格算的，要是算官方会更离谱。
作为一个每天都在和各种 AI 消息打交道的人，我见证了太多”突破性进展”最后变成”差强人意”的故事。但这次不一样，DeepSeek-R1 让我看到了真正的希望。
30倍的价格差距，却能达到几乎相当的效果。
我们不再需要为了使用最好的 AI 编程模型付出天价，不再需要在成本和质量之间做痛苦的取舍。更让人感动的是，这是我们自己的模型。
这句话是 AI 给我写的，我觉得很好：真正的革命，往往始于让普通人也能触及星辰。
再次重复一下，这个测试真的是又费钱又费人，如果对你有帮助，希望各位可以给点个赞或者喜欢。
（文：归藏的AI工具箱）