Créer un site en moins d’1h avec l’IA ? On a testé pour vous !

Peut-on vraiment créer un site web interactif, bien designé et structuré, en moins d’une heure, sans coder une ligne ? C’est ce que nous avons voulu vérifier en testant le vibe coding.

Le nom, peut-être, ne vous évoque rien. La pratique, en revanche, vous est sûrement plus familière. Le concept est simple : le vibe coding, c’est coder, développer des sites web ou des applications mobiles, sans avoir à écrire une seule ligne de code. Comment ? Grâce à l’intelligence artificielle.

Replit, Bolt.new, Manus, Lovable, et même Canva ou Figma, les outils sont pléthore, et nous promettent de produire, en quelques prompts, des applications, mini-jeux, présentations, voire des sites full-stack, sans compétences techniques, en quelques heures à peine. Cela vend du rêve, mais interroge. Est-ce vraiment possible ? Aussi, nous avons voulu tester et voir par nous-mêmes si les résultats sont à la hauteur des promesses.

Objectif : transformer un livre blanc en site interactif (en moins d’1h)

Le défi : transformer notre livre blanc des meilleures campagnes social media 2024, réalisé en collaboration avec Metricool, en un site web interactif, clair et pédagogique. (Psst si vous ne vous l’êtes pas encore procuré, c’est par ici et c’est gratuit). Le tout, en moins d’une heure. Précision importante : le document de base est déjà solide. Avec près de 140 pages, il est le fruit de semaines de veille, propose des analyses de campagnes, de tendances, des apports d’experts de l’industrie,… Une très bonne matière première, donc. L’idée n’était pas de faire mieux ou de l’enrichir, mais de l’adapter à un autre format, plus digital, plus immersif. Et voici notre retour d’expérience.

Première étape : choisir le bon outil

Et oui, pour bien commencer, nous avons décidé de tester trois plateformes, avec le même prompt, puis de les comparer et d’opter pour celle qui nous offrait le résultat le plus satisfaisant. Bolt.new, Lovable, Replit : nous avons importé les premières pages PDF du livre blanc en demandant à chaque plateforme de « transformer ce livre blanc en site web interactif, engageant, clair et pédagogique ». Et Bam. À peine appuyé sur « Entrée » que les plateformes se sont mises à coder. Nous avons donc comparé les trois plateformes sélectionnées, et voici ce que nous avons observé, outil par outil.

Test 1 – Bolt.new

• Rapidité : Impressionnante, le site a été généré en 5 minutes.
• Résultat : Une landing page colorée, proche de la charte graphique du livre blanc, avec des chiffres clés mis en avant.
• Les plus : Simple et efficace. Des boutons interactifs dévoilent les chiffres et tendances des plateformes, et une campagne « à la une » est placée en bas de page.
  Les moins : Peu d’informations. La campagne « à la une » est identique (une campagne Instagram) quelles que soient les plateformes sélectionnées, et aucune information à son sujet (en dehors du titre) n’est disponible. À l’exception d’une phrase, aucune information de l’édito n’a été reprise. C’est un peu court jeune homme.

Test 2 – Lovable

• Rapidité : Un peu plus long, environ une dizaine de minutes.
• Résultat : Un site web bien structuré, qui se rapproche le plus de l’esprit du livre blanc. Le site comporte plusieurs pages, avec une arborescence que nous n’avions même pas demandée, comprenant des onglets sur les tendances des réseaux sociaux, des chiffres clés, des points importants, ainsi qu’un onglet pour chaque plateforme. Instagram, par exemple, incluait déjà les campagnes.
• Les plus : La charte graphique est bien respectée, l’organisation des informations est dynamique, et la proposition de lecture est claire, avec des points clés à retenir pour les différents types de lecteurs (créateurs, annonceurs, etc.).
• Les moins : Un peu plus long à générer, un nom un peu discutable en footer et header (« SMCampaigns »). Les textes rédigés pour présenter les campagnes sont écourtés.

Test 3 – Replit

• Rapidité : Plus lent, environ une quinzaine de minutes. Fait intéressant : avant de commencer à coder, le chat de la plateforme nous a demandé si nous souhaitions ajouter des fonctionnalités supplémentaires (par exemple, un bouton pour télécharger le livre blanc ou une possibilité de recherche approfondie).
• Résultat : Contrairement aux deux autres outils, nous pouvions voir le preview du site en train de se construire en temps réel, ce qui était assez impressionnant. Cependant, tout a fini par planter, et nous avons rencontré un message d’erreur à la fin du processus.
• Les plus : Des images générées par IA pour illustrer les campagnes, des outils interactifs permettant de comparer les performances des différentes plateformes, et des boutons permettant de télécharger ou partager le livre blanc.
• Les moins : Le contenu est concentré sur une seule page, avec une charte graphique plus éloignée de celle du livre blanc. Des « notes » de performance ont été attribuées aux plateformes sans être corroborées par des données précises ni des méthodes de calcul. Plusieurs plateformes étaient manquantes, des images ont bugué et il y a eu plusieurs incohérences. De plus, plusieurs crashs se sont produits lors du développement.

Verdict : Lovable est le choix retenu

Nous avons finalement opté pour Lovable. Plus complet que Bolt, moins impressionnant que Replit, il présente toutefois moins de risques de crashs et offre un bon compromis entre fonctionnalités et stabilité.

