The Showdown of the Top Four Models! A Review Showcases How Powerful Deepseek R1 Is

Over the past few days, Deepseek-R1 0528 has been officially open-sourced.

On LiveCodeBench, its performance is nearly on par with OpenAI’s o3 (high); in Aider’s multi-language benchmark test, it holds its own against Claude Opus.

When it was launched on the official website, we quickly tested its front-end capabilities and found them to be exceptionally strong, which led to the tests covered in this article. We aim to share the specific performance of different models with you.

It is important to note that this test primarily focuses on front-end capabilities, so it is essential to view the performance of different models objectively. You can use the prompts we provide to conduct your own tests and share your insights and findings.

Using the same prompt, we sent it to Claude Opus 4, Sonnet 4, Gemini 2.5 Pro, and DeepSeek R1-0528, and had them compete in six increasingly challenging front-end development tasks.

For those who can’t wait, here’s the conclusion:

Deepseek-R1-0528 slightly trails Opus 4 in front-end capabilities but outperforms Sonnet 4 and Gemini 2.5 Pro.

Basically, any task Opus can complete, R1 can also complete, and even tasks Opus 4 cannot complete, R1 can handle, though with slightly lower completion rates and result quality.

Considering the price difference between R1 and the other three, this performance is already excellent, and we can only imagine how impressive R2 will be.

Test 1: Warehouse Management System

Prompt: Please help me create a complete web-based product management tool with the following requirements:

Functional Requirements

1. Product Management

• Product Information Entry: Product name, type/category, SKU number, price, inventory quantity
• Product image management: Support image upload and preview (simulated with a file selector)
• Product list display: Display all products in a table format, with search and filter support
• Product editing: Support product information modification
• Product deletion: Support product deletion (with confirmation prompt)

2. Inventory management

• Inbound operations: Increase product inventory quantity, record inbound time and quantity
• Outbound operations: Decrease product inventory quantity, record outbound time and quantity
• Inventory records: Displays the inventory change history for each product

3. Interface features

• Instrumentpanel: Displays statistics such as total number of products, total inventory value, low inventory alerts, etc.
• Responsive design: Adaptable to desktop and mobile devices
• Data persistence: Uses localStorage to save data

Technical requirements

Styles and icons

• CSS framework: Uses TailwindCSS 3.0+ CDN
• Icon library: Uses Heroicons or Feather Icons CDN
• Font: Use Google Fonts

Code Structure

• Single-page application: HTML + CSS + JavaScript
• Modular design: Break down functions into different JavaScript modules
• Data format: Use JSON format to store product data

Interface Design Requirements

• Modern UI: Simple and beautiful interface design
• Color scheme: Use professional business color combinations
• Interactive feedback: Button clicks, form validation, and other interactive effects
• Form validation: Required field validation, data format validation

Data Structure Example

Please generate a complete HTML file containing all necessary CSS and JavaScript code, ensuring that all features are functional and can run directly in a browser.

Let’s take a look at the test results. The logic is actually quite complex, testing the model’s context length, aesthetic sense, and logical processing capabilities.

In this case, all models except Deepseek failed. Claude 4’s translation was quite off, to be honest.

Deepseek-R1-0528: The upgraded version of R1 is very powerful. As you can see, the interface is very professional, and you can also create new products, perform normal outbound and inbound operations, and divide product, inventory management, and inventory reports into three pages, which is very clear overall. There is also a dedicated dashboard page, and he wrote some sample data for testing. The other models have no data, and adding products doesn’t work, so testing is completely impossible.

Claude Opus 4: It starts with a large interface, very simple, using a top navigation bar instead of the sidebar common in SaaS platforms. Adding products results in an error upon saving, making testing impossible.

Claude Sonnet 4: Compared to Opus 4, the interface is even more basic. Clicking the “Add Product” button doesn’t respond, and no form pop-up appears. The other pages are essentially just placeholders.

Gemini 2.5 Pro: Google’s version is better than Claude’s. It allows adding products and runs, but there are bugs. It worked when I first tried it, but not when I recorded a video. However, Gemini’s interaction design is quite complex, with inventory management and record-keeping all in one table, which adds some difficulty.

