Un témoignage de première main : GPT 5.2 Codex a généré, à partir d'un seul prompt et en moins de cinq minutes, un site web entièrement structuré, stylisé et fonctionnel. Vous découvrirez le prompt exact utilisé, ce que le modèle a réussi, où il a trébuché, et comment associer génération de code et outils d'images par IA pour mettre en ligne rapidement des pages prêtes pour la production.
J’ai tapé une seule phrase. Vingt secondes plus tard, la première balise HTML est apparue. Quand mon café a fini de refroidir sur le côté droit de mon bureau, un site web entièrement structuré, stylisé et en partie fonctionnel s’affichait dans ma fenêtre de navigateur. Cette phrase était le prompt. GPT-5.2 a écrit le reste.
Ce n’est pas une expérience de pensée. J’ai fait cela un mardi après-midi, sans préparation, sans modèles de départ, sans npm install. Juste un prompt, un fichier vide et un chronomètre. Voici ce qui s’est passé minute par minute, ce que le modèle a parfaitement réussi, où il a craqué, et ce que vous devriez faire différemment si vous essayez vous-même.
La plupart des gens confondent GPT-5.2 avec un chatbot. Cette vision le sous-estime. Oui, vous pouvez lui parler, mais GPT-5.2 se décrit mieux comme un moteur de code axé sur le raisonnement, qui communique en langage courant. Il a été entraîné sur un volume énorme de code couvrant des dizaines de langages, de frameworks et de paradigmes, ce qui signifie qu’il n’écrit pas seulement de la syntaxe, il écrit l’intention.
Le modèle Codex d’origine, sorti quelques années avant GPT-5.2, était déjà remarquable. Vous décriviez ce que vous vouliez et il produisait du code fonctionnel. Mais il manquait de raisonnement global. Il pouvait remplir une fonction, mais peinait à concevoir un système complet. GPT-5.2 fonctionne différemment. Il peut garder en tête un modèle mental de l’ensemble de votre projet dans son contexte, prendre proactivement des décisions structurelles et signaler ses propres hypothèses avant qu’elles ne deviennent des bogues.
La version 5.2 a amélioré deux points particulièrement importants pour le développement web :
Ces deux qualités rendent possible un site web en cinq minutes. Les modèles précédents pouvaient écrire le code. Celui-ci écrit du code dont un développeur humain pourrait être fier.
J’ai lancé un chronomètre. Cinq minutes, un prompt, zéro correction pendant la génération. L’objectif était de voir ce que GPT-5.2 produirait sans être guidé pas à pas.
Voici le prompt exact, sans modification :
« Créez-moi un site web d’une seule page pour un photographe indépendant. Il doit comporter une barre de navigation, une section d’accueil avec un slogan, une grille de portfolio avec six images de remplacement, une section à propos avec une courte biographie, et un formulaire de contact. Utilisez du HTML5 sémantique, du CSS natif avec une palette blanc cassé chaleureux et vert olive foncé, et un minimum de JavaScript pour la validation du formulaire de contact. Aucune bibliothèque externe. »
C’est tout. Pas de maquette filaire. Pas de site de référence. Aucun code couleur fourni.
Dans les 30 premières secondes, GPT-5.2 avait produit une déclaration <!DOCTYPE html> avec l’attribut lang approprié, un <head> avec des balises <meta> incluant des propriétés Open Graph que je n’avais pas mentionnées, et un <nav> sémantique avec des libellés aria. Ce dernier détail ne figurait pas dans mon prompt. Le modèle l’a ajouté de lui-même, car il considère l’accessibilité comme un standard du web, et non comme un supplément facultatif.
La grille de portfolio est apparue avec CSS Grid, en mise en page adaptative sur 3 colonnes. La section d’accueil occupait toute la hauteur de la fenêtre, avec un arrière-plan prévu pour un échange d’image. La section à propos utilisait une mise en page à deux colonnes, avec un espace réservé d’image circulaire à gauche et le texte de biographie à droite.
Ce qui m’a frappé, ce n’était pas seulement la vitesse. C’étaient les décisions. Le modèle a choisi des transitions .portfolio-item:hover sans qu’on le lui demande. Il a utilisé clamp() pour une typographie fluide. Il a écrit une validation de formulaire avec des états d’erreur en temps réel, et non une simple alerte à l’envoi. Ce sont des choix qu’un développeur frontend senior ferait.
Trois domaines se sont distingués comme véritablement impressionnants, le genre de résultat qu’un développeur junior mettrait un après-midi à produire.
La structure du document utilisait correctement <main>, <section>, <article>, <aside> et <footer>. Non pas comme de simples remplacements de div, mais avec la bonne imbrication et les bons rôles de repères ARIA. Cela compte pour le référencement et pour la compatibilité avec les lecteurs d’écran.
| Élément | Utilisé correctement | Attribut Aria ajouté |
|---|---|---|
<nav> | Oui | aria-label="Main navigation" |
<section> | Oui | aria-labelledby sur la section d’accueil |
<form> | Oui | role="form" avec fieldset |
<img> | Oui | Texte alternatif descriptif généré |
La feuille de style utilisait des propriétés personnalisées CSS dès la première ligne :
:root {
--color-bg: #faf8f4;
--color-accent: #5a6437;
--color-text: #2c2c2c;
--space-unit: 1rem;
}
C’est une approche affirmée, dans le bon sens. Le blanc cassé chaleureux et le vert olive foncé que j’avais décrits sont devenus un système de design cohérent, et non deux couleurs plaquées sur la page. L’espacement utilisait des multiples de --space-unit. Les variables de couleur étaient appliquées de façon homogène, sans répétition.
La validation du formulaire vérifiait les champs obligatoires, contrôlait le format de l’e-mail avec une expression régulière et affichait les messages d’erreur en ligne sous chaque champ, au lieu d’utiliser des fenêtres d’alerte. Le gestionnaire d’envoi bloquait l’action par défaut et affichait un message de succès sans rechargement de la page. Le tout en moins de 60 lignes.
Aucun résultat de ce type n’est parfait. Deux domaines ont demandé de l’attention avant que le site soit réellement prêt pour la production.
La grille de portfolio a bien géré la version mobile dans l’ensemble, mais la mise en page du texte sur deux colonnes de la section d’accueil ne s’empilait pas correctement à 480 px et en dessous. Le texte débordait de son conteneur. C’est un point faible connu du CSS généré par IA : il gère de façon fiable les points de rupture courants (768 px, 1024 px), mais rate parfois des cas limites dans la plage inférieure à 500 px.
💡 Correctif : Ajoutez un prompt de suivi demandant explicitement des ajustements mobile-first pour une fenêtre de 375 px de large. Un prompt, 30 secondes, problème réglé.
Les six images du portfolio étaient représentées par des cadres gris avec du texte. Fonctionnel, mais inutilisable pour une mise en ligne réelle. C’est ici que le flux de travail devient plus intéressant, car vous pouvez résoudre ce problème avec la génération d’images par IA plutôt qu’en cherchant des photos de banques d’images.
Le site web en cinq minutes est un point de départ, pas un produit fini. Le vrai flux de travail, c’est ce qui vient après.
GPT-5.2 conserve le contexte tout au long d’une conversation. Après la génération initiale, vous pouvez donc poursuivre avec des instructions ciblées :
Chacune de ces demandes prend environ 15 à 30 secondes et produit du code fonctionnel qui s’intègre à ce qui a déjà été généré. Le modèle ne réécrit pas tout depuis le début ; il modifie avec précision les sections concernées.
C’est là que le site passe d’un prototype à quelque chose de visuellement convaincant. Plutôt que de chercher des photos, vous pouvez les générer. Des modèles comme Flux 2 Pro et GPT Image 1.5 produisent des images photoréalistes à partir de prompts textuels, en quelques secondes.
Pour un site de portfolio photographique, vous généreriez :
Flux 1.1 Pro Ultra est particulièrement performant pour des rendus photoréalistes avec un détail en 8K. Imagen 4 de Google gère bien les compositions de scènes complexes. Stable Diffusion 3.5 Large offre un contrôle fin de la cohérence stylistique sur plusieurs images, ce qui compte lorsque les images du portfolio doivent donner l’impression d’avoir été prises par le même photographe.
Tous les projets ne se prêtent pas à la même approche. Le site web en cinq minutes fonctionne mieux pour certains cas d’usage et demande des ajustements pour d’autres.
Les pages de destination sont là où GPT-5.2 brille vraiment. Une seule page, une hiérarchie claire, un objectif de conversion unique. Le modèle inclut naturellement des sections de preuve sociale, des titres centrés sur les bénéfices et des appels à l’action clairs, même lorsque vous ne les spécifiez pas.
Les sites multipages avec des données dynamiques sont une tout autre histoire. Pour un blog avec un CMS, une boutique en ligne avec une base de données ou une application SaaS avec authentification, vous demandez au modèle de concevoir quelque chose qui ne peut raisonnablement pas tenir dans un seul prompt. Découpez-les en sessions : d’abord l’architecture, puis page par page, puis composant par composant.
GPT-5.2 écrit d’excellents composants React, Vue et Svelte. Pour les sites statiques, le HTML et le CSS natifs sont plus rapides à générer et plus faciles à déployer. Pour tout ce qui est interactif à grande échelle, demandez-lui d’écrire directement dans le framework de votre choix, car refactoriser du natif vers React en cours de projet est pénible, même pour un humain.
| Type de site | Ensemble d’outils recommandé | Estimation de temps |
|---|---|---|
| Page de destination | HTML + CSS + JS natif | 5 minutes |
| Portfolio | HTML + CSS + JS | 8 minutes |
| Blog | Astro ou Next.js | 20 minutes |
| MVP SaaS | Next.js + routes API | 45+ minutes |
| E-commerce | Next.js + Stripe | 60+ minutes |
La question honnête derrière tout cela : cela remplace-t-il les développeurs ? Non, et les raisons sont précises, pas seulement rassurantes.
GPT-5.2 ne connaît pas la logique métier réelle de votre client. Il ne sait pas que votre processus de paiement comporte une vérification en trois étapes à cause d’une exigence du prestataire de paiement. Il ne sait pas que le menu doit se replier à 920 px et non à 768 px parce que l’élément le plus long de votre menu est anormalement large sur certains écrans. Il ne sait pas que la section de contact doit s’intégrer au CRM vieux de dix ans de votre client via une API XML propriétaire.
Toutes ces connaissances contextuelles, institutionnelles et relationnelles sont en vous.
Ce qu’il fait, en revanche, c’est éliminer l’échafaudage fastidieux. Mettre en place un document HTML de base, écrire les réinitialisations CSS, structurer un composant, écrire la validation standard d’un formulaire, monter une grille adaptative : ces tâches disparaissent. Il reste la véritable réflexion : décisions d’architecture, besoins du client, cas limites, performance, sécurité.
💡 Franchement : Les développeurs qui utilisent efficacement la génération de code par IA tendent à consacrer leur temps aux systèmes de design, à la communication avec le client et à l’optimisation des performances. Ce sont des activités à plus forte valeur que d’écrire le douzième conteneur flex de la journée.
PicassoIA vous donne un accès direct à GPT-5.2 sans abonnement API séparé ni extension d’IDE. Vous interagissez avec lui via une interface web et pouvez l’associer à des modèles de génération d’images dans la même session.
Étape 1 : Ouvrez GPT-5.2 sur PicassoIA et démarrez une nouvelle session.
Étape 2 : Rédigez un prompt qui précise :
Étape 3 : Copiez le résultat dans un fichier .html et ouvrez-le dans un navigateur. Vérifiez ce qui fonctionne et ce qui doit être ajusté.
Étape 4 : Revenez sur GPT-5.2 et envoyez des prompts de suivi ciblés pour des améliorations précises. Désignez les éléments exacts par leurs noms de classe ou leurs identifiants.
Étape 5 : Une fois la structure solide, générez vos visuels. Utilisez Flux 2 Pro pour les images photoréalistes générales, GPT Image 1.5 pour les scènes avec du texte ou un placement de produit précis, et Flux Dev pour des rendus expérimentaux haute fidélité.
Étape 6 : Remplacez les espaces réservés du HTML par les URL de vos images générées, déployez le site sur un service d’hébergement, et votre site est en ligne.
:root rend les changements de couleur et d’espacement triviaux.
Cinq minutes ne sont pas une promesse marketing. C’est une description littérale de ce qui s’est passé un mardi après-midi, dans une fenêtre de navigateur ordinaire. Le site était imparfait de façons précises, qui ont demandé dix minutes de plus pour être corrigées, et ensuite il était vraiment bon.
Le vrai changement ne se situe pas dans la vitesse. Il se situe dans l’endroit où va votre attention. Quand le code générique s’écrit tout seul, vous cessez de penser à la structure des div et commencez à vous demander si le site résout réellement le problème qu’il est censé résoudre. C’est là le changement qui compte.
PicassoIA réunit GPT-5.2, Flux 2 Pro, GPT Image 1.5, Imagen 4 et des dizaines d’autres modèles d’images et de langage au même endroit. Écrivez le code avec un modèle, générez les visuels avec un autre, et itérez sur les deux dans la même session. Pas de changement d’onglet, pas d’abonnements séparés, pas de va-et-vient entre les outils.
Ouvrez une session. Tapez votre prompt. Lancez votre chronomètre. Voyez ce que vous pouvez construire.
Choisissez votre langue
