Welche KI erstellt die coolste Webseite? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

Einleitung

Als meinen ersten Schritt in der Entwicklung von Smartphone-Apps entwickle ich eine sehr einfache App namens „Sumineko“ (Ecken-Katze), mit der man Katzenvideos endlos und zufällig in einer Bildschirmecke „nebenbei ansehen“ kann.

Um diese App im offiziellen Store zu registrieren, muss ich eine Datenschutzrichtlinie im Web bereitstellen. Da ich das ohnehin machen muss, habe ich beschlossen, gleich eine Landing Page (LP) für diese App zu erstellen.

In diesem Artikel lasse ich das Grundgerüst der LP von repräsentativen LLMs und KI-Coding-Diensten erstellen und vergleiche die Ergebnisse nach eigenem Ermessen und subjektiv.

Vorstellung der Teilnehmer

WARNING

Hinweis zur Gleichbehandlung
Reine LLMs (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) und Entwicklungssysteme mit integrierten LLMs (bolt.new, v0, Lovable) haben unterschiedliche Systemarchitekturen. In diesem Artikel werden sie jedoch der Einfachheit halber gleichgestellt, mit dem Ziel, die Qualität der Webseiten-Generierung bei identischen Prompts subjektiv zu vergleichen. Bitte beachten Sie daher, dass dieses Experiment keinen Anspruch auf wissenschaftliche Strenge erhebt.

Prompts

Ich habe die folgenden zwei Muster vorbereitet, um die Improvisationsfähigkeit sowie die Fähigkeit zur treuen Umsetzung von Anforderungen locker zu überprüfen.

• Muster mit Minimalvorgaben (Omakase): Enthält nur die notwendigsten Anforderungen.

• Muster mit detaillierten Instruktionen: Enthält vergleichsweise detaillierte Anforderungen.

Muster mit Minimalvorgaben

Ein Muster, bei dem hauptsächlich ein kurzer Überblick über „Sumineko“ und die erforderlichen Abschnitte gegeben werden, während Design und Wortlaut der KI überlassen bleiben.

# Landing Page Creation for "Sumineko" (Corner Cat)

## Request
Design and implement a landing page (Top page only) for the smartphone app "Sumineko".
**You have full creative freedom** regarding the layout, color palette, typography, and copywriting. Please build what you consider to be the **most attractive and modern** design for this product.

## Product Concept
- **App Name**: Sumineko (Corner Cat)
- **Core Value**: A "healing" app that lets users watch cat videos in a Picture-in-Picture (PiP) window while multitasking on their phone.
- **Vibe**: Relaxing, Minimal, Cute but sophisticated.

## Technical Stack
- Next.js 15 (App Router)
- Tailwind CSS
- TypeScript
- Lucide React (for icons)

## Essential Sections (Skeleton)
Please include the following three sections. The order and presentation are up to you.

### 1. Hero Section
- Create a catchy headline and sub-headline that conveys the app's appeal.
- Include "App Store" and "Google Play" buttons (UI only).
- Use a placeholder or CSS art for the main visual.

### 2. Experience / Demo Section (Critical Logic)
This section must adapt based on the user's device:
- **On Desktop (PC)**: Display a mock "Video Player" and a "Start Picture-in-Picture" button to let users simulate the experience in the browser.
- **On Mobile**: Display a message like "Experience the demo on PC" and guide them to the App Store buttons instead.

### 3. Collection Section
- Introduce the feature where users can "collect" the cats they have watched.
- visualize this "collection" aspect (e.g., a grid of cat placeholders, a list, etc.).

## Assets & Copy
- **No assets provided**: Use placeholders (e.g., `via.placeholder.com` or CSS shapes) for all images and videos.
- **Copywriting**: Please write engaging English copy for headings and descriptions based on the product concept.

## Goal
Surprise me with a high-quality, polished UI that balances "Healing/Cute" with "Modern Web Design."

Muster mit detaillierten Instruktionen

Ein Muster für „Kontrollfreaks“, das zusätzlich zum Überblick über „Sumineko“ und den erforderlichen Abschnitten auch detaillierte Strukturen pro Abschnitt, Wortlaut und Designaspekte wie Farbgebung vorgibt.

