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

In den letzten Tagen wurde Deepseek-R1 0528 offiziell als Open Source freigegeben.

Auf LiveCodeBench liegt seine Leistung fast auf Augenhöhe mit OpenAIs o3 (hoch); im mehrsprachigen Benchmarktest von Aider kann es mit Claude Opus mithalten.

Nach der Veröffentlichung auf der offiziellen Website haben wir die Front-End-Funktionen getestet und festgestellt, dass sie außergewöhnlich leistungsstark sind. Dies führte zu den in diesem Artikel beschriebenen Tests. Wir möchten Ihnen die spezifische Leistung verschiedener Modelle näherbringen.

Wichtig zu beachten: Dieser Test konzentriert sich in erster Linie auf die Front-End-Funktionen. Daher ist es wichtig, die Leistung verschiedener Modelle objektiv zu betrachten. Nutzen Sie unsere Tipps, um eigene Tests durchzuführen und Ihre Erkenntnisse und Ergebnisse mitzuteilen.

Mit der gleichen Eingabeaufforderung schickten wir es an Claude Opus 4, Sonnet 4, Gemini 2.5 Pro und DeepSeek R1-0528und ließ sie in sechs zunehmend anspruchsvolleren Front-End-Entwicklungsaufgaben gegeneinander antreten.

Für alle, die es kaum erwarten können, hier das Fazit:

Deepseek-R1-0528 liegt bei den Front-End-Fähigkeiten leicht hinter Opus 4, übertrifft diese aber Sonett 4 und Gemini 2.5 Pro.

Grundsätzlich kann R1 jede Aufgabe erledigen, die Opus erledigen kann, und selbst Aufgaben, die Opus 4 nicht erledigen kann, kann R1 bewältigen, allerdings mit etwas geringerer Abschlussrate und Ergebnisqualität.

In Anbetracht des Preisunterschieds zwischen R1 und den anderen drei ist diese Leistung bereits hervorragend und wir können uns nur vorstellen, wie beeindruckend R2 sein wird.

Test 1: Lagerverwaltungssystem

Eingabeaufforderung: Bitte helfen Sie mir, ein vollständiges webbasiertes Produktmanagement-Tool mit den folgenden Anforderungen zu erstellen:

Funktionale Anforderungen

1. Produktmanagement

• Produktinformationseingabe: Produktname, Typ/Kategorie, SKU-Nummer, Preis, Lagerbestand
• Produktbildverwaltung: Unterstützt das Hochladen und die Vorschau von Bildern (simuliert mit einem Dateiwähler)
• Produktlistenanzeige: Alle Produkte in einem Tabellenformat anzeigen, mit Such- und Filterunterstützung
• Produktbearbeitung: Unterstützung der Änderung von Produktinformationen
• Produktlöschung: Unterstützt die Produktlöschung (mit Bestätigungsaufforderung)

2. Bestandsverwaltung

• Eingehende Vorgänge: Erhöhen Sie die Produktbestandsmenge, erfassen Sie Eingangszeit und -menge
• Ausgehende Vorgänge: Produktbestandsmenge verringern, Ausgangszeit und -menge erfassen
• Bestandsaufzeichnungen: Zeigt den Bestandsänderungsverlauf für jedes Produkt an

3. Schnittstellenfunktionen

• Dashboard: Zeigt Statistiken wie die Gesamtzahl der Produkte, den Gesamtbestandswert, Warnungen bei niedrigem Bestand usw. an.
• Responsives Design: Anpassbar an Desktop- und Mobilgeräte
• Datenpersistenz: Verwendet localStorage zum Speichern von Daten

Technische Anforderungen

Stile und Symbole

• CSS-Framework: Verwendet TailwindCSS 3.0+ CDN
• Symbolbibliothek: Verwendet Heroicons oder Feather Icons CDN
• Schriftart: Google Fonts verwenden

Codestruktur

• Einzelseitenanwendung: HTML + CSS + JavaScript
• Modularer Aufbau: Funktionen in verschiedene JavaScript-Module aufteilen
• Datenformat: Verwenden Sie das JSON-Format zum Speichern von Produktdaten

Anforderungen an das Schnittstellendesign

• Moderne Benutzeroberfläche: Einfaches und schönes Interface-Design
• Farbschema: Verwenden Sie professionelle Business-Farbkombinationen
• Interaktives Feedback: Schaltflächenklicks, Formularvalidierung und andere interaktive Effekte
• Formularvalidierung: Erforderliche Feldvalidierung, Datenformatvalidierung