Premier rendu : fonctionnel, mais un peu terne

En 10min, la V1 du site était prête. La structure était bonne, le fond bien repris… Non seulement l’outil a réutilisé quasi toutes les informations que nous lui avions données, mais il a aussi restructuré le tout autour des messages clés du livre blanc, comme s’il en avait capté l’intention éditoriale. Bluffant.

Visuellement, ça manquait un peu de relief, la page d’accueil reprenait bien la charte graphique du livre blanc, mais pas les autres pages. Cela dit, avec le peu d’informations fournies, le résultat était déjà très bon, mais les images n’étaient pas attribuées aux bonnes campagnes, il manquait de liens, d’illustrations, etc. Nous avons donc affiné le prompt, en demandant de retirer les images et de ne garder que les liens vers les campagnes, puis de revoir la charte pour l’uniformiser. Et là, agréable surprise : Lovable a automatiquement réinjecté la DA du livre dans l’ensemble du site, de manière très cohérente.

Deuxième étape : enrichir le contenu

Ensuite, nous avons importé la suite du livre blanc. Le site ne supportant pas un PDF trop lourd (la version gratuite du moins), nous avons importé les textes, en les copiant-collant, plateforme par plateforme. Arrivés à YouTube, un message nous informe que nous avons atteint notre limite de prompts quotidiens. Oups. Tant pis, nous attendrons demain.

Temps total passé : 30min

Retour sur Lovable, le jour suivant, ne nous faisant plus avoir, nous avons copié collé le plus de texte possible par prompt. En deux prompts, tout le texte était envoyé. Une fois le contenu intégré, restait (une fois encore) à uniformiser l’ensemble.

Troisième étape : assurer la cohérence graphique et éditoriale

Là, les choses se sont corsées. Lovable a retiré beaucoup d’éléments sur les pages tendances, sans crier gare. Puis, chaque plateforme était présentée avec une structure totalement différente. Des campagnes X et Instagram se retrouvaient sur la page Facebook… La frustration monte.

Donc, nous lui avons demandé de remettre les bonnes campagnes sur les pages des bonnes plateformes, et de restructurer les pages afin qu’elles aient toutes la même allure. Le chat nous indique avoir bien suivi la demande, mais les pages YouTube, X, Discord, Twitch nous indiquent une erreur 404. Et voilà, dès que nous avons commencé à nous en mêler, des messages d’erreur sont apparus… C’était pourtant si bien parti ! Nous cliquons sur « Try to fix this ». Hop, un prompt quotidien. Plus qu’1.

Bon, le résultat est meilleur, même si toutes les pages ne sont pas similaires, il y a du mieux.

Il reste un prompt, soyons stratégiques. Nous avons formulé plusieurs demandes en une : enrichir les pages tendances, modifier le header et le footer, ajouter un CTA de téléchargement vers le livre blanc sur toutes les pages et quelques éléments présents dans la conclusion. Tant pis si toutes les pages ne se ressemblent pas, au moins, elles ne buguent pas, et nous ne prenons pas le risque de tout refaire crasher. Nous appuyons sur « Entrée », la machine est lancée, croisons les doigts.

Ça y est, il semble que le site ait bien saisi sa mission. Le rendu ne nous déplait pas. Certes, certains chiffres nous semblent non issus du livre blanc, mais le résultat demeure très convenable.

Temps passé : 50min (en collant les bouts, bien sûr)

Le mieux étant l’ennemi du bien, nous nous décidons à le publier. En haut à droite, un bouton bleu nous propose de le faire. Nous appuyons, attendons quelques secondes. Et l’affaire est réglée.

Résultat : un site quasi pro en 1h (vraiment ?)

Un site interactif, designé et publié sans code (et presque sans transpirer). Le tout, en 50min cumulées, bien que sur deux sessions et avec quelques messages d’erreur en chemin. Le plus impressionnant est de voir le code se construire en temps réel sans rien avoir à taper. De quoi donner l’impression d’être des développeurs pros. Notons, cependant, quand bien même nous aurions eu la volonté (et la capacité !) de changer le code, il est impossible de le faire directement sur Lovable (lecture seulement). Vous remarquerez sur la capture ci-dessous que pour le modifier, il faut synchroniser le projet avec GitHub.

Bien sûr, tout n’est pas parfait, les pages ne sont pas toutes de la même charte graphique, des chiffres sont apparus de nulle part, il manque d’images pour illustrer… Mais en une heure (enfin, 30+30 minutes) on ne va pas faire les difficiles. On se demande tout de même si les quelques bugs ne sont pas générés exprès pour nous faire perdre nos crédits quotidiens et nous donner envie de passer à la version pro (plus d’une vingtaine de dollars mensuels, quand même, mais nous devons avouer, on a été tentés !).

Pour découvrir notre prototype, c’est par ici !

Découvrir le site

Ce que l’IA ne fait pas (encore)

Bien que ludique, ce test a surtout rappelé une chose essentielle : l’IA ne remplace pas la vision. C’est la qualité du contenu d’origine, notre capacité à formuler les bonnes requêtes (dans une moindre mesure, bien entendu), et le regard final pour affiner, corriger, arbitrer qui ont permis à l’expérience d’aboutir.

L’article Créer un site en moins d’1h avec l’IA ? On a testé pour vous ! est apparu en premier sur JUPDLC.