# Landing Page Creation for "Sumineko" (Corner Cat)

## Project Overview
Create a landing page (Top page only) for the smartphone app "Sumineko" (Corner Cat), which allows users to watch cat videos in Picture-in-Picture (PiP) mode while multitasking. The PC browser version offers a free trial, while the smartphone version is a paid app.

## Assets
- **No assets are provided in advance.**
- Please use **placeholders** (e.g., solid colors, CSS patterns, or placeholder image services like `via.placeholder.com`) for all images, icons, and videos.
- Assume the file paths for images will be logically placed in `/public/images/` for future replacement, but use placeholders for now.

## Technical Requirements
- **Framework**: Next.js 15 (App Router)
- **Styling**: TailwindCSS
- **Language**: TypeScript
- **Deployment**: Targeted for Cloudflare Pages
- **i18n**: Foundation for multi-language support required (manage text in JSON files).
  - Create the **English** version as the default.
- **Code Quality**: Ensure components are modular and reusable. Avoid monolithic files.
- **Images**: Use standard `<img>` or Next.js `<Image>` with placeholder sources.
- **Videos**: Lazy loading implementation (Intersection Observer).
- **Fonts**: System fonts or optimized Fonts (e.g., Inter or a rounded font for a soft look).

## Environment Variables
Assume the following environment variables are used:
- `NEXT_PUBLIC_STORE_MODE` - Values: `coming-soon` or `live`
- `NEXT_PUBLIC_APP_STORE_URL` - URL for App Store
- `NEXT_PUBLIC_GOOGLE_PLAY_URL` - URL for Google Play

## Color Palette
- **Background**: #FAF8F5 (Warm off-white)
- **Main Text**: #8B7355 (Brownish)
- **Accent**: Add a soft, harmonious color if necessary.

## Design Guidelines
- Minimal and clean.
- Focus on "what we want to show the user" in each section.
- A soft, healing atmosphere suitable for a cat app.
- No header required.

---

## Page Structure

### 1. Top Page (`/`)

#### Section 1: Hero

**Layout**: 2 columns (Text on Left, Video on Right).

**Left Side:**
- **Mascot Image**: Use a placeholder.
- **Catchphrase**: "Cats in the Corner of Your Screen."
- **Sub-copy**: "Just open and play. Infinite cat videos for your multitasking moments."

- **3 Selling Points (Use icons for visual appeal):**
  1. **"Instant Comfort"** - One tap to play. No searching, no choosing.
  2. **"Heal Your Mind"** - Perfect for when you feel tired, stressed, or lonely.
  3. **"Stay Focused"** - Unintrusive PiP window. Work and study with cats by your side.

- **Store Buttons:**
  - If `NEXT_PUBLIC_STORE_MODE` is `coming-soon` -> Show "Coming Soon" label.
  - If `NEXT_PUBLIC_STORE_MODE` is `live` -> Show Store Links.

- **Supplementary Text**: "One-time purchase. Yours forever."

**Right Side:**
- **Demo Video Frame**:
  - Placeholder for WebM video (muted, loop, auto-play).
  - Ensure a poster image (thumbnail) can be set.

---

#### Section 2: Experience Section

**PC View:**
- **Heading**: "Try Sumineko in Your Browser"
- **Description**: "Click the button below to start the Picture-in-Picture player. Enjoy the cats while you work on other tasks."
- **Video Player Frame**: Placeholder (Logic implementation not required yet).
- **"Start PiP" Button**: UI only (Functionality to be implemented later).

**Mobile View:**
- **Heading**: "Try the Web Demo on Desktop"
- **Description**: "Open this page on your computer to try the Picture-in-Picture mode for free."
- **Action**: Display Store Buttons prominently.

---

#### Section 3: Collection Introduction

- **Heading**: "Build Your Cat Collection"
- **Description**: "Every cat you meet is saved to your history. Revisit your favorites anytime."
- **Visual**: Placeholder for Collection Screen Screenshot.
- **Note**: Indicate clearly that this feature is exclusive to the smartphone app.

---

#### Section 4: Final CTA

- **Heading**: "Take the Cats Wherever You Go"
- **Action**: Store Buttons (Reuse component from Hero).

---

#### Section 5: Footer

