KI-Programmierwerkzeuge im Quervergleich: Wer macht wirklich High-Fidelity-Prototyping?

Die KI-Programmierung hat sich zu einem der am stärksten frequentierten Bereiche der aktuellen KI-Welle entwickelt. Von CursorundWindsurf bis zu v0 von Vercel haben sich zahlreiche Programmieragenturen entwickelt. Hinter ihrem Aufstieg steht die Anthropic ClaudeundOpenAI GPTundGoogle Gemini Der Sprung in der Codegenerierungsfähigkeit der zugrunde liegenden großen Modelle wie dem

Doch welche Fähigkeiten haben diese KI-Programmierwerkzeuge ab Juni 2025 wirklich? Wie groß ist die Qualitätslücke bei der Codegenerierung zwischen den verschiedenen Modellen? In diesem Bericht werden die wichtigsten KI-Programmierprodukte auf dem Markt und ihre integrierten Modelle anhand einer einheitlichen, realen Entwicklungsanforderung Seite an Seite verglichen, um eine intuitive und informative Betrachtung zu ermöglichen.

Benchmarking: eine App namens "Mein MBTI-Freundeskreis".

Um die kombinierten Fähigkeiten dieser Werkzeuge effektiv zu testen, haben wir eine Aufgabe von mittlerer Komplexität entworfen: die Erstellung eines High-Fidelity-Design-Prototyps einer Anwendung mit dem Namen "Mein MBTI AI Freundeskreis".

Das Kernkonzept der App besteht darin, den Nutzern eine emotionale Begleitung zu bieten. Die Nutzer können mit Hilfe von Karten Lebensmomente auf der Zeitachse wie in einem Tagebuch festhalten, und eine Reihe von KI-Freunden mit unterschiedlichen MBTI-Persönlichkeiten, die in das System integriert sind, reagieren auf die Beiträge des Nutzers entsprechend ihrer eigenen "Persona". Diese Aufgabe testet nicht nur das Verständnis der KI für funktionale Logik, sondern stellt auch klare Anforderungen an das Design der Benutzeroberfläche, die Codestruktur und die Fähigkeiten der Front-End-Entwickler.

Hier ist die zentrale Aufforderung, die für diese Überprüfung verwendet wurde:

我想开发一款名为“我的MBTI AI朋友圈”的中文情感陪伴 App，功能需求如下：
1.  **核心功能**：用户可以通过卡片+时间线的交互方式，记录想法、计划、待办事项、情绪、链接等生活点滴。本质上，它首先是一款 AI 日记软件。
2.  **AI 交互**：系统预设了一系列不同 MBTI 性格的 AI Agent。这些 Agent 会根据各自的性格特点，对用户的记录做出不同的回应。
3.  **社交关系**：用户可以选择并关注不同的 AI Agent。
4.  **分享功能**：用户可以分享自己的记录以及 AI Agent 的回应。
5.  **核心价值**：通过 AI 的回应和分享功能，为用户提供情感陪伴。
现在，需要输出该 App 的高保真原型图。请通过以下方式完成所有界面的原型设计，并确保这些原型可以直接用于前端开发：
1.  **用户体验分析**：分析 App 的主要功能和用户需求，确定核心交互逻辑。
2.  **产品界面规划**：作为产品经理，定义关键界面，确保信息架构合理。
3.  **高保真 UI 设计**：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4.  **HTML 原型实现**：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件库）让界面更加精美。代码文件需要拆分，保持结构清晰。
5.  **文件结构要求**：
-   每个界面作为一个独立的 HTML 文件存放，例如 `home.html`、`profile.html`、`settings.html`。
-   `index.html` 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 `iframe` 的方式嵌入其他 HTML 页面，并将所有页面在 `index` 页面中平铺展示，而非通过链接跳转。
6.  **真实感增强**：
-   界面尺寸模拟 iPhone 15 Pro，并进行圆角化处理。
-   使用真实的 UI 图片（可从 Unsplash、Pexels 等图库选取），而非占位符。
-   添加模拟 iOS 顶部状态栏和底部 TabBar 导航栏。
请按照以上要求，在 `design-trae-DeepSeekR1` 文件夹中生成完整的 HTML 代码。

Die Herausforderung bei diesem Prompt besteht darin, dass die KI mehr als nur ein Code-Generator sein muss, sondern auch die Rolle eines Produktmanagers, UI/UX-Designers und Front-End-Ingenieurs übernehmen muss. Dies gilt insbesondere für iframe Das Erfordernis von Kacheldarstellungen und getrennten Dateistrukturen ist ein direkter Test für die Fähigkeit der KI, den Code auf Projektebene zu organisieren.

Runde 1: Bewertungen nativer IDE-Integrationstools

Wir haben uns zunächst die in lokale IDEs integrierten Plugins für die KI-Programmierung angesehen, hauptsächlich in Form des Cursor im Gesang antworten Trae ist repräsentativ für diese Art von Werkzeug. Der Vorteil solcher Werkzeuge ist ihre tiefe Integration in den bestehenden Arbeitsablauf des Entwicklers.