Beispiel einer Datenstruktur

Bitte generieren Sie eine vollständige HTML-Datei mit dem gesamten erforderlichen CSS- und JavaScript-Code, um sicherzustellen, dass alle Funktionen funktionsfähig sind und direkt in einem Browser ausgeführt werden können.

Werfen wir einen Blick auf die Testergebnisse. Die Logik ist tatsächlich recht komplex und testet die Kontextlänge, den ästhetischen Sinn und die logischen Verarbeitungsfähigkeiten des Modells.

In diesem Fall schlugen alle Modelle außer Deepseek fehl. Die Übersetzung von Claude 4 war, um ehrlich zu sein, ziemlich daneben.

Deepseek-R1-0528: Die aktualisierte Version von R1 ist sehr leistungsstark. Wie Sie sehen, ist die Benutzeroberfläche sehr professionell. Sie können neue Produkte erstellen, normale Outbound- und Inbound-Operationen durchführen und Produkt-, Bestandsverwaltungs- und Bestandsberichte auf drei Seiten aufteilen, was insgesamt sehr übersichtlich ist. Es gibt auch eine dedizierte Dashboard-Seite, und er hat einige Beispieldaten zum Testen erstellt. Die anderen Modelle verfügen über keine Daten, und das Hinzufügen von Produkten funktioniert nicht, sodass Tests völlig unmöglich sind.

Claude Opus 4: Es beginnt mit einer großen, sehr einfachen Benutzeroberfläche, die eine obere Navigationsleiste anstelle der bei SaaS-Plattformen üblichen Seitenleiste verwendet. Das Hinzufügen von Produkten führt beim Speichern zu einem Fehler, was Tests unmöglich macht.

Claude Sonett 4: Im Vergleich zu Opus 4 ist die Benutzeroberfläche noch einfacher. Ein Klick auf die Schaltfläche „Produkt hinzufügen“ reagiert nicht, und es erscheint kein Formular-Popup. Die anderen Seiten sind im Wesentlichen nur Platzhalter.

Gemini 2.5 Pro: Googles Version ist besser als die von Claude. Sie ermöglicht das Hinzufügen von Produkten und Läufen, weist aber Fehler auf. Beim ersten Versuch funktionierte sie, aber nicht, als ich ein Video aufnahm. Das Interaktionsdesign von Gemini ist jedoch recht komplex, da Bestandsverwaltung und Datenerfassung in einer einzigen Tabelle stattfinden, was die Bedienung zusätzlich erschwert.

Test 2: Pixel Animation Editor

Als Nächstes folgt ein Test der visuellen Fähigkeiten. Ich bat sie, mit P5.js einen Pixel-Art-Animationseditor zu erstellen, der Bewegungsmodi unterstützt und Punktformen, -größen, -geschwindigkeiten und andere Bedingungen anpasst.

Eingabeaufforderung: Erstellen Sie einen interaktiven Vollbild-Pixel-Art-Animationsgenerator auf Basis von P5.js, der die folgenden technischen Anforderungen erfüllt:

Kernfunktionen

• Implementieren Sie eine Vollbild-Pixel-Art-Animation mit P5.js, wobei die Animation den gesamten Ansichtsbereich abdeckt
• Die Gesamtfläche des Pixelrasters muss mindestens das 10-fache der sichtbaren Fläche betragen, um auch bei kleinstem Rasterabstand eine vollständige Abdeckung zu gewährleisten
• Bietet mehrere Animationsmodi: Welle, Puls, Kräuselung, Rauschen
• Unterstützt mehrere Punktformoptionen: Kreis, Quadrat, Kreuz, Dreieck, Raute usw.
• Alle Bedienfelder befinden sich auf der rechten Seite der Seite und können auf Mobilgeräten nach unten eingeklappt werden

Einstellbare Parameter

• Punktdichte: Steuern Sie die Anzahl der Punkte pro Zeile/Spalte
• Formgröße: Passen Sie die Größe der Punkte an
• Animationsgeschwindigkeit: Steuern Sie die Geschwindigkeit und Amplitude des Animationseffekts
• Rasterabstand: Passen Sie den Abstand zwischen den Punkten an

Technische Spezifikationen

