這幾天，Deepseek-R1 0528 正式開源。
在LiveCodeBench上，它的表現幾乎與OpenAI的o3（高）相當；在Aider的多語言基準測試中，它與Claude Opus不相上下。
在官網上線後，我們快速測試了它的前端能力，發現其性能異常強勁，於是便有了本文的測試，希望能與大家分享不同型號的具體性能表現。
需要注意的是，本次測試主要關注前端功能，因此客觀地看待不同模型的表現至關重要。您可以使用我們提供的提示進行自己的測試，並分享您的見解和發現。
使用相同的提示，我們將其發送給 Claude Opus 4、Sonnet 4、Gemini 2.5 Pro 和 DeepSeek R1-0528並讓他們參加六項難度越來越大的前端開發任務的競爭。
對於那些迫不及待的人來說，結論如下：
Deepseek-R1-0528 在前端功能上略遜於 Opus 4，但性能更勝一籌 十四行詩 4 和 Gemini 2.5 Pro。
基本上，Opus 能完成的任務，R1 也能完成，甚至 Opus 4 無法完成的任務，R1 也能處理，儘管完成率和結果品質略低。
考慮到 R1 與其他三款產品之間的價格差異，這種性能已經非常出色了，我們只能想像 R2 的表現會有多麼令人印象深刻。
測試1：倉庫管理系統
提示：請幫我建立一個完整的基於Web的產品管理工具，其要求如下：
功能要求
- 產品管理
- 產品資訊輸入：產品名稱、類型/類別、SKU編號、價格、庫存數量
- 產品影像管理：支援圖片上傳和預覽（用檔案選擇器模擬）
- 產品清單展示：以表格顯示所有產品，並支援搜尋和篩選
- 產品編輯：支援產品資訊修改
- 產品刪除：支援刪除商品（有確認提示）
- 庫存管理
- 入站操作：增加產品庫存數量，記錄入庫時間及數量
- 出站操作：減少產品庫存數量，記錄出庫存時間及數量
- 庫存記錄：顯示每個產品的庫存變化歷史記錄
- 介面功能
- 儀表板：顯示產品總數、庫存總價值、低庫存警報等統計資料。
- 響應式設計：適用於桌面和行動設備
- 資料持久化：使用 localStorage 儲存數據
技術要求
樣式和圖示
- CSS 框架: 使用 TailwindCSS 3.0+ CDN
- 圖示庫：使用 Heroicons 或 Feather Icons CDN
- 字體：使用 Google 字體
程式碼結構
- 單頁應用程式：HTML + CSS + JavaScript
- 模組化設計：將函數分解為不同的 JavaScript 模組
- 資料格式：使用JSON格式儲存產品數據
介面設計要求
- 現代使用者介面：簡約美觀的介面設計
- 配色方案：使用專業的商務色彩組合
- 互動回饋：按鈕點擊、表單驗證和其他互動效果
- 表單驗證：必填欄位驗證、資料格式驗證
資料結構範例
請產生一個包含所有必要 CSS 和 JavaScript 程式碼的完整 HTML 文件，確保所有功能均可用並可直接在瀏覽器中執行。
我們來看看測試結果，其實邏輯還挺複雜的，考驗模型的脈絡長度、美感、邏輯處理能力。
在這種情況下，除了Deepseek之外的所有模型都失敗了。 克勞德4的譯本 說實話，這很不對勁。
Deepseek-R1-0528： R1 的升級版功能非常強大。可以看到，介面非常專業，還可以創建新商品，進行正常的出入庫操作，並將商品、庫存管理和庫存報表分為三個頁面，整體非常清晰。此外，還有一個專門的儀錶板頁面，並編寫了一些範例資料用於測試。其他型號沒有數據，添加商品也不起作用，因此完全無法測試。
克勞德作品 4： 它首先有一個很大的介面，非常簡單，使用頂部導覽欄，而不是SaaS平台常見的側邊欄。新增產品時保存會出錯，導致無法測試。
克勞德十四行詩4： 與 Opus 4 相比，它的介面更加簡陋。點擊「新增產品」按鈕沒有任何反應，也沒有彈出任何表單。其他頁面基本上只是一些佔位符。
雙子座 2.5 專業版： Google 的版本比 Claude 的還要好。它允許添加產品和運行，但存在一些 bug。我第一次嘗試時沒問題，但錄製影片時就不行了。不過，Gemini 的互動設計相當複雜，庫存管理和記錄保存都在一個表格裡，這增加了一些難度。
測試2：像素動畫編輯器
接下來是視覺能力的考驗。我要求他們使用 P5.js 建立一個像素畫動畫編輯器，支援移動模式，調整點的形狀、大小、速度等條件。
提示：基於P5.js創建一個全螢幕可互動的像素畫動畫生成器，滿足以下技術要求：
核心功能
- 使用 P5.js 實作全螢幕像素畫動畫，動畫覆蓋整個視窗區域
- 像素網格的總面積必須至少為可見區域的 10 倍，以確保即使在最小的網格間距下也能完全覆蓋
- 提供多種動畫模式：波浪、脈衝、漣漪、噪音
- 支援多種點形選擇：圓形、方形、十字形、三角形、菱形等。
- 所有控制面板均位於頁面右側，可在行動裝置上折疊至頁面底部
可調參數
- 點密度：控制每行/列的點數
- 形狀大小：調整點的大小
- 動畫速度：控制動畫效果的速度和幅度
- 網格間距：調整點之間的距離
技術規格
- 使用 HTML5、TailwindCSS 3.0+（透過 CDN 引入）和 P5.js
- 實現完整的暗/亮模式切換功能，預設為系統設置
- 程式碼必須包含效能最佳化邏輯，僅渲染可見區域內和邊緣附近的點
- 動畫必須流暢運行，無延遲
響應式設計
- 頁面必須在所有裝置（手機、平板電腦、桌上型電腦）上完美顯示
- 控制面板應在移動視圖中可折疊/展開
- 針對不同螢幕尺寸優化版面配置和字體大小
- 確保行動裝置上良好的觸摸體驗
介面元素
- 動畫模式選擇器（波浪、脈衝、波紋、雜訊）
- 形狀選擇器（用圖示顯示各種形狀）
- 滑桿控制：密度、大小、速度、間距
- 主題切換按鈕
- 顯示矩陣疊加資訊和總點數
看看結果吧。說實話，我沒想到其他型號在這次測試中表現這麼差。除了Deepseek-R1，其他型號的動畫完全不行。
Deepseek-R1-0528： 完美無瑕。所有按鈕和滑桿功能正常，點移動流暢。它甚至添加了點陣數據，切換到夜間模式後顏色仍然保持一致。唯一的小問題是顏色選擇的選取狀態有點問題，但與其他型號的糟糕表現相比，這可以忽略不計。
克勞德作品 4： 好消息：它有像素藝術。壞消息：它不會動。右側內容可以正常操作，但切換到夜間模式後配色方案不正確。
克勞德十四行詩4： 這個簡直是災難。沒有像素畫，連按鈕選擇狀態都缺失。滑桿只是一些點——不如用預設元件。
雙子座 2.5 專業版： 也報沒有像素網格的錯誤。右側內容可以正常操作，主題切換也正常，但預設元件有點醜。
測試3：影像漸層色擷取工具
這是我之前寫的工具，邏輯描述不多，樣式描述比較多。主要功能是從一張圖片中提取五組漸層色。
提示：根據以下文件內容產生HTML網頁，支援從上傳的圖片中提取五組漸變色，並允許使用者直接複製這五組十六進位漸變色。需要實現顏色提取功能。
- 採用網易雲音樂風格的視覺設計，白色背景搭配與#FE1110相似的顏色作為亮點
- 使用大字體或數字來突出重點。使用超大尺寸的視覺元素來強調重點區域，並與較小的元素形成對比。
- 中英文混合使用。使用粗體大號中文字體，並使用較小的英文字體作為強調。
- 使用簡單的線條繪製圖形進行資料視覺化或作為裝飾元素。
- 使用高亮顏色的透明度漸層來創造科技感效果，但請確保不同的高亮顏色不會相互混合。
- 模仿蘋果官網動畫，滑鼠滾動觸發動畫
- 數據可引用線上圖表組件，樣式與主題一致
- 使用 Framer Motion（透過 CDN）
- 使用 HTML5、TailwindCSS 3.0+（透過 CDN）和必要的 JavaScript
- 使用專業的圖示庫，例如 Font Awesome 或 Material Icons（透過 CDN）
- 避免使用表情符號作為主要圖標
- 左下角的膠囊按鈕顯示作者的 Twitter 帳號
這次，Claude 終於完成了一項偉大的工作。 Deepseek-R1-0528 的頁面細節和美感令人印象深刻，但功能性尚未實現。 Opus 4 和 Sonnet 4 的頁面更簡潔，但至少具備功能性，而 Gemini 則完全沒有功能性。
Deepseek-R1-0528： 再次使用我的提示後，Deepseek 的頁面美觀確實無與倫比。他還在頁面上添加了許多 SEO 友善的內容，例如應用程式場景和處理時間。漸層色的顯示卡片也非常詳細，但顏色選擇邏輯尚未實現。
克勞德作品 4： 這次，Claude 終於不負眾望，完成了頁面功能。不過頁面內容非常簡陋，只有上傳圖片和結果展示的地方，顏色選擇邏輯也比較差。不過，至少還能用。
克勞德十四行詩4： Sonnet 4 也完成了功能，我甚至認為 Sonnet 的效果比 Opus 更好，儘管它仍然不如 Deepseek 豐富。
雙子座 2.5 專業版： 這個是最差的。不僅頁面細節和美觀度不足，功能也完全沒有實現，而且啟動時就崩潰。
測試4：白噪音每日報價網站
接下來是一個白噪音每日語錄網站產生器，非常適合用作新標籤頁插件。它支援播放來自 Spotify 的白噪音，網頁會顯示
提示：請幫我建立一個簡單大方的每日名言網站，要求如下：
視覺設計
- 背景影像：從以下連結中隨機選擇高品質風景圖片作為背景圖片
- 圖片連結：XXXX
- 影像處理：添加 25% 黑色蒙版和輕微的高斯模糊，以確保文字保持清晰可讀
- 整體風格：極簡現代，以風景圖片作為網頁背景，增強沉浸感
- 使用 anime.js（透過 CDN 引入：JsDelivr jsdelivr.com）作為動畫框架，HTML5、TailwindCSS 3.0+（透過 CDN 引入）和必要的 JavaScript，並使用 Font Awesome 或 Material Icons 等專業圖示庫（透過 CDN 引入）。
時間顯示模組
- 頂部：以較小的字體居中顯示月份和日期格式（例如“5 月 29 日”）
- 第二排：以較小字體顯示「第X週·農曆第X月第X日」格式
- 中心：以大白色字體居中突出顯示目前日期
行情顯示模組
- 內容：隨機展示中外哲學家、文學家的經典語錄
- 佈局：引文居中，字體大小適中，行距舒適
- 歸因：右下角顯示“作家，XXX”或“哲學家，XXX”
- 報價庫：包含關於動機、人生感悟和智慧等各種主題的引言
音樂播放功能
- 地點：頁面左下角，預設折疊
- 內容：嵌入 Spotify 白噪音播放列表
- 程式碼:
技術實現
- 響應式設計：適用於桌面和行動設備
- 字體選擇：使用 Google Fonts 推出的精美中文字體
- 配色方案：主要使用白色文字以確保所有背景下的可讀性
- 裝載優化：延遲載入圖片以提高頁面效能
互動功能
- 自動重新整理：每天自動更換背景圖片和名言
- 手動刷新：提供刷新按鈕，方便使用者手動更改內容
文案風格
- 報價選擇：喜歡簡短、積極、富有哲理的引言
- 語言風格：簡潔有力，避免篇幅過長
- 主題分類：人生感悟、勵志成長、睿智思考、情感抒發等。
請依照上述要求產生完整的HTML/CSS/JavaScript網站，確保介面美觀、功能齊全、使用者體驗良好。
這個測驗純粹是為了評估各位模特兒對美感的理解，這種以展示為主的網頁一般都能實現。
不得不說，Claude Opus 4 在這方面仍然相當權威，對細節的關注非常出色。 Gemini 2.5 Pro 也表現不俗，甚至為影像轉換添加了動畫效果。 Deepseek 和 Sonnet 4 也處於同一水平。
Deepseek-R1-0528： 我先跑了 Deepseek，覺得它已經相當不錯了。整體美觀度方面的第一個問題是左下角的音樂按鈕，它有點太平了。引言部分也存在問題——不應該添加黑色蒙版，而且文字對齊也有點不對。不過，它確實為刷新添加了動畫效果。
克勞德作品 4： Opus 4 的美學設計堪稱完美。所有字體的大小和間距都非常舒適，名言名句的引文和引號都經過了透明處理。就連 Spotify 播放器的 UI 也採用了展開/折疊動畫。堪稱完美。
克勞德十四行詩4： Sonnet 4 的效果與 Deepseek 的問題類似。音樂播放按鈕、文字大小、對齊方式和間距都可以進一步優化。
雙子座 2.5 專業版： Gemini 的效果也不錯，但如果去除文字陰影效果會更好。它還自訂了 Spotify 播放器的 UI，文字細節也不錯。過渡效果很明顯，圖片有拉伸效果。
測試 5：睡眠應用頁面生成
接下來是行動應用測試。請每位學生創建一個睡眠監測應用。測試會指定技術堆疊和設計要求，並要求產生多個互動頁面。
提示：睡眠監測應用程式開發要求
項目概述
請幫我建立一個完整的睡眠監測應用，包含四個主要功能頁面。介面應美觀且專業。
技術堆疊要求
前端技術
– 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 實現流暢的頁面動畫
功能頁面要求
請產生睡眠監測應用程式所需的所有頁面，包括但不限於：
- 首頁/儀表板
- 睡眠記錄頁面
- 數據分析頁面
- 設定頁面
- 其他相關功能頁面
程式碼輸出要求
- 每個頁面都是一個獨立的 HTML 文件
- 程式碼結構清晰，註解完整
- 確保所有 CDN 連結均可訪問
- 提供完整、可運行的程式碼
在行動邏輯和介面方面，Cluade Opus 4 再次展現了其強大的功能，能夠以良好的邏輯完成多個頁面。其他型號只能產生單一頁面，但 Deepseek R1 0528 的美觀卻一鳴驚人，風格優美。雖然它只產生單一頁面，但功能非常完整。
Deepseek-R1-0528： 雖然只產生了一個頁面，但整體美感不錯。卡片的細節和圖標的處理都做得很好，整個頁面完整且篇幅較長。此外，導覽列採用了響應式設計，在行動裝置和桌面裝置上的佈局截然不同。
克勞德作品 4： 確實強大，只有Opus4完整生成了所有頁面，但這次的美觀設計不太好，採用的是網頁邏輯，導航圖示太小。
克勞德十四行詩4： 只產生單頁並報錯，美觀度較差，僅完成任務而已。
雙子座 2.5 專業版： Google 的做法總是與眾不同。它會單獨產生每個頁面，提供四個彼此無法互動的檔案。此外，所有頁面都報錯，每個頁面都只包含導航，沒有內容，這令人非常失望。
測試 6：複雜功能－俄羅斯方塊
最後，我完成了一個小遊戲測試。我設計了一個相對複雜的俄羅斯方塊遊戲，包含特殊方塊、主題切換、方塊落地預測、方塊儲存等等，堪稱真正的終極挑戰。
提示：請幫我創建一個功能齊全、視覺上吸引人的俄羅斯方塊網頁遊戲，其要求如下：
核心遊戲功能
- 完整的俄羅斯方塊機制：7個標準塊（I、O、T、S、Z、J、L）
- 平滑控制：左右移動、旋轉、快速下降、瞬間下降
- 智慧淘汰系統：支援一次消除1-4行，並帶有特殊動畫效果
- 漸進式難度系統：根據消除的行數自動增加掉落速度和級別
進階功能
- 預覽系統：顯示下一個和下一個區塊
- 保持功能：按住 Hold 鍵可暫時儲存目前方塊。每輪僅限使用一次
- 鬼塊：以半透明形式顯示方塊的落地位置
- 連擊系統：連續通關可獲得額外積分和視覺效果
- 特殊技能:
- 炸彈阻擋（清除周圍區域）
- 雷射清除（清除整行）
- 時間暫停（方塊停止下墜 3 秒）
視覺設計要求
- 現代 UI 介面:
- 漸層背景或粒子效果
- 玻璃效果遊戲面板
- 流暢的動畫過渡
- 響應式設計，適用於不同的螢幕
- 豐富的視覺效果:
- 方塊下落和旋轉的流暢動畫
- 被消滅時出現爆炸或閃光效果
- 連擊達成時的螢幕震動效果
- 等級升級時的慶祝動畫
- 主題系統：至少有 3 種不同的視覺主題可供切換
音效系統
- 完整的聲音回饋：移動、旋轉、落地、淘汰、遊戲結束等。
- 背景音樂：循環播放遊戲BGM
- 音量控制：獨立調整音效和背景音樂音量
遊戲模式
- 經典模式：傳統俄羅斯方塊玩法
- 限時模式：在規定時間內取得最高分
- 挑戰模式：預設障礙以增加難度
- 禪定模式：沒有時間壓力，純粹享受遊戲
數據統計功能
- 即時統計數據：目前分數、等級、清除的行數、遊戲時間
- 歷史：最高分數、最佳等級、總遊戲時間
- 成就係統：解鎖各種遊戲成就
- 本地儲存：保存遊戲記錄和設置
技術要求
- 使用純 HTML5/CSS3/JavaScript，無需外部框架
- 清晰的程式碼結構：物件導向程式設計、模組化設計
- 效能最佳化：流暢的60FPS動畫，無延遲
- 相容性：支援主流現代瀏覽器
- 響應式設計：相容於PC和行動設備
使用者體驗
- 直觀的指示：內建教學和按鈕提示
- 暫停/恢復功能：隨時暫停遊戲
- 設定選單：調整遊戲難度、音效、視覺效果等。
- 遊戲狀態保存：支援保存和恢復遊戲
代碼品質要求
- 詳細評論：每個函數和重要的程式碼段都必須有描述
- 錯誤處理：完善的異常捕獲與處理機制
- 優雅的程式碼：遵循最佳實踐，易於理解和維護
- 可擴展性：方便將來新增功能
請提供包含所有 CSS 和 JavaScript 程式碼的完整 HTML 文件，以確保它們可以直接在瀏覽器中運行。程式碼應展現專業的程式設計技能以及對遊戲開發的深刻理解。
在迷你遊戲中，克勞德遇到了一些問題。 Opus 和 Sonnet 都按要求產生了相應的俄羅斯方塊，尤其是特殊方塊的邏輯。 Deepseek 處理了克勞德忽略的主題，但忽略了特殊方塊，導致 Gemini 2.5 Pro 產生了無法運作的方塊。
Deepseek-R1-0528： 任務完成得很好，符合規範，但特殊方塊的設計被省略了，根本沒有實現。這可能是由於沒有遵循提示詞造成的。整個網頁看起來像一個遊戲介面，所有按鈕都看起來像標準組件。
克勞德作品 4： 完成了特殊方塊的邏輯和其他邏輯，沒有出現問題，但忽略了主題切換的提示，他並沒有實現。與 DeepSeek 的問題相比，這個問題較小，但由於介面是硬編碼的，沒有響應式邏輯，因此比例略有偏差，導致一些按鈕無法點擊。
克勞德十四行詩4： 與 Opus 類似，但我認為 Sonnet 4 比 Opus 更好。頁面適配也很好。感覺 Sonnet 贏了，因為它完成了所有必需的功能。
雙子座 2.5 專業版： 雙子座（Gemini）一直難以應付複雜的邏輯。這次，它完全無法使用，因為磚塊的放置位置有錯誤，無法預測它們會落在哪裡。這真是最糟糕的情況。
現在，我想您和我一樣對 DeepSeek-R1 的性能感到驚訝。
很難相信這只是一次小型型號升級。讓我們將這些型號的價格與DeepSeek R1 0528進行比較。
Opus 4 的價格要貴 30 倍，而且這是使用 Openrouter 的定價——官方價格會更加驚人。
| 模型 | 上下文長度 | 輸入價格（$/M代幣） | 輸出價格（$/M代幣） | 圖像價格（$/K代幣） |
| DeepSeek R1 0528 | 16萬 | 0.50 | 2.18 | – |
| Gemini 2.5 Pro 預覽版 | 100萬 | 1.25 | 10 | 5.16 |
| 克勞德十四行詩 4 | 20萬 | 3.00 | 15 | 4.80 |
| 克勞德作品 4 | 20萬 | 15.00 | 75 | 24.00 |
作為一個每天都關注人工智慧新聞的人，我見證了無數所謂的“突破”，最終卻以“令人失望”告終。但這次不同。 DeepSeek-R1 給了我真正的希望。
價格相差 30 倍，但性能卻幾乎相當。
我們不再需要為使用最佳的AI程式設計模型而支付高昂的價格，也不必在成本和品質之間做出痛苦的權衡。更令人振奮的是，這是我們自己的模型。
這句話是AI寫的，我覺得很棒： 真正的革命往往始於普通人能夠實現夢想。