Cursor

Cursor + Claude 3.5 Sonett

• Punktzahl: 60
• Bewertung: Qualifiziertes raues Wohnen

Cursor zusammen mit Claude 3.5 Sonnet Die Kombination der beiden Methoden hat die Aufgabe im Grunde erledigt. Auf der funktionalen Ebene werden die meisten Kernanforderungen korrekt umgesetzt, aber es wird eine redundante und nicht zu öffnende Seite erzeugt. Trotz der Mängel erfüllt der Prototyp als erste Version die Anforderungen der Richtlinie.

Cursor + Claude 4 Sonett

• Wertung: 90
• Bewertung: Geliefert mit Veredelungen

Das ist eine beeindruckende Kombination.Claude 4 Sonnet Die Leistung dieses Projekts ist weit über den Erwartungen, die Funktion Umsetzung ist extrem genau, auch in der "create"-Seite, sorgfältig die Post-Typ und Stimmung Auswahl und andere interaktive Elemente hinzugefügt. das UI-Design ist schön, das Material Füllung ist an Ort und Stelle, und die visuelle Wirkung ist ausgezeichnet. Das UI-Design ist schön, das Material ist gut ausgefüllt, und die visuelle Wirkung ist ausgezeichnet. Der Grad der Fertigstellung ist so hoch, dass es fast direkt an das Front-End für die weitere Entwicklung geliefert werden kann.

Cursor + Gemini 2.5 Pro

• Ergebnis: 59
• Bewertung: Kurzer Satz mit kritischen Fehlern

Gemini 2.5 Pro Die Leistung von Prompt ist nicht so gut, wie sie hätte sein können. Während die Grundfunktionalität und die UI-Elemente in Ordnung waren, wurde der von Prompt ausdrücklich geforderte Effekt der "direkten Kacheldarstellung" nicht erreicht; stattdessen wurden Seiten erzeugt, die manuelle Klicks erforderten, um zwischen ihnen zu wechseln. Dies ist ein kritischer Funktionsfehler, der die Benutzerfreundlichkeit des Prototyps stark beeinträchtigt und ihn zum Scheitern verurteilt.

Cursor + GPT-4o

• Punktzahl: 70
• Kommentare deaktiviert für Erfrischend einfach

GPT-4o Die Ausgabe von (sic o3) entspricht funktional genau den Anforderungen, die Schnittstelle ist vollständig und die Symbole werden korrekt angezeigt. Der Designstil ist klar und minimalistisch, und die Gesamtwirkung ist besser als die des Claude 3.5 Sonnetdie als Prototyp von guter Qualität für einen kurzen Satz angesehen werden kann.

Trae

Trae + Claude 3.5 Sonett

• Punktzahl: 80
• Kommentare deaktiviert für Exquisite Schlichtheit

Interessant ist, dass die gleichen Claude 3.5 Sonnet Modell, im Trae Die Leistung auf der Plattform ist besser als auf dem Cursor Die Benutzeroberfläche ist viel ästhetischer und materialreicher. Es macht nicht nur alles richtig, sondern die Benutzeroberfläche ist auch viel ästhetischer und materialreicher, obwohl das Design etwas weniger beeindruckend ist als das des Claude 4 Sonnet Version, sondern bereits eine Qualitätslieferung.

Trae + Claude 3.7 Sonett

• Ergebnis: 59
• Bewertung: dieselben kritischen Schwachstellen

Überraschenderweise ist die aktualisierte Claude 3.7 Sonnet Die Leistung der Version hat sich stattdessen verschlechtert. Mit der Gemini 2.5 Pro denselben Fehler gemacht hat, hat sie nicht erkannt iframe Flaches Display, was ebenfalls ein fataler Funktionsmangel ist. Trotz des ästhetisch ansprechenden UI-Designs kann es aufgrund der fehlenden Kernanforderungen nur in Verbindung mit dem Gemini Die Version des Buches wird der Version des Buches gegenübergestellt.

Trae + Claude 4 Sonnet

• Wertung: 90
• Fazit: Wieder mit Abschlüssen geliefert

Trae zusammen mit Claude 4 Sonnet Auch hier erweist sich die Kombination des Modells als entscheidend. Das Ergebnis ist ähnlich wie das des Cursor Die Version der Plattform ist ebenfalls ausgezeichnet, mit voller Funktionalität, einer schönen Benutzeroberfläche und sogar mit der Möglichkeit, Details zum Hochladen von Anhängen in die Erstellungsfunktion aufzunehmen. Dies ist wieder einmal ein Beweis für die Claude 4 Sonnet Führung bei solchen Aufgaben.

Trae + Gemini 2.5 Pro

• Punktzahl: 50
• Fazit: Skizzenhaft und mangelhaft grob

