¿Qué IA crea la página web más impresionante? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

Introducción

Como mi primer desarrollo de aplicación móvil, estoy creando "Sumineko", una aplicación muy sencilla que permite ver vídeos de gatos de forma aleatoria e infinita en una esquina del smartphone mientras haces otras cosas.

Para registrar esta aplicación en la tienda oficial, es necesario tener una página de política de privacidad en la web, así que ya que estaba, decidí crear una Landing Page (LP) para la aplicación.

Por lo tanto, en este artículo, pediré a los LLM representativos y a servicios de codificación con IA que creen la base de la LP, y compararé los resultados basándome en mi juicio arbitrario y sesgado.

Presentación de los participantes

WARNING

Sobre la igualdad de condiciones por conveniencia
Aunque los LLM puros (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) y los sistemas de apoyo al desarrollo con LLM integrado (bolt.new, v0, Lovable) tienen arquitecturas de sistema diferentes, en este artículo se tratan como iguales por conveniencia, con el objetivo de comparar subjetivamente la calidad de la generación de páginas web con el mismo prompt. Por lo tanto, tenga en cuenta que este experimento no tiene rigor científico.

Prompts

He preparado los siguientes 2 patrones para verificar de manera informal la capacidad de improvisación y la fidelidad a los requisitos.

• Patrón "A tu elección" (Automático): Solo se indican los requisitos mínimos.

• Patrón de instrucciones detalladas: Se describen requisitos relativamente detallados.

Patrón "A tu elección"

Principalmente se indica un resumen sencillo de "Sumineko" y las secciones necesarias, dejando el diseño y los textos a elección de la IA.

# 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."

Patrón de instrucciones detalladas

Además del resumen de "Sumineko" y las secciones necesarias, este patrón incluye instrucciones detalladas sobre la estructura de cada sección, los textos e incluso aspectos de diseño como la paleta de colores.

# 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.

Resumen de los resultados

NOTE

Aunque se ha implementado el diseño responsivo, en este artículo solo se tratará la visualización de escritorio.

Patrón "A tu elección"

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Patrón de instrucciones detalladas

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Examinando los resultados individualmente

v0（v0 Agent）

Prompt A tu elección

El patrón "A tu elección" presenta un diseño de UI súper ortodoxo con una combinación de colores muy discreta, dando la impresión de ser una opción segura en el mejor y peor sentido.
Dado que las imágenes, vídeos e iconos son provisionales, la sensación de simplicidad puede verse acentuada.
Quizás si se introdujeran los materiales reales, esta simplicidad podría ser el equilibrio perfecto para resaltar elementos como capturas de pantalla y vídeos.

Prompt de instrucciones detalladas

Por otro lado, el patrón de instrucciones detalladas sigue fielmente el contenido del prompt, pero el diseño general sigue siendo muy discreto.
No hay énfasis mediante negritas en el texto, y da una impresión plana, para bien o para mal, no diferenciándose mucho del patrón "A tu elección".

bolt.new （Claude Sonnet 4.5）

Prompt A tu elección

El patrón "A tu elección" tiene un diseño suave y vivo basado en tonos naranjas, dirigiendo naturalmente la mirada hacia el texto y las imágenes naranjas, lo que da una impresión sofisticada.

Texto de reclamo visible sin necesidad de hacer scroll

Es un detalle menor, pero en la sección HERO, es decir, en la posición visible sin hacer scroll, hay un elemento de reclamo sutil que despierta interés como "Experience the magic" (¡Experimenta la magia!), una buena estrategia para reducir la tasa de abandono.

Sin embargo, aunque sean elementos provisionales, el diseño del smartphone en la sección HERO y la falta de profundidad en los elementos de la sección de colección me transmitieron una sensación un tanto anticuada, barata y amateur.

Prompt de instrucciones detalladas