Test 2: Pixel Animation Editor

Next is a test of visual ability. I asked them to create a pixel art animation editor using P5.js, supporting movement modes, adjusting point shapes, sizes, speeds, and other conditions.

Prompt: Create a full-screen interactive pixel art animation generator based on P5.js, meeting the following technical requirements:

Core Features

• Implement full-screen pixel art animation using P5.js, with the animation covering the entire viewport area
• The total area of the pixel grid must be at least 10 times the visible area to ensure full coverage even at the smallest grid spacing
• Provide multiple animation modes: Wave, Pulse, Ripple, Noise
• Support multiple point shape options: circle, square, cross, triangle, diamond, etc.
• All control panels are placed on the right side of the page and can be collapsed to the bottom on mobile devices

Adjustable Parameters

• Dot density: Control the number of dots per row/column
• Shape size: Adjust the size of the dots
• Animation speed: Control the speed and amplitude of the animation effect
• Grid spacing: Adjust the distance between dots

Technical Specifications

• Use HTML5, TailwindCSS 3.0+ (introduced via CDN), and P5.js
• Implement full dark/light mode switching functionality, defaulting to system settings
• Code must include performance optimization logic, rendering only points within the visible area and near the edges
• Animations must run smoothly without lag

Responsive design

• Pages must display perfectly on all devices (mobile, tablet, desktop)
• Control panels should be collapsible/expandable in mobile view
• Optimize layout and font sizes for different screen sizes
• Ensure a good touch experience on mobile devices

Interface Elements

• Animation mode selector (wave, pulse, ripple, noise)
• Shape selector (displays various shapes with icons)
• Slider controls: density, size, speed, spacing
• Theme switch button
• Display matrix overlay information and total number of points

Take a look at the results. To be honest, I didn’t expect the other models to perform so poorly in this test. Except for Deepseek-R1, the animations of the other models didn’t work at all.

Deepseek-R1-0528: Perfectly flawless. Every button and slider functions normally, and the points move smoothly. It even added dot matrix data, and the colors remain consistent after switching to night mode. The only minor issue is that the selected state of the color selection has a slight problem, but this is negligible compared to the disastrous performance of the other models.

Claude Opus 4: Good news: it has pixel art. Bad news: it doesn’t move. The content on the right side can be operated normally, but the color scheme is incorrect after switching to night mode.

Claude Sonnet 4: This one is a disaster. There’s no pixel art, and even the button selection state is missing. The sliders are just dots—might as well use the default components.

Gemini 2.5 Pro: Also reports an error with no pixel grid. The content on the right side can be operated normally, and theme switching works fine, but the default components are a bit ugly.

Test 3: Image gradient color extraction tool

This is a tool I wrote earlier. There isn’t much description of the logic, but there is more description of the style. The main function is to extract five sets of gradient colors from an image.

Prompt: Generate an HTML web page based on the following file content, support extracting five sets of gradient colors from uploaded images, and allow users to directly copy the five sets of hexadecimal gradient colors. The color extraction function needs to be implemented.

1. Use NetEase Cloud Music style visual design, white background with a color similar to #FE1110 as the highlight
2. Emphasize large fonts or numbers to highlight key points. Include oversized visual elements to emphasize focus areas, creating contrast with smaller elements.
3. Mix Chinese and English text. Use bold, large Chinese characters and smaller English text as accents.
4. Use simple line-drawn graphics for data visualization or as decorative elements.
5. Use the transparency gradient of highlight colors to create a tech-inspired effect, but ensure that different highlight colors do not blend into each other.
6. Mimic Apple’s official website animations, with mouse scrolling triggering animations
7. Data can be referenced from online chart components, with styles consistent with the theme
8. Use Framer Motion (via CDN)
9. Use HTML5, TailwindCSS 3.0+ (via CDN), and necessary JavaScript
10. Use professional icon libraries such as Font Awesome or Material Icons (via CDN)
11. Avoid using emojis as primary icons
12. The capsule button in the bottom-left corner displays the author’s Twitter handle

In this case, Claude finally did a great job. The page details and aesthetics of Deepseek-R1-0528 are impressive, but the functionality is not implemented. Opus 4 and Sonnet 4 pages are simpler but at least functional, while Gemini is not functional at all.

