Quelle IA crée la page Web la plus cool ? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

Introduction

Pour ma première incursion dans le développement d'applications mobiles, je développe "Sumineko", une application très simple qui permet de regarder des vidéos de chats en boucle et de manière aléatoire dans un coin de l'écran de son smartphone tout en faisant autre chose.

Pour enregistrer cette application sur les stores officiels, il est nécessaire de disposer d'une page de politique de confidentialité sur le Web. Puisqu'il faut le faire, j'ai décidé de créer une Landing Page (LP) pour cette application.

Ainsi, dans cet article, je vais demander aux principaux LLM et services de codage par IA de créer la base de cette LP, et je comparerai le résultat de manière arbitraire et subjective.

Présentation des concurrents

WARNING

Note sur le traitement équivalent par commodité
Bien que les LLM purs (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) et les systèmes d'aide au développement intégrant des LLM (bolt.new, v0, Lovable) aient des architectures système différentes, cet article les traite sur un pied d'égalité par commodité. L'objectif est de comparer subjectivement la qualité des pages Web générées avec le même prompt. Veuillez noter que cette expérience n'a aucune rigueur scientifique.

Les Prompts

J'ai préparé les 2 modèles ci-dessous pour vérifier de manière informelle leur capacité d'improvisation et leur fidélité aux exigences.

• Modèle "Carte blanche" : mentionnant uniquement les exigences minimales.

• Modèle "Instructions détaillées" : décrivant des exigences relativement précises.

Modèle "Carte blanche"

Ce modèle présente principalement un bref aperçu de "Sumineko" et les sections nécessaires, en laissant le design et le texte à l'appréciation de l'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."

Modèle "Instructions détaillées"

Ce modèle "pointilleux" spécifie non seulement l'aperçu de "Sumineko" et les sections nécessaires, mais entre également dans les détails de la structure de chaque section, le libellé et les aspects du design tels que la palette de couleurs.

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

Résumé des résultats

NOTE

Bien que le responsive design soit pris en charge, cet article ne traite que de l'affichage sur ordinateur.

Modèle "Carte blanche"

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Modèle "Instructions détaillées"

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Regardons les résultats en détail

v0 (v0 Agent)

Prompt Carte blanche

Pour le modèle "Carte blanche", le design UI est très classique avec une palette de couleurs extrêmement sobre, donnant une impression de "sans risque" absolu, pour le meilleur et pour le pire.
Comme les images, vidéos et icônes sont temporaires, cela accentue peut-être l'impression de simplicité.
Si l'on y insérait de vrais contenus, cette simplicité pourrait au contraire constituer un bon équilibre qui mettrait en valeur les captures d'écran et les vidéos.

Prompt Instructions détaillées

Quant au modèle "Instructions détaillées", bien qu'il respecte fidèlement le contenu du prompt, le design global reste là aussi très modeste.
Il n'y a pas de mise en gras pour souligner le texte, ce qui donne une impression de platitude, pour le meilleur et pour le pire, et l'impression générale ne diffère pas beaucoup de celle du modèle "Carte blanche".

bolt.new (Claude Sonnet 4.5)

Prompt Carte blanche

Le modèle "Carte blanche" présente un design doux et vivant basé sur la couleur orange. L'œil est naturellement guidé vers le texte et les images orange, ce qui donne une impression sophistiquée.

Texte d'appel visible sans défilement

Un point de détail intéressant : dans la section HERO, c'est-à-dire la partie visible sans défilement, il y a un élément d'appel discret mais intrigant : "Experience the magic (Faites l'expérience de la magie)", ce qui est une bonne astuce pour réduire le taux de rebond.

Cependant, même s'il s'agit d'éléments temporaires, le design du smartphone dans la section HERO et l'aspect plat des éléments de la section collection m'ont donné une impression un peu vieillotte, bon marché et amateur.

Prompt Instructions détaillées