- **Links**:
  - Privacy Policy (Link to `/privacy` - page implementation not required)
  - Contact (External link, URL changes based on locale):
    - ja -> `https://yukapero.com/ja/contact`
    - en-US -> `https://yukapero.com/en/contact`
    - (and so on for other locales, default to `en/contact`)
- **Copyright**: © 2025 yukapero

---

## Responsive Design

### PC (1024px+)
- Full feature display.
- Hero: 2-column layout (Text Left, Video Right).
- Experience Section: Show Video Player + PiP Button.

### Tablet (768px - 1023px)
- Hero: Keep 2 columns but compact.
- Experience Section: Same as PC.

### Smartphone (767px-)
- Hero: 1 column (Text Top, Video Bottom).
- Experience Section: Switch to "Experience on PC" message.
- Emphasize Store Buttons.

---

## i18n Infrastructure

- Load all text from JSON files (e.g., `/locales/en.json`).
- **Do not hardcode text in components.**
- Structure should allow easy addition of other languages later.
- Locale switching via URL path (`/en/`, `/ja/`) or similar mechanism.

---

## Accessibility (Basic)

- Proper `alt` attributes for images.
- Focus indicators for buttons/links.
- Sufficient color contrast for readability.

---

## Notes

- **No logic required** for video playback or PiP function (UI only).
- **Metadata/OGP**: Use temporary dummy data.
- **Favicon**: Use a placeholder or comment out the reference if file is missing.

Zusammenfassung der Ergebnisse

NOTE

Obwohl responsive Anpassungen vorgenommen wurden, behandelt dieser Artikel nur die Desktop-Ansicht.

Muster mit Minimalvorgaben

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Muster mit detaillierten Instruktionen

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Detaillierte Betrachtung der einzelnen Ergebnisse

v0 (v0 Agent)

Minimal-Prompt

Das Muster mit Minimalvorgaben hat ein sehr klassisches UI-Design mit äußerst zurückhaltender Farbgebung, was im Guten wie im Schlechten einen sehr „sicheren“ Eindruck macht.
Da Bilder, Videos und Icons nur Platzhalter sind, wirkt die Schlichtheit vielleicht noch stärker.
Würde man echte Materialien einfügen, könnte diese Schlichtheit genau die richtige Balance sein, um Screenshots und Videos hervorzuheben.

Prompt mit detaillierten Instruktionen

Das Muster mit detaillierten Instruktionen hält sich treu an die Vorgaben des Prompts, ist aber insgesamt ebenfalls zurückhaltend im Design.
Es gibt keine fett gedruckten Texte zur Betonung, und der Eindruck ist – positiv wie negativ – eher flach, kaum anders als beim Minimal-Muster.

bolt.new (Claude Sonnet 4.5)

Minimal-Prompt

Das Muster mit Minimalvorgaben verwendet ein Design und eine Farbgebung auf Basis von Orange, was weich und lebendig wirkt. Der Blick wird natürlich auf die orangefarbenen Texte und Bilder gelenkt, was einen raffinierten Eindruck hinterlässt.

Werbetext, der ohne Scrollen sichtbar ist

Ein kleines Detail, aber im HERO-Bereich – also dem Bereich, der ohne Scrollen sichtbar ist – befindet sich ein Element mit dem Text „Experience the magic“, das Interesse weckt. Solche unaufdringlichen Werbeelemente sind ein guter Kniff, um die Absprungrate zu senken.

Allerdings wirkten das Smartphone-Design im HERO-Bereich und die Elemente im Sammlungs-Bereich (trotz Platzhaltern) irgendwie altbacken, billig und amateurhaft.

Prompt mit detaillierten Instruktionen

Beim Muster mit detaillierten Instruktionen ist bolt zwar sehr treu zum Prompt, aber diese Treue scheint die Stärken von bolt eher zu unterdrücken.
Es ist insgesamt keineswegs schlecht, aber im Vergleich zum Minimal-Muster wirkt es zu eintönig.
Das liegt nicht an bolt, sondern daran, dass sich das niedrige Niveau meines Prompts direkt im Ergebnis widerspiegelt.

Lovable

Minimal-Prompt

Beim Muster mit Minimalvorgaben fällt als Erstes die Katzenillustration mit dem völlig entstellten Gesicht auf.