Gemini 2.5 Pro existieren Trae Die Leistung auf ist sogar besser als auf dem Cursor Noch schlimmer. Zusätzlich zu dem Hauptfehler, dass es nicht gelungen ist, eine Kacheldarstellung zu erreichen, leidet die Schnittstelle unter fehlenden Symbolen und der allgemeine Stil ist sehr streng.

Trae + DeepSeek R1

• Punktzahl: 40
• Bewertung: aufgegebenes Rohmaterial

DeepSeek R1 Die Leistung ist die schlechteste in der lokalen IDE-Gruppe. Nicht nur, dass sie nicht kacheln kann, sondern sogar der grundlegende Seitenwechsel ist fehlerhaft, wobei die Fehlerseite nach dem Klicken auf Tab erscheint. Die Funktionalität und die Benutzeroberfläche waren unvollständig, und der Prototyp war im Grunde unbrauchbar.

Runde 2: Überprüfung der Cloud-basierten KI-Programmierplattform

Als Nächstes wenden wir uns den cloudbasierten Produkten zu. Dabei handelt es sich um Tools, die ohne lokale Installation direkt im Browser laufen und ein weiteres Paradigma der KI-Programmierung darstellen.

Replit

• Punktzahl: 50
• Fazit: Unzulängliche Einfachheit

Veteran Cloud IDE Replit (Modell unbekannt) war in diesem Test nur mittelmäßig. Es erfüllt auch nicht die Kernanforderung der Kacheldarstellung. Obwohl das Grundgerüst und die Symbole der Benutzeroberfläche beibehalten wurden, ist das Gesamtdesign rudimentär, und es besteht ein deutlicher Abstand zur Generierungsqualität von Mainstream-KI-Tools.

Liebenswert

• Wertung: 95
• REVIEW: Beeindruckende Maßanfertigungen

Lovable Das Ergebnis ist augenöffnend und das größte Zugpferd in diesem Test. Es setzt alle Anforderungen in Prompt perfekt um, einschließlich der iframe Kachel-Anzeige. Funktionell werden nicht nur alle grundlegenden Funktionen implementiert, sondern auch erweiterte Optionen wie z. B. Datenschutzeinstellungen auf der Erstellungsseite hinzugefügt. Die Benutzeroberfläche ist wunderschön gestaltet und reich an Materialien, und die visuelle Erfahrung übertrifft sogar die des Claude 4 Sonnet Versionen. Dies zeigt, dass ein KI-Produkt, das für eine bestimmte Aufgabe, wie die Erstellung von Front-End-Prototypen, optimiert ist, ein allgemeines Modell übertreffen kann.

v0

Eingeführt von Vercel v0 ist ein Werkzeug, das sich auf die Erstellung von Front-End-Komponenten konzentriert. Wir haben es getestet v0-1.5-md im Gesang antworten v0-1.5-lg Zwei Modelle.

v0 + v0-1,5-md

• Punktzahl: 55
• Bewertung: Grob fehlerhaft

v0-1.5-md Die Leistung des Modells ist durchschnittlich. Außerdem gelingt es nicht, eine Kacheldarstellung zu erreichen, und es fehlen Schnittstellensymbole. Obwohl das Design minimalistisch ist, schmälern die Funktionsmängel und der fehlende Inhalt seinen Wert als Prototyp.

v0 + v0-1,5-lg

• Punktzahl: 65
• Bewertung: Qualifiziertes raues Wohnen

parametrisch v0-1.5-lg Die Leistung des Modells hat sich verbessert. Die Benutzeroberfläche ist vollständig, aber die Symbole müssen noch manuell ausgefüllt werden. Der Gesamteffekt ist ähnlich wie bei der Cursor + Claude 3.5 Sonnet Die Kombination ist vergleichbar mit der eines kompetenten Prototyps aus der ersten Auflage, der auf eine weitere Verzierung wartet.

Bolzen.neu

• Punktzahl: 40
• Bewertung: aufgegebenes Rohmaterial

Bolt.new Leistungsindikatoren DeepSeek R1 Es ist genauso schlecht. Nicht nur, dass es nicht gelingt, eine gekachelte Darstellung zu erreichen, die resultierenden UI-Elemente leiden unter schwerem Layout-Crunching und fehlenden Inhalten und sind im Grunde unbrauchbar.

Bewertungen Scorecard

Obwohl dieser Überblick auf einem einzigen Anwendungsfall basiert und die Ergebnisse etwas zufällig sind, zeigt er deutlich die aktuelle Landschaft des Marktes für KI-Programmierwerkzeuge.

Die endgültigen Ergebnisse der Evaluierung führen zu einer klaren Schlussfolgerung: Bei Aufgaben wie dem Front-End-Prototyping ist die Wahl des Modells von zentraler Bedeutung für die Qualität des Endergebnisses.Claude 4 Sonnet eine bemerkenswerte Kombination von Fähigkeiten unter Beweis gestellt, und die Lovable Diese Branchen bieten das beste Erlebnis durch tiefgreifende Optimierung.