• Verwenden Sie HTML5, TailwindCSS 3.0+ (über CDN eingeführt) und P5.js
• Implementieren Sie die vollständige Dunkel-/Hellmodus-Umschaltfunktion, standardmäßig gemäß den Systemeinstellungen
• Der Code muss eine Logik zur Leistungsoptimierung enthalten, die nur Punkte innerhalb des sichtbaren Bereichs und in der Nähe der Ränder rendert
• Animationen müssen reibungslos und ohne Verzögerungen ablaufen

Responsives Design

• Seiten müssen auf allen Geräten (Mobiltelefon, Tablet, Desktop) perfekt angezeigt werden
• Bedienfelder sollten in der mobilen Ansicht ein- und ausklappbar sein
• Optimieren Sie Layout und Schriftgrößen für unterschiedliche Bildschirmgrößen
• Sorgen Sie für ein gutes Touch-Erlebnis auf Mobilgeräten

Schnittstellenelemente

• Auswahl des Animationsmodus (Welle, Puls, Kräuselung, Rauschen)
• Formauswahl (zeigt verschiedene Formen mit Symbolen an)
• Schieberegler: Dichte, Größe, Geschwindigkeit, Abstand
• Schaltfläche zum Wechseln des Themas
• Anzeige von Matrix-Overlay-Informationen und Gesamtpunktzahl

Schaut euch die Ergebnisse an. Ehrlich gesagt hätte ich nicht erwartet, dass die anderen Modelle in diesem Test so schlecht abschneiden würden. Mit Ausnahme von Deepseek-R1 funktionierten die Animationen der anderen Modelle überhaupt nicht.

Deepseek-R1-0528: Absolut einwandfrei. Alle Tasten und Schieberegler funktionieren einwandfrei, und die Punkte bewegen sich reibungslos. Es wurden sogar Punktmatrixdaten hinzugefügt, und die Farben bleiben auch nach dem Wechsel in den Nachtmodus konsistent. Einziges kleines Manko: Der ausgewählte Status der Farbauswahl weist ein kleines Problem auf, das aber im Vergleich zur katastrophalen Leistung der anderen Modelle vernachlässigbar ist.

Claude Opus 4: Die gute Nachricht: Es handelt sich um Pixelkunst. Die schlechte Nachricht: Es bewegt sich nicht. Der Inhalt auf der rechten Seite lässt sich normal bedienen, aber die Farbgebung ist nach dem Wechsel in den Nachtmodus falsch.

Claude Sonett 4: Das ist eine Katastrophe. Es gibt keine Pixelgrafik, und selbst der Status der Schaltflächenauswahl fehlt. Die Schieberegler sind nur Punkte – man könnte genauso gut die Standardkomponenten verwenden.

Gemini 2.5 Pro: Meldet außerdem einen Fehler mit fehlendem Pixelraster. Der Inhalt auf der rechten Seite lässt sich normal bedienen und der Themenwechsel funktioniert einwandfrei, aber die Standardkomponenten sind etwas hässlich.

Test 3: Tool zur Extraktion von Bildverlaufsfarben

Dies ist ein Tool, das ich früher geschrieben habe. Die Logik wird nicht ausführlich beschrieben, der Stil hingegen eher. Die Hauptfunktion besteht darin, fünf Farbverlaufssätze aus einem Bild zu extrahieren.

Eingabeaufforderung: Erstellen Sie eine HTML-Webseite basierend auf dem folgenden Dateiinhalt. Unterstützen Sie das Extrahieren von fünf Farbverlaufssätzen aus hochgeladenen Bildern und ermöglichen Sie Benutzern das direkte Kopieren der fünf hexadezimalen Farbverlaufssätze. Die Farbextraktionsfunktion muss implementiert werden.