Entstellte Katze 1

Entstellte Katze 2

Da ich kein Material bereitgestellt habe, wurde freundlicherweise welches generiert, aber das surreale Design, das aussieht wie von einem Kindergartenkind gemalt, bringt einen unweigerlich zum Lachen.
Da dies aber nur Platzhalter sind, und man diese entstellten Katzen ignoriert, ist das Design der anderen Teile gar nicht schlecht: Katzen im Hintergrund verstreut und wichtige Teile mit braunen oder orangen Akzentfarben hervorgehoben.

Prompt mit detaillierten Instruktionen

Das Muster mit detaillierten Instruktionen hält sich sehr genau an die Vorgaben, zeigt aber überall Einfallsreichtum: Wichtige Texte sind fett gedruckt, eine zur App passende weiche Schriftart wird verwendet, und der PiP-Start-Button ist in einem Orange hervorgehoben, das im Prompt nicht explizit verlangt wurde.

Weiche Schriftart passend zur App

Button, der sich gut vom Hintergrund abhebt

Gemini 3.0 Pro

Minimal-Prompt

Das Muster mit Minimalvorgaben ist im Guten wie im Schlechten frei von Spielereien. Das Design und die Farbgebung wirken insgesamt straff, eher wie eine Business-App oder ein Tool als eine entspannende App.
Es ist nur ein Vorurteil, aber die Richtung wirkt typisch für Google.
Die Designrichtung passt zwar offensichtlich nicht zur App, aber wenn man das beiseitelässt, ist die Qualität insgesamt sehr hoch.
Es wirkt wie „nach dem Webdesign-Lehrbuch erstellt“, ohne Macken, sodass man ihm Aufgaben beruhigt anvertrauen kann.

Darstellung von PiP

Darstellung des Browsers

Ein Detail, aber die Reproduktion der Platzhalter-Illustrationen für PiP und Browser ist ebenfalls hochwertig.
Das ist ein kleiner, aber feiner Punkt, da man sich das Endergebnis gut vorstellen kann.

Prompt mit detaillierten Instruktionen

Das Muster mit detaillierten Instruktionen ist wie bei den anderen KIs den Anweisungen treu und leidet unter dem niedrigen Niveau der Designvorgaben im Prompt. Aber es gibt feine Details: Das Smartphone-Bild und das Sammlungsbild sind leicht geneigt, was als improvisiertes Designelement Bewegung reinbringt und einen sehr schönen Akzent setzt.

Geneigtes Smartphone

Geneigtes Sammlungsbild

Außerdem ist die Katze, die unauffällig im Footer läuft, sehr schick.

Katze, die auf dem Footer läuft

Opus 4.5

Minimal-Prompt

Das Muster mit Minimalvorgaben hat ein insgesamt helles, buntes und niedliches Design, das das Thema „entspannende Katzen-App“ gut widerspiegelt.
Der Header hat ein modernes Design mit Transparenz und ist sehr stilvoll.

Buntes und einheitliches Design

Mit verstreuten Icons im Hintergrund, Farbverläufen in den Überschriften und einer vielfältigen Farbpalette wirkt das Design verspielt, aber dennoch konsistent und nicht zusammengewürfelt.

Prompt mit detaillierten Instruktionen

Im Vergleich zum Minimal-Muster hat das Muster mit detaillierten Instruktionen die Stärken von Opus 4.5 komplett zunichtegemacht und führte zu einem schlagartig langweiligen Design.
Ähnlich wie bei bolt scheint sich hier das niedrige Niveau des Prompts direkt im Ergebnis niedergeschlagen zu haben.

GPT 5.2

Minimal-Prompt

Beim Muster mit Minimalvorgaben ähnelt die Design- und Farbrichtung Opus, mit bunten Farbverläufen als Akzente an verschiedenen Stellen und einer hellen Atmosphäre.
Wenn ein Laie wie ich solche vielfältigen Verläufe verwendet, wirkt es oft billig, aber hier scheint es schön und gut abgestimmt zu sein.

Andere Modelle verwendeten Emojis oder Fotos von Katzen als Platzhalter, aber GPT 5.2 verzichtet darauf gänzlich.
Außerdem zeigt sich im HERO-Bereich ein deutlicher Unterschied zu anderen Modellen.