Pour le modèle "Instructions détaillées", il est très fidèle au prompt, ce qui est bien, mais cette fidélité semble avoir tué les qualités de bolt.
Ce n'est pas mauvais dans l'ensemble, mais c'est trop monotone comparé au modèle "Carte blanche".
Ce n'est pas la faute de bolt, mais cela reflète probablement directement le faible niveau du prompt que j'ai préparé.

Lovable

Prompt Carte blanche

Dans le modèle "Carte blanche", la première chose qui saute aux yeux est l'illustration du chat dont le visage est déformé.

Chat au visage déformé 1

Chat au visage déformé 2

Comme je n'ai pas fourni de matériel, ils ont eu la gentillesse d'en préparer, mais le design surréaliste, digne d'un dessin d'enfant de maternelle, prête à rire.
Cependant, ce ne sont que des éléments temporaires. Si l'on ignore ces chats au visage déformé pour regarder le reste du design, ce n'est pas mal : il y a des chats un peu partout en arrière-plan et les parties importantes sont bien mises en valeur avec des couleurs d'accentuation marron et orange.

Prompt Instructions détaillées

Le modèle "Instructions détaillées" est très fidèle aux instructions, mais on y voit aussi de l'ingéniosité : les textes importants sont en gras avec une police douce adaptée à l'application, et le bouton de bascule PiP est mis en valeur en orange (ce qui n'était pas spécifié dans le prompt).

Police douce adaptée à l'application

Bouton qui ressort bien par contraste avec le fond

Gemini 3.0 Pro

Prompt Carte blanche

Le modèle "Carte blanche" manque de fantaisie, pour le meilleur et pour le pire. Avec un design et des couleurs globalement stricts, il donne l'impression d'une application ou d'un outil professionnel plutôt que d'une application de détente.
C'est peut-être un préjugé, mais c'est une direction très "Google".
Bien que la direction du design ne corresponde clairement pas à l'application, si l'on met cela de côté, la qualité globale est très élevée.
Cela donne l'impression d'avoir été fait "selon le manuel de conception Web", sans bizarrerie, ce qui inspire confiance.

Représentation du PiP

Représentation du navigateur

C'est un détail, mais la reproduction des illustrations temporaires comme le PiP ou le navigateur est également de haute qualité.
C'est un point appréciable car cela permet de se faire une bonne idée du résultat final.

Prompt Instructions détaillées

Le modèle "Instructions détaillées" est fidèle aux instructions comme les autres IA, et bien qu'il soit tiré vers le bas par le faible niveau des instructions de design du prompt, il intègre une touche d'improvisation avec un design dynamique où l'image du smartphone et l'image de l'écran de collection sont légèrement inclinées. C'est un très bon accent.

Smartphone incliné

Image de collection inclinée

De plus, le chat qui marche nonchalamment dans le pied de page est également élégant.

Chat marchant sur le pied de page

Opus 4.5

Prompt Carte blanche

Le modèle "Carte blanche" présente un design globalement lumineux, coloré et mignon. On voit bien que le thème "application de chat apaisante" a été correctement reflété dans le design.
L'en-tête a également un design moderne avec de la transparence, ce qui est très élégant.

Design coloré et cohérent

Les icônes éparpillées en arrière-plan, les dégradés dans les titres et la palette de couleurs variée témoignent d'un aspect ludique, tout en conservant une cohérence de design sans impression de désordre. C'est un excellent design.

Prompt Instructions détaillées

En revanche, le modèle "Instructions détaillées", comparé au modèle "Carte blanche", a complètement tué les qualités d'Opus 4.5, aboutissant à un design soudainement ennuyeux.
Comme pour bolt, il semble que le faible niveau du prompt se soit manifesté directement dans le résultat.

GPT 5.2

Prompt Carte blanche

Le modèle "Carte blanche" a une direction de design et de couleurs similaire à Opus, utilisant des dégradés colorés comme accents ici et là, créant une atmosphère lumineuse.
Quand un amateur comme moi essaie d'utiliser ce genre de dégradés variés, cela fait souvent "cheap", mais ici, j'ai l'impression que c'est bien agencé et propre.

Alors que les autres modèles utilisaient des émojis de chats ou des photos pour les éléments temporaires, GPT 5.2 ne semble rien utiliser de tel.
De plus, la différence avec les autres modèles est flagrante dans la section HERO.

Section HERO

Toute la section HERO est représentée comme un élément de carte, et l'image du smartphone est représentée par un carré et non un rectangle vertical.
Cependant, les éléments en bas de l'écran du smartphone dépassent, et la ligne contenant les liens de téléchargement est placée au même niveau que le texte promotionnel de l'application, ce qui crée un encombrement. Même en tant qu'amateur en design, je ressens un léger malaise.

Prompt Instructions détaillées

Le modèle "Instructions détaillées" est devenu un design ennuyeux, tout comme pour Opus et bolt.
Comme je l'ai mentionné à plusieurs reprises, c'est probablement le résultat de sa fidélité au prompt, pour le meilleur et pour le pire.
Cependant, alors que Lovable ajoutait du orange comme couleur d'accent et adoucissait la police, et que Gemini inclinait les éléments, de petites touches d'ingéniosité brillaient ailleurs ; avec GPT 5.2, je n'ai rien vu de tel.

Conclusion et évaluation générale (subjective et arbitraire)

Classement de mes IA préférées

Sur la base des résultats obtenus, voici mon classement des IA que j'ai préférées, avec mes raisons.
Rappelons que je suis un grand débutant en design et que je n'ai aucune connaissance spécialisée, il s'agit donc d'une évaluation basée sur l'intuition et le ressenti d'un amateur.

Le fait que Gemini 3.0 Pro puisse tout créer est un sujet brûlant sur les réseaux sociaux récemment, et je tire mon chapeau à ses excellentes capacités en matière de design également.
Jusqu'à présent, j'utilisais principalement Claude Code (Max Plan) et Cursor, mais ce résultat m'a fait penser très fort qu'il pourrait être judicieux de passer à Antigravity.

Ceux qui n'ont pas le sens du design ne devraient pas trop en faire dans les prompts

Comme tout le monde l'a probablement ressenti en voyant les résultats, le modèle "Instructions détaillées", bien que montrant quelques astuces sur certains modèles, a essentiellement produit des résultats sobres et ennuyeux.
Je pense que le fait d'avoir restreint la palette de couleurs aux tons bruns pour correspondre au thème de l'application a particulièrement contribué à rendre le design monotone.
Comme les IA sont fondamentalement fidèles aux instructions, c'est peut-être naturel, mais les personnes sans sens du design ne devraient pas essayer d'aller trop loin en entrant dans les détails du design dans leurs prompts.
En laissant une certaine liberté à l'IA sur les domaines que l'on ne maîtrise pas bien, elle devrait généralement prendre des décisions basées sur les meilleures pratiques dans ce domaine.
Bien sûr, cela donne inévitablement un côté "déjà-vu", mais j'ai eu l'impression que c'était bien mieux que le "bricolage au hasard" d'un amateur.

Le véritable enfer commence maintenant

Les résultats obtenus ici ne sont qu'un point de départ. Sur cette base, il est nécessaire d'ajuster la direction avec l'IA à maintes reprises pour se rapprocher de l'UI/UX idéale.
Dans mon cas, bien que n'ayant pas de sens artistique, je suis bizarrement pointilleux sur l'UI, donc cette étape prend particulièrement du temps.
Dans cette optique, plus que le premier résultat, la rapidité de réflexion de l'IA (la brièveté du cycle essai-erreur), le faible taux de bugs et la capacité à saisir précisément l'intention des instructions pour les implémenter sont bien plus importants.
De ce point de vue, le classement serait probablement complètement différent de celui présenté ci-dessus.
Il est donc certain qu'il est prématuré de juger de la supériorité uniquement sur ces résultats, et je vous invite à essayer par vous-même à titre de référence.