1. Verwenden Sie das visuelle Design im NetEase Cloud Music-Stil, einen weißen Hintergrund mit einer Farbe ähnlich #FE1110 als Highlight
2. Betonen Sie wichtige Punkte durch große Schriftarten oder Zahlen. Verwenden Sie übergroße visuelle Elemente, um Schwerpunkte hervorzuheben und einen Kontrast zu kleineren Elementen zu schaffen.
3. Mischen Sie chinesischen und englischen Text. Verwenden Sie fette, große chinesische Schriftzeichen und kleineren englischen Text als Akzente.
4. Verwenden Sie einfache Strichgrafiken zur Datenvisualisierung oder als dekorative Elemente.
5. Verwenden Sie den Transparenzverlauf der Hervorhebungsfarben, um einen technisch inspirierten Effekt zu erzielen, achten Sie jedoch darauf, dass die verschiedenen Hervorhebungsfarben nicht ineinander übergehen.
6. Imitieren Sie die Animationen der offiziellen Website von Apple, wobei das Scrollen mit der Maus die Animationen auslöst
7. Daten können aus Online-Diagrammkomponenten referenziert werden, wobei die Stile zum Thema passen
8. Verwenden Sie Framer Motion (über CDN)
9. Verwenden Sie HTML5, TailwindCSS 3.0+ (über CDN) und das erforderliche JavaScript
10. Verwenden Sie professionelle Symbolbibliotheken wie Font Awesome oder Material Icons (über CDN).
11. Vermeiden Sie die Verwendung von Emojis als primäre Symbole
12. Die Kapsel-Schaltfläche in der unteren linken Ecke zeigt den Twitter-Benutzernamen des Autors an.

In diesem Fall hat Claude wirklich gute Arbeit geleistet. Die Seitendetails und die Ästhetik von Deepseek-R1-0528 sind beeindruckend, die Funktionalität ist jedoch nicht implementiert. Die Seiten von Opus 4 und Sonnet 4 sind einfacher, aber zumindest funktional, während Gemini überhaupt nicht funktioniert.

Deepseek-R1-0528: Nachdem ich meine Eingabeaufforderung erneut verwendet habe, ist die Seitenästhetik von Deepseek wirklich unübertroffen. Er hat der Seite außerdem viele SEO-freundliche Inhalte hinzugefügt, beispielsweise Anwendungsszenarien und Verarbeitungszeiten. Die Anzeigekarten mit Farbverlauf sind ebenfalls sehr detailliert, die Farbauswahllogik ist jedoch nicht implementiert.

Claude Opus 4: Dieses Mal hat Claude uns nicht enttäuscht und die Seitenfunktionalität fertiggestellt. Der Inhalt ist allerdings sehr einfach gehalten und bietet nur Platz zum Hochladen von Bildern und Ergebnissen. Auch die Farbauswahl ist mangelhaft. Immerhin funktioniert es.

Claude Sonett 4: Sonnet 4 hat die Funktionalität ebenfalls vervollständigt und ich denke sogar, dass die Ergebnisse von Sonnet besser sind als die von Opus, obwohl es immer noch nicht so umfangreich ist wie Deepseek.

Gemini 2.5 Pro: Das hier ist das Schlimmste. Nicht nur fehlen die Seitendetails und die Ästhetik, auch die Funktionalität ist nicht implementiert und das Programm stürzt beim Start ab.

Test 4: Website mit täglichen Zitaten zu weißem Rauschen

Als Nächstes folgt ein Website-Generator mit weißem Rauschen, der sich perfekt für ein neues Tab-Seiten-Plugin eignet. Er unterstützt das Abspielen von weißem Rauschen von Spotify, und die Webseite zeigt

Aufforderung: Bitte helfen Sie mir, eine einfache und elegante Website mit täglichen Zitaten mit den folgenden Anforderungen zu erstellen:

Visuelles Design

• Hintergrundbild: Wählen Sie aus den folgenden Links nach dem Zufallsprinzip hochwertige Landschaftsbilder als Hintergrundbild aus
• Bildlinks: XXXX
• Bildverarbeitung: Fügen Sie eine schwarze Maske 25% und eine leichte Gaußsche Unschärfe hinzu, um sicherzustellen, dass der Text klar und lesbar bleibt
• Gesamtstil: Minimalistisch und modern, mit Landschaftsbildern als Webseitenhintergrund, um das Eintauchen zu verbessern
• Verwenden Sie anime.js (eingeführt über CDN: JsDelivr jsdelivr.com) für das Animationsframework, HTML5, TailwindCSS 3.0+ (eingeführt über CDN) und das erforderliche JavaScript und verwenden Sie professionelle Symbolbibliotheken wie Font Awesome oder Material Icons (eingeführt über CDN).

Zeitanzeigemodul

• Spitze: Zeigt das Monats- und Tagesformat (z. B. „29. Mai“) in einer kleineren Schriftart und zentriert an
• Zweite Reihe: Zeigt das Format „Woche X · Mondkalender X. Monat X. Tag“ in einer kleineren Schriftart an
• Center: Hebt das aktuelle Datum in großer weißer Schrift hervor, zentriert