Por otro lado, el patrón de instrucciones detalladas es ciertamente muy fiel al prompt, pero esa fidelidad excesiva parece haber matado las virtudes de bolt.
No es que sea malo en general, pero comparado con el patrón "A tu elección", es demasiado monótono.
Esto no es culpa de bolt, sino que refleja directamente el bajo nivel del prompt que preparé.

Lovable

Prompt A tu elección

En el patrón "A tu elección", lo primero que llama la atención es la ilustración del gato con la cara deformada.

Gato con cara deforme 1

Gato con cara deforme 2

Como no proporcioné materiales, amablemente los prepararon por mí, pero el diseño surrealista parece dibujado por un niño de jardín de infancia y te hace reír involuntariamente.
Sin embargo, dado que estos son solo provisionales, si ignoramos a los gatos de cara deforme y miramos el diseño de otras partes, no está mal: hay gatos por todas partes en el fondo y las partes que se quieren enfatizar están bien resaltadas con colores de acento marrón y naranja.

Prompt de instrucciones detalladas

El patrón de instrucciones detalladas es muy fiel a las indicaciones, pero se ven toques de ingenio en varios lugares, como poner en negrita el texto que se quiere enfatizar y usar una fuente suave acorde con la aplicación, o resaltar el botón de transición a PiP en color naranja, aunque no se especificó explícitamente en el prompt.

Fuente suave acorde con la app

Botón que destaca bien por el contraste con el fondo

Gemini 3.0 Pro

Prompt A tu elección

El patrón "A tu elección", para bien o para mal, carece de alegría y tiene un diseño y combinación de colores muy sobrios en general, dando la impresión de una aplicación o herramienta de negocios más que de una aplicación de relajación.
Es solo un prejuicio, pero la dirección parece muy propia de Google.
En cuanto a la dirección del diseño, claramente no encaja con la aplicación, pero dejando eso de lado momentáneamente, la calidad general se siente muy alta.
Da la impresión de "¡Hecho siguiendo el libro de texto de diseño web!", sin excentricidades, y parece que se le puede confiar el trabajo con tranquilidad.

Representación de PiP

Representación del navegador

Es un detalle menor, pero la fidelidad de las ilustraciones provisionales como el PiP y el navegador es alta.
Es un punto que se agradece sutilmente, ya que facilita tener una imagen del resultado final.

Prompt de instrucciones detalladas

El patrón de instrucciones detalladas, al igual que otras IA, es fiel a las indicaciones y se ve arrastrado por el bajo nivel de las instrucciones de diseño del prompt. Sin embargo, en detalles menores, improvisó incorporando un diseño con movimiento donde la imagen del smartphone y la imagen de la pantalla de colección están ligeramente inclinadas, lo cual es un muy buen acento.

Smartphone inclinado

Imagen de colección inclinada

Además, el gato caminando discretamente en el pie de página también es elegante.

Gato caminando sobre el footer

Opus 4.5

Prompt A tu elección

El patrón "A tu elección" tiene un diseño generalmente brillante, colorido y adorable, reflejando claramente el tema de "aplicación de relajación con gatos" en el diseño.
El encabezado también tiene un diseño moderno con transparencia, muy elegante.

Diseño colorido y coherente

Con iconos dispersos en el fondo, gradaciones en los títulos y una combinación de colores variada, parece un diseño excelente que, a pesar de estar lleno de alegría, mantiene la coherencia y no se siente desordenado.

Prompt de instrucciones detalladas

Por otro lado, si comparamos el patrón de instrucciones detalladas con el patrón "A tu elección", se han eliminado por completo las virtudes de Opus 4.5, convirtiéndose de repente en un diseño aburrido.
Al igual que con bolt, parece que el bajo nivel del prompt se ha materializado tal cual.

GPT 5.2

Prompt A tu elección

El patrón "A tu elección" tiene una dirección de diseño y color similar a Opus, utilizando gradaciones coloridas como acento en varios lugares, creando una atmósfera brillante.
Cuando un aficionado como yo intenta usar este tipo de gradaciones variadas, inevitablemente termina pareciendo barato, pero aquí da la impresión de estar bien unificado y limpio.