Deepseek-R1-0528: After using my prompt again, Deepseek’s page aesthetics are truly unmatched. He also added a lot of SEO-friendly content to the page, such as application scenarios and processing times. The gradient-colored display cards are also very detailed, but the color selection logic is not implemented.

Claude Opus 4: This time, Claude finally didn’t disappoint, completing the page functionality, but the page content is very basic, with only a place to upload images and the results, and the color-picking logic is also poor. However, it at least works.

Claude Sonnet 4: Sonnet 4 also completed the functionality, and I even think Sonnet’s results are better than Opus’s, though it’s still not as rich as Deepseek.

Gemini 2.5 Pro: This one is the worst. Not only are the page details and aesthetics lacking, but the functionality isn’t implemented either, and it crashes on startup.

Test 4: White Noise Daily Quote Website

Next is a white noise daily quote website generator, which is perfect for a new tab page plugin. It supports playing white noise from Spotify, and the webpage displays

Prompt: Please help me create a simple and elegant daily quote website with the following requirements:

Visual Design

• Background Image: Randomly select high-quality landscape images from the following links as the background image
• Image Links: XXXX
• Image Processing: Add a 25% black mask and a slight Gaussian blur to ensure text remains clear and readable
• Overall Style: Minimalist and modern, with landscape images as the webpage background to enhance immersion
• Use anime.js (introduced via CDN: JsDelivr jsdelivr.com) for the animation framework, HTML5, TailwindCSS 3.0+ (introduced via CDN), and necessary JavaScript, and use professional icon libraries such as Font Awesome or Material Icons (introduced via CDN).

Time display module

• Top: Display the month and day format (e.g., “May 29”), in a smaller font, centered
• Second row: Displays the format “Week X · Lunar calendar Xth month Xth day” in a smaller font
• Center: Highlights the current date in large white font, centered

Quote display module

• Content: Randomly displays classic quotes from Chinese and foreign philosophers and writers
• Layout: Quotes are centered, font size is moderate, and line spacing is comfortable
• Attribution: “Writer, XXX” or “Philosopher, XXX” is displayed at the bottom right
• Quotation Library: Contains quotations on various topics such as motivation, life insights, and wisdom

Music Playback Function

• Location: Bottom left corner of the page, collapsed by default
• Content: Embed Spotify white noise playlist
• Code:

Technical Implementation

• Responsive Design: Adapted for desktop and mobile devices
• Font Selection: Use elegant Chinese fonts, introduced by Google Fonts
• Color Scheme: Mainly use white text to ensure readability on all backgrounds
• Loading Optimization: Lazy loading of images to improve page performance

Interactive Features

• Auto Refresh: Automatically changes the background image and quote every day
• Manual Refresh: Provides a refresh button to allow users to manually change the content

Copywriting Style

• Quote Selection: Prefer short, positive, and philosophical quotes
• Language Style: Concise and powerful, avoiding excessive length
• Theme Classification: Life insights, inspirational growth, wise thoughts, emotional expression, etc.

Please generate a complete HTML/CSS/JavaScript website according to the above requirements, ensuring that the interface is aesthetically pleasing, functional, and provides a good user experience.

This test is purely to assess each model’s understanding of aesthetics. This type of display-oriented webpage is generally achievable.

It must be said that Claude Opus 4 is still quite authoritative in this area, with excellent attention to detail. Gemini 2.5 Pro is also good, even adding animation effects to image transitions. Deepseek and Sonnet 4 are on the same level.

Deepseek-R1-0528: I ran Deepseek first and thought it was already quite good. The first issue with overall aesthetics was the music button in the bottom-left corner, which was a bit too flat. The quote section also had issues—the black mask shouldn’t have been added, and the text alignment was a bit off. However, it did add an animation effect for the refresh.

Claude Opus 4: The aesthetics of Opus 4 are truly flawless. The size and spacing of all fonts are very comfortable, and the quotes for the famous sayings have been handled with transparency for both the quote text and the quote marks. Even the Spotify player has been wrapped in a UI with an expand/collapse animation. It’s perfect.