HERO-Bereich

Der gesamte HERO-Bereich ist als Kartenelement dargestellt, und das Smartphone-Bild ist quadratisch statt hochkant.
Allerdings ragen Elemente am unteren Rand des Smartphone-Bildschirms heraus, und die Zeile mit den Download-Links ist auf gleicher Ebene wie der App-Werbetext platziert, was unübersichtlich wirkt. Selbst als Design-Laie empfinde ich hier eine gewisse Unstimmigkeit.

Prompt mit detaillierten Instruktionen

Das Muster mit detaillierten Instruktionen führte wie bei Opus und bolt zu einem langweiligen Design.
Wie bereits mehrfach erwähnt, ist dies wohl ein Zeichen dafür, dass es sich – im Guten wie im Schlechten – treu an den Prompt hält.
Während Lovable jedoch Orange als Akzentfarbe hinzufügte, eine zur App passende weiche Schriftart wählte und Gemini Elemente absichtlich neigte, waren bei GPT 5.2 keinerlei solcher kreativen Einfälle zu sehen.

Subjektives und voreingenommenes Fazit und Zusammenfassung

Mein KI-Ranking

Basierend auf den Ergebnissen habe ich die KIs in der Reihenfolge sortiert, die mir am besten gefallen hat, inklusive Begründung.
Übrigens bin ich in Sachen Design ein blutiger Anfänger ohne Fachwissen, daher basiert die Bewertung rein auf der Intuition und dem Empfinden eines Laien.

Dass Gemini 3.0 Pro alles bauen kann und toll ist, war kürzlich ein Thema in den sozialen Medien, aber auch im Designbereich ist es hervorragend – Hut ab.
Bisher habe ich hauptsächlich Claude Code (Max Plan) und Cursor verwendet, aber das Ergebnis hat mich stark dazu gebracht, einen Wechsel zu Antigravity in Erwägung zu ziehen.

Wer kein Designtalent hat, sollte sich im Prompt zurückhalten

Wie sicherlich jeder anhand der Ergebnisse bemerkt hat, zeigten einige Modelle beim Muster mit detaillierten Instruktionen zwar Ansätze von Einfallsreichtum, aber im Grunde entstanden langweilige und unscheinbare Ergebnisse.
Insbesondere die Beschränkung der Farbgebung auf Brauntöne passend zur App-Themenfarbe scheint das monotone Design noch verstärkt zu haben.
Da KIs im Guten wie im Schlechten grundsätzlich treu den Anweisungen folgen, ist das wohl nur natürlich, aber Leute ohne Designgespür sollten sich nicht übernehmen und versuchen, das Design im Prompt bis ins Detail festzulegen.
Wenn man Bereiche, von denen man wenig versteht, bis zu einem gewissen Grad der KI überlässt, wird diese wahrscheinlich basierend auf Best Practices in diesem Bereich entscheiden.
Zwar entsteht dann oft ein „Das habe ich schon mal irgendwo gesehen“-Gefühl, aber das schien mir immer noch viel besser zu sein, als wenn ein Laie wild daran herumpfuscht.

Die wahre Hölle beginnt erst jetzt

Die hier gezeigten Ergebnisse sind nur der Startpunkt. Darauf aufbauend ist ein Prozess notwendig, in dem man Richtung und Details immer wieder mit der KI abgleicht, um sich der idealen UI/UX anzunähern.
In meinem Fall dauert dieser Prozess besonders lange, da ich trotz mangelndem Talent eine seltsame Obsession für UI habe.
Betrachtet man dies, sind Faktoren wie die kurze Denkzeit der KI (kurze Trial-and-Error-Zyklen), eine niedrige Bug-Rate und die Fähigkeit, die Absicht der Anweisungen genau zu erfassen und in die Implementierung umzusetzen, viel wichtiger als das allererste Ergebnis.
Unter diesem Gesichtspunkt würde die Rangliste wahrscheinlich ganz anders aussehen als oben aufgeführt.
Es ist also zweifellos voreilig, nur anhand dieser Ergebnisse über Gut und Schlecht zu urteilen. Probieren Sie es daher bitte nur als Referenz auch selbst aus.