Mientras que otros modelos usaban emojis de gatos o fotos para los materiales provisionales, GPT 5.2 no utiliza nada de eso.
Además, la diferencia con otros modelos se hace notable en la sección HERO.

Sección HERO

Toda la sección HERO se representa como un elemento de tarjeta, y la imagen del smartphone se representa como un cuadrado en lugar de un rectángulo vertical.
Sin embargo, los elementos de la parte inferior de la pantalla del smartphone sobresalen, y la línea donde se encuentran los enlaces de descarga está colocada al mismo nivel que el texto de reclamo de la aplicación, lo que lo hace ver un poco desordenado; aunque soy un aficionado al diseño, siento cierta incongruencia.

Prompt de instrucciones detalladas

El patrón de instrucciones detalladas se convirtió en un diseño aburrido al igual que Opus y bolt.
Como he mencionado varias veces, creo que esto es una muestra de ser fiel al prompt, para bien o para mal.
Sin embargo, en Lovable se añadía el naranja como color de acento o se suavizaba la fuente para adaptarla a la aplicación, y en Gemini se inclinaban los elementos a propósito; esos pequeños toques de ingenio brillaban, pero en GPT 5.2 no se vio nada de eso.

Evaluación general y resumen sesgado

Ranking de IAs favoritas

Basándome en los resultados obtenidos, reordenaré las IAs según mi preferencia, añadiendo las razones.
Por cierto, soy un completo novato en diseño y no tengo conocimientos especializados, así que esta evaluación se basa puramente en la intuición y experiencia de un aficionado.

Recientemente se ha hablado mucho en redes sociales sobre que "¡Gemini 3.0 Pro puede crear cualquier cosa!", y me quito el sombrero ante su excelencia también en el aspecto del diseño.
Hasta ahora he usado principalmente Claude Code (Max Plan) y Cursor, pero este resultado me ha hecho pensar seriamente que cambiarse a Antigravity podría ser una opción.

Las personas sin sentido del diseño no deberían excederse en el prompt

Creo que cualquiera que vea los resultados lo habrá notado: en el patrón de instrucciones detalladas, aunque se vieron algunos toques de ingenio en algunos modelos, básicamente resultaron en productos sobrios y aburridos.
Especialmente, el hecho de haber limitado la combinación de colores solo a tonos marrones para coincidir con el tema de la aplicación parece haber impulsado el diseño más monótono.
Dado que la IA es básicamente fiel a las instrucciones, para bien o para mal, esto puede ser natural, pero las personas sin sentido del diseño no deberían estirar el brazo e intentar diseñar detalladamente a través del prompt.
Al dejar ciertas áreas que no entendemos bien en manos de la IA, esta debería tomar decisiones basándose generalmente en las mejores prácticas de esa área.
Haciendo esto, inevitablemente surge esa sensación de "esto lo he visto en algún lado", pero sentí que es mucho mejor que dejar que un aficionado lo toquetee al azar.

El verdadero infierno comienza ahora

El resultado de esta vez es solo el punto de partida; basándose en esto, es necesario un proceso de ajuste constante de la dirección con la IA para acercarse a la UI/UX ideal.
En mi caso, a pesar de no tener gusto, soy particular con la UI, por lo que este proceso lleva especialmente mucho tiempo.
Teniendo esto en cuenta, más que el resultado del primer intento, pueden ser mucho más importantes factores como el tiempo de pensamiento de la IA (ciclos cortos de prueba y error), la baja tasa de errores, y la capacidad de captar con precisión la intención de las instrucciones y llevarlas a la implementación.
Desde esa perspectiva, el orden del ranking probablemente sería totalmente diferente al mencionado anteriormente.
Por lo tanto, no hay duda de que juzgar la superioridad solo con estos resultados es precipitado, así que espero que lo prueben ustedes mismos, aunque sea solo como referencia.