Angebotsanzeigemodul

• Inhalt: Zeigt zufällig klassische Zitate chinesischer und ausländischer Philosophen und Schriftsteller an
• Layout: Zitate sind zentriert, die Schriftgröße ist moderat und der Zeilenabstand ist angenehm
• Namensnennung: Unten rechts wird „Schriftsteller, XXX“ oder „Philosoph, XXX“ angezeigt
• Zitatbibliothek: Enthält Zitate zu verschiedenen Themen wie Motivation, Lebenseinsichten und Weisheit

Musikwiedergabefunktion

• Standort: Untere linke Ecke der Seite, standardmäßig eingeklappt
• Inhalt: Spotify-Playlist mit weißem Rauschen einbetten
• Code:

Technische Umsetzung

• Responsives Design: Angepasst für Desktop- und Mobilgeräte
• Schriftartauswahl: Verwenden Sie elegante chinesische Schriftarten, eingeführt von Google Fonts
• Farbschema: Verwenden Sie hauptsächlich weißen Text, um die Lesbarkeit auf allen Hintergründen zu gewährleisten
• Ladeoptimierung: Lazy Loading von Bildern zur Verbesserung der Seitenleistung

Interaktive Funktionen

• Automatische Aktualisierung: Ändert automatisch jeden Tag das Hintergrundbild und das Zitat
• Manuelle Aktualisierung: Bietet eine Schaltfläche zum Aktualisieren, mit der Benutzer den Inhalt manuell ändern können

Copywriting-Stil

• Angebotsauswahl: Bevorzugen Sie kurze, positive und philosophische Zitate
• Sprachstil: Prägnant und kraftvoll, ohne übermäßige Länge
• Themenklassifizierung: Lebenseinblicke, inspirierendes Wachstum, weise Gedanken, emotionaler Ausdruck usw.

Bitte erstellen Sie eine vollständige HTML/CSS/JavaScript-Website gemäß den oben genannten Anforderungen und stellen Sie sicher, dass die Benutzeroberfläche ästhetisch ansprechend und funktional ist und eine gute Benutzererfahrung bietet.

Dieser Test dient lediglich der Beurteilung des ästhetischen Verständnisses jedes Modells. Diese Art von displayorientierter Webseite ist grundsätzlich realisierbar.

Man muss sagen, dass Claude Opus 4 in diesem Bereich immer noch recht souverän ist und eine hervorragende Detailgenauigkeit aufweist. Gemini 2.5 Pro ist ebenfalls gut und fügt Bildübergängen sogar Animationseffekte hinzu. Deepseek und Sonnet 4 liegen auf dem gleichen Niveau.

Deepseek-R1-0528: Ich habe Deepseek zuerst ausprobiert und fand es schon recht gut. Das erste ästhetische Problem war der Musik-Button in der unteren linken Ecke, der etwas zu flach wirkte. Auch der Zitatbereich hatte Probleme – die schwarze Maske hätte nicht hinzugefügt werden sollen, und die Textausrichtung war etwas daneben. Es wurde jedoch ein Animationseffekt für die Aktualisierung hinzugefügt.

Claude Opus 4: Die Ästhetik von Opus 4 ist wirklich makellos. Größe und Abstand aller Schriftarten sind sehr angenehm, und die Zitate berühmter Sprüche wurden sowohl im Zitattext als auch in den Anführungszeichen transparent dargestellt. Sogar der Spotify-Player wurde in eine Benutzeroberfläche mit einer Animation zum Ausklappen/Zusammenklappen integriert. Einfach perfekt.

Claude Sonett 4: Der Effekt von Sonnet 4 ähnelt dem Problem von Deepseek. Die Musikwiedergabetaste, die Textgröße, die Ausrichtung und der Abstand können alle weiter optimiert werden.

Gemini 2.5 Pro: Der Effekt von Gemini ist ebenfalls gut, würde aber durch das Entfernen des Textschattens noch besser werden. Die Benutzeroberfläche des Spotify-Players wurde ebenfalls angepasst, und die Textdetails sind in Ordnung. Der Übergangseffekt ist deutlich erkennbar und dehnt das Bild.

Test 5: Seitengenerierung der Schlaf-App