Claude Sonnet 4: Sonnet 4’s effect is similar to Deepseek’s issue. The music play button, text size, alignment, and spacing can all be further optimized.

Gemini 2.5 Pro: Gemini’s effect is also good, but removing the text shadow would make it better. It has also customized the Spotify player UI, and the text details are fine. The transition effect is noticeable, with a stretching effect on the image.

Test 5: Sleep app page generation

Next is the mobile app test. Have them each create a sleep monitoring app. The prompt will specify the technical stack and design requirements, and require the generation of multiple interactive pages.

Prompt: Sleep monitoring app development requirements

Project overview

Please help me create a complete sleep monitoring app with four main functional pages. The interface should be aesthetically pleasing and professional.

Technical stack requirements

Frontend technologies

– HTML5 – Page structure

– TailwindCSS v3.0+ – Style framework (introduced via CDN)

– JavaScript – Necessary interaction logic

– Anime.js v4.0.2 – Animation effect library

• CDN: https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm

Icons and charts

• Icon library: Font Awesome or Material Icons (CDN)
• Chart components: Online chart components, styles must be consistent with the theme
• Data visualization: Supports chart display of sleep data

Design requirements

Responsive design

• Fully responsive layout
• Mobile-first design
• Good display on both desktop and mobile devices

Interaction effects

• Button interaction: Slightly enlarged effect on hover

Form interaction: Display a gradient border when the input field is focused

Card interaction: Darken the shadow when hovering

Animation effects: Use Anime.js to achieve smooth page animations

Functional Page Requirements

Please generate all pages required for a sleep monitoring app, including but not limited to:

• Home page/dashboard
• Sleep record page
• Data analysis page
• Settings page
• Other related functional pages

Code Output Requirements

• Each page is an independent HTML file
• Clear code structure with complete comments
• Ensure all CDN links are accessible
• Provide complete, runnable code

In terms of mobile logic and interface, Cluade Opus 4 once again demonstrated its power, completing multiple pages with good logic. The other models only generated a single page, but Deepseek R1 0528 suddenly hit the mark in terms of aesthetics, with a beautiful style. Although it only generated a single page, it was very complete.

Deepseek-R1-0528: Only generated a single page, but the overall aesthetic is good. The details of the cards and the handling of the icons are well done, and the entire page is complete and lengthy. Additionally, responsive design was implemented for the navigation, resulting in completely different layouts on mobile and desktop devices.

Claude Opus 4: Indeed powerful, only Opus4 generated all pages completely, but the aesthetic design this time is not great, using web page logic, with navigation icons that are too small.

Claude Sonnet 4: Only generated a single page and reported errors, with poor aesthetic design, just completing the task.

Gemini 2.5 Pro: Google always does things differently. It generates each page individually, providing four files that cannot interact with each other. Additionally, all pages reported errors, with each page containing only navigation and no content, which is quite disappointing.

Test 6: Complex Functionality—Tetris

Finally, I wrapped up with a small game test. I designed a relatively complex Tetris game with special blocks, theme switching, block landing prediction, block storage, and more—a true ultimate challenge.

Prompt: Please help me create a fully functional, visually appealing Tetris web game with the following requirements:

Core game features

1. Complete Tetris mechanism: 7 standard blocks (I, O, T, S, Z, J, L)
2. Smooth controls: left and right movement, rotation, quick drop, instant drop
3. Smart elimination system: supports eliminating 1-4 rows at a time with special animation effects
4. Progressive difficulty system: automatically increases the drop speed and level based on the number of rows eliminated

Advanced features

1. Preview system: displays the next and next-next blocks
2. Hold Function: Hold the Hold key to temporarily store the current block. Can only be used once per round
3. Ghost Blocks: Displays the landing position of blocks in semi-transparent form
4. Combo System: Continuous clearing grants extra points and visual effects
5. Special Skills:
   1. Bomb Block (clears surrounding area)
   2. Laser Clear (clears entire row)
   3. Time Pause (blocks stop falling for 3 seconds)

Visual Design Requirements

1. Modern UI Interface:
   1. Gradient background or particle effects
   2. Glass effect game panel
   3. Smooth animation transitions
   4. Responsive design for different screens