Als Nächstes folgt der Test der mobilen App. Jeder Teilnehmer soll eine Schlafüberwachungs-App erstellen. Die Aufgabe umfasst die technischen Anforderungen und das Design sowie die Erstellung mehrerer interaktiver Seiten.

Eingabeaufforderung: Anforderungen für die Entwicklung von Apps zur Schlafüberwachung

Projektübersicht

Bitte helfen Sie mir, eine komplette Schlafüberwachungs-App mit vier Hauptfunktionsseiten zu erstellen. Die Benutzeroberfläche sollte ästhetisch ansprechend und professionell sein.

Technische Stack-Anforderungen

Frontend-Technologien

– HTML5 – Seitenstruktur

– TailwindCSS v3.0+ – Style Framework (über CDN eingeführt)

– JavaScript – Notwendige Interaktionslogik

– Anime.js v4.0.2 – Bibliothek mit Animationseffekten

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

Symbole und Diagramme

• Symbolbibliothek: Font Awesome oder Material Icons (CDN)
• Diagrammkomponenten: Online-Diagrammkomponenten, Stile müssen mit dem Thema übereinstimmen
• Datenvisualisierung: Unterstützt die Diagrammanzeige von Schlafdaten

Designanforderungen

Responsives Design

• Vollständig ansprechendes Layout
• Mobile-First-Design
• Gute Darstellung auf Desktop- und Mobilgeräten

Interaktionseffekte

• Button-Interaktion: Leicht vergrößerter Effekt beim Hovern

Formularinteraktion: Zeigen Sie einen Farbverlaufsrahmen an, wenn das Eingabefeld fokussiert ist

Karteninteraktion: Schatten beim Schweben abdunkeln

Animationseffekte: Verwenden Sie Anime.js, um flüssige Seitenanimationen zu erzielen

Funktionale Seitenanforderungen

Bitte erstellen Sie alle für eine Schlafüberwachungs-App erforderlichen Seiten, einschließlich, aber nicht beschränkt auf:

• Startseite/Dashboard
• Schlafaufzeichnungsseite
• Datenanalyseseite
• Seite „Einstellungen“
• Andere zugehörige Funktionsseiten

Anforderungen an die Codeausgabe

• Jede Seite ist eine unabhängige HTML-Datei
• Klare Codestruktur mit vollständigen Kommentaren
• Stellen Sie sicher, dass alle CDN-Links zugänglich sind
• Stellen Sie vollständigen, ausführbaren Code bereit

In puncto mobiler Logik und Benutzeroberfläche stellte Claude Opus 4 erneut seine Leistungsfähigkeit unter Beweis und erstellte mehrere Seiten mit guter Logik. Die anderen Modelle generierten nur eine einzige Seite, doch Deepseek R1 0528 überzeugte in puncto Ästhetik mit einem ansprechenden Stil. Obwohl nur eine einzige Seite generiert wurde, war diese sehr vollständig.

Deepseek-R1-0528: Es wurde zwar nur eine Seite erstellt, die Gesamtästhetik ist jedoch gut. Die Details der Karten und die Handhabung der Symbole sind gut umgesetzt, und die gesamte Seite ist vollständig und umfangreich. Zusätzlich wurde für die Navigation Responsive Design implementiert, wodurch sich das Layout auf Mobil- und Desktopgeräten deutlich unterscheidet.

Claude Opus 4: Es ist zwar leistungsstark, nur Opus4 hat alle Seiten vollständig generiert, aber das ästhetische Design ist diesmal nicht so toll, da Webseitenlogik verwendet wird und die Navigationssymbole zu klein sind.

Claude Sonett 4: Es wurde nur eine einzige Seite erstellt und Fehler gemeldet, mit schlechtem ästhetischen Design, und die Aufgabe wurde gerade abgeschlossen.

Gemini 2.5 Pro: Google geht immer anders vor. Jede Seite wird einzeln generiert und liefert vier Dateien, die nicht miteinander interagieren können. Außerdem meldeten alle Seiten Fehler, da jede Seite nur Navigation und keinen Inhalt enthielt, was ziemlich enttäuschend ist.

Test 6: Komplexe Funktionalität – Tetris

Zum Abschluss gab es noch einen kleinen Spieletest. Ich habe ein relativ komplexes Tetris-Spiel mit Spezialblöcken, Themenwechsel, Blocklandevorhersage, Blockspeicherung und mehr entworfen – eine echte ultimative Herausforderung.

Aufforderung: Bitte helfen Sie mir, ein voll funktionsfähiges, optisch ansprechendes Tetris-Webspiel mit den folgenden Anforderungen zu erstellen:

Kernfunktionen des Spiels

1. Kompletter Tetris-Mechanismus: 7 Standardblöcke (I, O, T, S, Z, J, L)
2. Reibungslose Steuerung: Links- und Rechtsbewegung, Drehung, schnelles Ablegen, sofortiges Ablegen
3. Intelligentes Eliminierungssystem: unterstützt das Entfernen von 1-4 Zeilen gleichzeitig mit speziellen Animationseffekten
4. Progressives Schwierigkeitssystem: Erhöht automatisch die Drop-Geschwindigkeit und das Level basierend auf der Anzahl der eliminierten Zeilen

Erweiterte Funktionen

1. Vorschausystem: zeigt die nächsten und übernächsten Blöcke an
2. Hold-Funktion: Halten Sie die Hold-Taste gedrückt, um den aktuellen Block vorübergehend zu speichern. Kann nur einmal pro Runde verwendet werden
3. Geisterblöcke: Zeigt die Landeposition von Blöcken in halbtransparenter Form an
4. Kombisystem: Kontinuierliches Löschen gewährt zusätzliche Punkte und visuelle Effekte
5. Besondere Fähigkeiten:
   1. Bombenblock (räumt die Umgebung)
   2. Laser Clear (löscht die gesamte Reihe)
   3. Zeitpause (Blöcke hören 3 Sekunden lang auf zu fallen)

Anforderungen an das visuelle Design

1. Moderne Benutzeroberfläche:
   1. Farbverlaufshintergrund oder Partikeleffekte
   2. Spielpanel mit Glaseffekt
   3. Sanfte Animationsübergänge
   4. Responsive Design für verschiedene Bildschirme
2. Umfangreiche visuelle Effekte:
   1. Sanfte Animation fallender und rotierender Blöcke
   2. Explosions- oder Blitzeffekte bei Beseitigung
   3. Bildschirm-Shake-Effekt, wenn die Combo erreicht wird
   4. Feieranimation beim Level-Upgrade
3. Themensystem: Mindestens 3 verschiedene visuelle Themen zum Umschalten zwischen

Soundeffektsystem

1. Vollständiges Sound-Feedback: Bewegung, Drehung, Landung, Eliminierung, Spielende usw.
2. Hintergrundmusik: Hintergrundmusik des sich wiederholenden Spiels
3. Lautstärkeregelung: Soundeffekte und Hintergrundmusiklautstärke unabhängig voneinander einstellbar

Spielmodi

1. Klassischer Modus: traditionelles Tetris-Gameplay
2. Zeitlich begrenzter Modus: Erreiche die höchste Punktzahl innerhalb einer vorgegebenen Zeit
3. Herausforderungsmodus: voreingestellte Hindernisse zur Erhöhung des Schwierigkeitsgrades
4. Zen-Modus: kein Zeitdruck, purer Spielspaß

Datenstatistikfunktionen

1. Echtzeitstatistiken: aktueller Punktestand, Level, Anzahl der gelöschten Linien, Spielzeit
2. Geschichte: höchste Punktzahl, bestes Level, Gesamtspielzeit
3. Erfolgssystem: Schalte verschiedene Spielerfolge frei
4. Lokaler Speicher: Spielaufzeichnungen und Einstellungen speichern

Technische Anforderungen

1. Verwendet reines HTML5/CSS3/JavaScript, keine externen Frameworks erforderlich
2. Klare Codestruktur: objektorientierte Programmierung, modulares Design
3. Leistungsoptimierung: flüssige 60FPS-Animation, keine Verzögerung
4. Kompatibilität: unterstützt gängige moderne Browser
5. Responsives Design: Kompatibel mit PCs und Mobilgeräten

Benutzererfahrung

1. Intuitive Anweisungen: Integriertes Tutorial und Schaltflächenaufforderungen
2. Pause/Fortsetzen-Funktion: Pausieren Sie das Spiel jederzeit
3. Einstellungsmenü: Passen Sie den Schwierigkeitsgrad des Spiels, Soundeffekte, visuelle Effekte usw. an.
4. Spielstatus wird gespeichert: Unterstützt das Speichern und Fortsetzen des Spiels

Anforderungen an die Codequalität