2. Rich visual effects:
   1. Smooth animation of blocks falling and rotating
   2. Explosion or flash effects when eliminated
   3. Screen shake effect when combo is achieved
   4. Celebration animation when level is upgraded
3. Theme system: At least 3 different visual themes to switch between

Sound effect system

1. Complete sound feedback: movement, rotation, landing, elimination, game end, etc.
2. Background music: looping game BGM
3. Volume control: independently adjustable sound effects and background music volume

Game modes

1. Classic mode: traditional Tetris gameplay
2. Time-limited mode: achieve the highest score within a specified time limit
3. Challenge mode: pre-set obstacles to increase difficulty
4. Zen mode: no time pressure, pure enjoyment of the game

Data statistics features

1. Real-time statistics: current score, level, number of lines cleared, game time
2. History: highest score, best level, total game time
3. Achievement system: unlock various game achievements
4. Local storage: save game records and settings

Technical requirements

1. Uses pure HTML5/CSS3/JavaScript, no external frameworks required
2. Clear code structure: object-oriented programming, modular design
3. Performance optimization: smooth 60FPS animation, no lag
4. Compatibility: supports mainstream modern browsers
5. Responsive design: Compatible with PCs and mobile devices

User experience

1. Intuitive instructions: Built-in tutorial and button prompts
2. Pause/resume function: Pause the game at any time
3. Settings menu: Adjust game difficulty, sound effects, visual effects, etc.
4. Game state saving: Supports saving and resuming the game

Code quality requirements

1. Detailed comments: Each function and important code segment must have a description
2. Error handling: Comprehensive exception capture and handling mechanism
3. Elegant code: Follow best practices, easy to understand and maintain
4. Extensibility: Easy to add new features in the future

Please provide complete HTML files containing all CSS and JavaScript code to ensure that they can be run directly in a browser. The code should demonstrate professional programming skills and a deep understanding of game development.

In the mini-game, Claude has something going on. Both Opus and Sonnet generated the corresponding Tetris blocks as required, especially the logic for special blocks. Deepseek handled the theme that Claude overlooked, but missed the special blocks, resulting in Gemini 2.5 Pro generating unplayable blocks.

Deepseek-R1-0528: The task was completed very well and according to specifications, but the special block design was omitted and not implemented at all. This may be due to issues with following the prompt words. The entire webpage resembles a game interface, with all buttons appearing like standard components.

Claude Opus 4: Completed the logic for special blocks and other logic without issues, but ignored the prompt for theme switching, which he did not implement. Compared to DeepSeek’s issues, this is a smaller problem, but the interface is hardcoded with no responsive logic, so the proportions are slightly off, making some buttons unclickable.

Claude Sonnet 4: Similar to Opus, but I think Sonnet 4 is better than Opus. The page adaptation is also good. This feels like Sonnet won, as it completed all the required functions.

Gemini 2.5 Pro: Gemini consistently struggles with complex logic. This time, it was completely unusable because the brick placement had a bug, making it impossible to predict where they would land. It’s the worst.

By now, I think you’re as amazed as I am by DeepSeek-R1’s performance.

It’s hard to believe this is just a small model upgrade. Let’s compare the prices of these models with DeepSeek R1 0528.

Opus 4 is 30 times more expensive, and that’s using Openrouter’s pricing—the official price would be even more staggering.

modell	Context length	Input price($/M tokens)	Output price($/M tokens)	image price($/K tokens)
DeepSeek R1 0528	160k	0.50	2.18	–
Gemini 2.5 pro preview	1000k	1.25	10	5.16
Claude Sonnet 4	200k	3.00	15	4.80
Claude Opus 4	200k	15.00	75	24.00

As someone who deals with AI news daily, I’ve witnessed countless “breakthroughs” that ultimately turn out to be “disappointing.” But this time is different. DeepSeek-R1 has given me real hope.

A 30-fold price difference yet nearly equivalent performance.

We no longer need to pay exorbitant prices to use the best AI programming models, nor do we have to make painful trade-offs between cost and quality. What’s even more inspiring is that this is our own model.

This sentence was written by AI, and I think it’s great: The true revolution often begins when ordinary people can reach for the stars.