1. Detaillierte Kommentare: Jede Funktion und jedes wichtige Codesegment muss eine Beschreibung haben
2. Fehlerbehandlung: Umfassender Mechanismus zur Erfassung und Behandlung von Ausnahmen
3. Eleganter Code: Befolgen Sie bewährte Methoden, leicht verständlich und zu warten
4. Erweiterbarkeit: Einfaches Hinzufügen neuer Funktionen in der Zukunft

Bitte stellen Sie vollständige HTML-Dateien mit sämtlichem CSS- und JavaScript-Code bereit, um sicherzustellen, dass diese direkt im Browser ausgeführt werden können. Der Code sollte professionelle Programmierkenntnisse und ein tiefes Verständnis der Spieleentwicklung erkennen lassen.

Im Minispiel hat Claude einiges zu bieten. Sowohl Opus als auch Sonnet generierten die entsprechenden Tetris-Blöcke wie gewünscht, insbesondere die Logik für Spezialblöcke. Deepseek kümmerte sich um das von Claude übersehene Thema, übersah aber die Spezialblöcke, was dazu führte, dass Gemini 2.5 Pro unspielbare Blöcke generierte.

Deepseek-R1-0528: Die Aufgabe wurde sehr gut und gemäß den Vorgaben erledigt, allerdings wurde das spezielle Blockdesign weggelassen und überhaupt nicht implementiert. Dies könnte an Problemen beim Verfolgen der Eingabeaufforderungen liegen. Die gesamte Webseite ähnelt einer Spieloberfläche, wobei alle Schaltflächen wie Standardkomponenten erscheinen.

Claude Opus 4: Die Logik für Spezialblöcke und andere Logiken wurde problemlos fertiggestellt, die Aufforderung zum Themenwechsel wurde jedoch ignoriert, da er diese nicht implementiert hatte. Im Vergleich zu den Problemen von DeepSeek ist dies ein kleineres Problem, aber die Benutzeroberfläche ist fest codiert und verfügt über keine reaktionsfähige Logik. Daher sind die Proportionen leicht abweichend, wodurch einige Schaltflächen nicht anklickbar sind.

Claude Sonett 4: Ähnlich wie Opus, aber ich finde Sonnet 4 besser als Opus. Die Seitenanpassung ist ebenfalls gut. Es fühlt sich an, als hätte Sonnet gewonnen, da es alle erforderlichen Funktionen erfüllt.

Gemini 2.5 Pro: Gemini hat ständig Probleme mit komplexer Logik. Dieses Mal war es völlig unbrauchbar, da die Steinplatzierung einen Fehler hatte, der es unmöglich machte, vorherzusagen, wo sie landen würden. Es ist das Schlimmste.

Ich denke, Sie sind inzwischen genauso erstaunt über die Leistung des DeepSeek-R1 wie ich.

Es ist kaum zu glauben, dass es sich nur um eine kleine Modellaktualisierung handelt. Vergleichen wir die Preise dieser Modelle mit DeepSeek R1 0528.

Opus 4 ist 30-mal teurer, und zwar basierend auf den Preisen von Openrouter. Der offizielle Preis wäre sogar noch atemberaubender.

Modell	Kontextlänge	Eingabepreis ($/M Token)	Ausgabepreis ($/M Token)	Bildpreis ($/K Token)
DeepSeek R1 0528	160.000	0.50	2.18	–
Gemini 2.5 Pro-Vorschau	1000k	1.25	10	5.16
Claude Sonett 4	200.000	3.00	15	4.80
Claude Opus 4	200.000	15.00	75	24.00

Als jemand, der sich täglich mit KI-Nachrichten beschäftigt, habe ich unzählige „Durchbrüche“ erlebt, die sich letztendlich als „enttäuschend“ herausstellten. Aber dieses Mal ist es anders. DeepSeek-R1 hat mir echte Hoffnung gegeben.

Ein 30-facher Preisunterschied bei nahezu gleichwertiger Leistung.

Wir müssen weder exorbitante Preise mehr zahlen, um die besten KI-Programmiermodelle zu nutzen, noch schmerzhafte Kompromisse zwischen Kosten und Qualität eingehen. Noch inspirierender ist, dass dies unser eigenes Modell ist.

Dieser Satz wurde von einer KI geschrieben und ich finde ihn großartig: Die wahre Revolution beginnt oft, wenn normale Menschen nach den Sternen greifen.