Introduction

Je sais pas si vous l'aviez remarqué mais je suis pas vraiment un artiste aux talents graphiques monétisables (il existe ce mot?).

Bon, le but a toujours été d'apprendre de nouvelles choses et de cultiver mon loisir incongru consistant à passer un temps improbable à écrire du CSS.

J'ai commencé un vieux repo il y a littéralement 6 ans avec des "expériences de design" dont je ne suis que très moyennement fier. Cecid it, j'ai plus trop envie de passer encore 12 ans dessus.

La chance, on est en plein dans l'ère fantastique des modèles de langages LARGES qui doivent remplacer tous les métiers de l'informatique d'ici quelques semaines.

Du coup, serait-il possible de déléguer tout ce travail créatif à une intelligence artificielle?

Le "nouveau" blog

Plusieurs brèves existent déjà sur la chronologie de flemme et d'abandon attachée au fameux projet:

• Avancement de mes aventures de web "designer"
• Utiliser l'Intersection Observer pour tous les effets sur défilement
• Web Design: Animation de texte avec l'IntersectionObserver

Est-ce que tout ceci indique surtout que le monde a changé depuis ma découverte de l'IntersectionObserver? Oui.

Avant de passer par la case IA, ça ressemblait plus ou moins à ça (le menu permet aussi d'accéder à la page "article"):

Spoiler: ça ressemble toujours à ça après l'IA mis à part quelques petites inspirations mais on y reviendra.

Lovable

En ce moment quelque soit le produit présenté il faut systématiquement tenter de caser de l'IA dedans même si c'est secrètement une armée d'Indiens qui sont derrière et qu'il s'agit dès lors d'une intelligence pas artificielle du tout.

Vous vendez des planches de WC? Oui, mais des planches de WC avec de l'IA dedans. Où ça dedans? Peu importe, tout le monde s'en fout.

Pour ce qui est de générer du contenu web il y a pas mal de possibilités, y compris demander directement à Copilot, Claude ou GPT.

Les gens parlent aussi de "Cursor" (un éditeur avec davantage d'IA dedans que les autres éditeurs qui ont de l'IA dedans). Ceci dit sa finalité principale n'a pas l'air d'être le CSS et les blogs bizarres.

J'ai dès lors dégotté Lovable.

Ils semblent utiliser GPT-5, mais avec tout l'emballage qui va bien autour pour générer:

• Une app monopage
• En React + Typescript + Vite comme bundler
• Avec Tailwind pour les styles et "thèmes"

Pourquoi pas. Je peux toujours m'inspirer de l'apparence ou juste subtiliser les styles (ce qui m'obligerais potentiellement à utiliser Tailwind mais je suis pas contre).

En fait je pense que je vais d'office utiliser Tailwind, en espérant que la techno du futur blog (c'est parti pour être Nuxt) permettra de virer les classes non utilisées des styles finaux.

Génération à partir d'une image

On peut téléverser une image, un schéma ou une capture d'écran afin que Lovable s'en inspire pour générer un site.

Je lui donne une capture de mon ébauche de "nouveau blog" présentée plus haut avec le texte "Possible de rendre ça plus moderne?".

Déjà il me répond genre "ah ouais je vois que ça sent le vieux pâté ton truc avec des dégradés un peu trop abusés, attends une minute de voir ce que je vais te sortir".

Ce qui s'ensuit est présenté tel quel et sans ressentiment par rapport à mes dégradés traînés dans la boue de la honte.

Le jeu de couleur est certes un tantinet plus osé que ce que même moi je me permets.

D'autres choses sont relativement intéressantes et en fait j'en viendrai à inclure certaines idées dans la prochaine mouture de mon prototype.

Si on en crois le résumé des améliorations en terme de design:

Il en profite pour encore insulter un coup mes dégradés en parlent de ses "effets subtils d'arrière plan" (hyper subtil en effet) et suppute que je n'ai pas d'animations sur surbrillance des éléments (il pouvait pas savoir que j'en fais déjà des tonnes avec ça).

J'ignore totalement où est le "backdrop blur" mais j'avais qu'à lui demander hein.

J'apprécie le système de badges PROFESSIONNEL pour les catégories de posts.

Lier son compte Github

Le vrai seul moyen d'éditer confortablement ce qui a été générer est de lier son compte Github.

Je crois que par défaut il essaye d'obtenir les droits sur tous vos repos existants, je préviens au cas où. Sinon il a juste besoin de pouvoir créer de nouveaux repo et push dedans.

L'éditeur en ligne est pas trop mal et a l'avantage d'être juste à côté de l'agent IA mais on est toujours mieux chez soi moi je trouve. Remarquez que j'ai même pas parlé de Neovim cette fois-ci.

Par défaut il crée un repo privé avec votre code dedans et vous êtes libres de tripoter toute l'affaire et voir assez précisément ce que l'IA a modifié à chaque itération.

Le code

Je n'ai pas grand chose à dire sur ce code, c'est rempli de classes Tailwind et de composants React assez verbeux mais rien de trop alien à mon goût.

Il laisse parfois (mais pas toujours?) des commentaires, par exemple pour l'emplacement du logo.

Je vois aussi qu'il y a un fichier App.css qui traîne avec une animation de LOGO QUI TOURNE, soit le bon goût qui caractérise effectivement mon blog, mais ce fichier n'est importé nulle part et la classe possédant l'animation n'est pas utilisée non plus.

Du coup je lui demande si le fichier est utilisé quelque part.

OK donc c'est pas utilisé. Bon ben j'utilise un autre de mes précieux prompts quotidiens pour savoir si quelqu'un sait ce que c'est App.css:

D'accord, donc cette animation vient des styles de base de Vite. Il aurait pu me le dire tout de suite mais je comprends que ça soit pas évident. Bon ben dommage pour le logo qui tourne.

J'ai vérifié en créant un projet avec le template React + Typescript et on retrouve effectivement exactement le même fichier CSS:

Ce fichier (qui n'a pas été généré par l'IA) aura eu le mérite de m'avoir fait réfléchir sur la différence entre filter: drop-shadow et box-shadow en CSS.

Le filtre suit la forme exacte de l'élément concerné en tenant en compte la transparence des images et les tracés de SVG, par exemple.

Les styles

Ils utilisent Tailwind avec tout un thème configuré par tout un tas de variables CSS.

Il n'y a pratiquement aucun sélecteur dans le mono-fichier CSS qui est créé mis à part cet extrait que je ne comprends absolument pas (appliquer border-border à tous les éléments??).

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

Je pense que toutes ces variables configurées dans Tailwind leur permettent de rapidement créer des combinaisons de couleurs et des thèmes qui vont bien ensembles. Après tout, un prédicteur de language est peut-être capable de prédire que le rose ça va bien avec le marron.

Je suis tout de même épaté par la maîtrise de Tailwind de Lovable. Ou alors c'est GPT qui est impressionnant? Comme l'un utilise l'autre c'est pas super clair.

Je constate aussi tout un tas de variables dans un gros sélecteur nommé .dark, je me dis que l'IA m'a éventuellement peut-être créé un thème sombre qui serait potentiellement plus réussi que le thème clair aux accents "fête-de-la-bière" qu'il m'a créé.

Alors je lui demande s'il y a un thème sombre et comment l'utiliser. En réponse l'IA me demande si je veux ajouter un bouton de changement de thème basé sur next-themes (qui vient de Next JS j'imagine).

Quelle ne fût pas ma surprise ineffable de constater que le thème sombre est beaucoup plus sobre (un peu trop MAUVE mais je peux pas trop critiquer) et le sélecteur de thème fonctionne, en tenant normalement compte du thème du système et le thème sombre est celui par défaut comme je lui ai demandé.

Tout ceci étant le sujet d'un autre article de ce blog où je m'étais retrouvé à utiliser un web component et expliquer quelques stratégies, l'IA l'a fait en deux minutes grâce à Tailwind et l'écosystème de React/Next.

Le résultat n'est pas sans défauts comme illustré ci-après mais ça reste assez impresionnant pour du prototypage.

En pratique ces quelques prototypes générés par Lovable m'auront appris quelques trucs:

• Les couleurs HSL c'est pas mal — Elles permettent de facilement modifier la luminosité d'une couleur sans avoir besoin d'une vieille fonction SASS (quelqu'un utilise encore SASS?) et Lovable travaille presque exclusivement avec des couleurs HSL (sauf quand il le fait pas quoi);
• J'avais déjà envie d'utiliser background-clip pour que les lettres de mon titre principal soient un dégradé (un dégradé SUBTIL nessepas), l'IA l'a utilisé dans le titre de site, du coup je l'ai bourré dans mon projet aussi; Je l'ai aussi dans un Codepen ici;
• Créer un séparateur ou une bordure en dégradé subtil (bien dis donc y a un thème récurrent ou quoi?) que l'IA a appliqué aux bordures sous les titres de section — On peut aussi utiliser un pseudo élément pour ça mais j'en suis resté aux bordures, exemple sur ce Codepen;
• Avoir le titre d'une carte qui se surligne ou affiche une petite animation sur surbrillance de la carte elle-même — Je trouve ça sympa mais finalement je vais pas l'implémenter (je pense que je dois me calmer un peu).

Plus en détail, le background-clip est appliqué avec Tailwind et on a régulièrement des espaces qui sont insérés dans le JSX comme une chaîne de caractère {""}:

<h1 className="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-4">
  Blog des{" "}
  <span className="bg-gradient-primary bg-clip-text text-transparent">
    Gens Compliqués
  </span>
</h1>

Je remarque aussi sur un autre site que j'ai généré que l'IA est capable de centrer un élément sur l'écran, soit LE test de compétences en CSS d'interview pour le poste de chef du CSS (l'extrait provient d'une page 404 routée en JavaScript).

import { useLocation } from "react-router-dom";
import { useEffect } from "react";

const NotFound = () => {
  const location = useLocation();

  useEffect(() => {
    console.error(
      "404 Error: User attempted to access non-existent route:",
      location.pathname
    );
  }, [location.pathname]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4">404</h1>
        <p className="text-xl text-muted-foreground mb-4">Oops! Page not found</p>
        <a href="/" className="text-primary hover:opacity-90 underline">
          Return to Home
        </a>
      </div>
    </div>
  );
};

export default NotFound;

Et ensuite?

Le but est évidemment de continuer à rafiner le site en assignant des tâches à l'IA.

On a droit à environ 5 messages par jour. J'ignore totalement si c'est une limite de nombre de message ou quelque chose de plus intelligent puisqu'il est possible de créer un message qui génère une très grande quantité de texte et de changements (ou de tokens comme on dit dans le milieu je crois).

Une bascule permet de "juste discuter" avec l'IA sans accomplir de modifications sur le code, histoire de pouvoir tout combiner plus tard. J'ignore si c'est plus rentable ou pas de procéder de la sorte.

Après ça il faut payer 25€ par mois. Ou 50 pour le plan "pro", et ces prix risquent d'augmenter quand la bulle IA va s'affaisser parce que je pense pas que ça soit hyper rentable comme ça (je me trompe peut-être).

Vous êtes toujours libres de coller des portions de code dans une autres des 50000 IA que ça soit un acteur majeur ou une startup et continuer d'exploiter le filon gratuit.

Rien n'empêche de demander à Copilot de continuer le site depuis un éditeur.

Le monde est ton huitre

En terme de prototypage c'est vraiment pas mal Lovable. Je pensais que ses créations seraient toutes un peu les mêmes, mais pas vraiment.

Les mêmes librairies React reviennent certes tout le temps, par exemple Lucide-React pour toutes les icônes; Ce qui est certainement mieux que d'avoir un chaos total dans l'iconographique même si ça limite un peu la diversité.

Je trouve qu'on est en mesure de demander des choses très différentes avec un résultat correct.

Du coup allons-y:

créer un site de présentation pour la confrérie des chauves du Luxembourg qui portent leur calvitie avec fierté

Je vous invite à voir le résultat vous mêmes soit avec ce lien, soit ci-dessous:

Je m'étonne que le domaine chauves.lu soit toujours dispo.

Regardez-moi ces arguments en beton armé ciré luisant:

Apparemment la génération d'image souffre toujours d'évaluations malheureuses du nombre moyen de bras chez les humains.

Sans rapport avec les chauves, je remarque une certaine propension à créer des apps mono-page qui ont littéralement une seule page, avec une section "hero" et des boutons de type call to action comme euh... Ben comme sur mon blog.

J'ai aussi testé un "blog de philosophie" histoire d'avoir une autre approche et une page "article" dont je pourrais m'inspirer (je suis connu pour la philosophie) et ça donne pas trop mal même si ça ressemble un peu au thème de base WordPress de ces dernières années.

Bien entendu tout est toujours responsive.

Je termine avec une dernière demande de génération:

Site e-commerce pour une fabrique de saucisses en Allemagne qui appartient à une famille proche d'experts en saucisses depuis 1981. Le site ne doit pas être totalement sérieux et peut avoir une apparence "diner" avec beaucoup d'accents aux couleurs saucisses, un pointeur saucisse, et le logo est une saucisse posée contre une boulette de viande

Et je trouve que le résultat est assez convainquant:

On sous-estime beaucoup l'expertise des LLMs en saucisses allemandes.

Alors y a plus besoin de développeurs?

J'ai un peu regardé les critiques de ce type d'outils sur Reddit et il semblerait qu'un tout nouveau groupe de développeurs ait fait son apparition récente: des gens qui ne sont pas du tout développeurs et ont découvert comment naviguer l'IA pour avoir vaguement ce qu'ils veulent.

Ce qui doit représenter une nouvelle forme de compétence en elle-même un peu comme un prompt Engineer.

Les autres gens sont plus cyniques quant à la maintenance d'un semi-gros projet réalisé par une IA. Et pas juste parce que le contexte a forcément une limite de taille (je pense qu'elle est massive pour GPT) c'est juste qu'un moment quand y a trop de code c'est un peu la merde, IA ou pas.

Les gens citent souvent les problèmes de sécurité qu'une IA pourrait (et va d'office) soulever dans une application entièrement générée. Avec un site statique le problème ne se pose pas vraiment.

Ceci dit, Lovable propose d'intégrer Supabase aux projets qui ont besoin de persistance de données. Je ne l'ai pas essayé.

Limiter au max ce que l'IA peut utiliser au niveau backend limite aussi au max les problèmes de sécurité. Maitenant, il est peut-être possible de tirer l'IA suffisamment loin pour qu'elle génère un vrai backend dangereux avec les mots de passe en public sur votre Github.

J'ai lu le témoignage d'une personne qui a réussi à demander à Lovable de transformer son application React générée en Next JS (Next JS inclus (générallement) une partie serveur). Si c'est vrai, ça fait un petit peu plus peur.

Son raisonnement se rapporte à un autre inconvénient des choix technologies de Lovable: il s'agit d'une application mono-page avec routage JavaScript.

Ces sites sont pas top au niveau SEO. Pas nécessairement vis à vis de Google qui indexe assez bien ce type de sites, mais plutôt pour tout ce qui est intégration à des réseaux sociaux, indexation par des réseaux sociaux etc. Sans compter les 4 hippies qui désactivent totalement JavaScript dans leurs navigateurs.

Et même pour Google c'est possible qu'il y ait une "pénalité" pour les apps mono-page, on sait pas trop.

Reste aussi l'aspect hébergement: il s'agit certes d'un site statique sauf qu'il a du routage JavaScript d'office (même avec une seule page — il ajoute une route "404" par défaut et donc le routeur React est toujours présent) ce qui implique que le site soit bien à la racine du domaine d'hébergement où y a rien qui va marcher à moins de savoir quoi modifier dans le code et dans les paramètres de Vite pour poser les fichiers au bon endroit.

Tout ça pour dire que, oui, on a toujours besoin de développeurs si on veut optimiser l'affaire. Ce qui me ramène à un autre soucis.

Un enfer pour les perfectionnistes

Je suis pas trop perfectionniste (ou maniaque de l'ordre) dans la vraie vie.

J'aime bien les choses raisonnablement bien faites mais peux tolérer un meuble de travers ou une mouchette dans ma bière (oui, ça rime).

Par contre dès que ça touche à du code voire des fichiers informatiques, j'ai un truc qui se réveille en moi et qui a pas bon.

Dans ces conditions là, être conscient que tel ou tel programme ou site tient sur du code un peu bancal c'est comme avoir une épine dans le pied en permanence.

Si Freud et ses disciples étaient encore à la mode de nos jours ils psychanalyseraient mon code. Par exemple, j'écris pas mal de commentaires comme auto-excuse que quelque chose n'est pas optimal ou pose un bon vieux TODO que petit Jésus et moi on sait bien qu'il sera jamais fait.

Oui j'ai des problèmes.

J'en viens avec tout ça que si quelqu'un a un peu la même tare que moi, il va se sentir mal avec ce code généré. D'abord parce que c'est pas exactement comme on l'aurait fait, ensuite parce que le choix technologique n'est pas le bon (ça peut s'adapter mais ça va prendre des plombes) et finalement parce qu'il y a quelques trucs étranges dans le code.

Par exemple, l'IA semble avoir eu besoin de 200+130+30 lignes de code pour utiliser une librairie qui écrit des Toasts (désigne une notification éphémère sur un site interactif) et je comprends pas trop pourquoi.

L'exemple de la doc de la lib est assez verbeux, ce Toast a l'air particulièrement personnalisable, mais on est très loin du nombre de lignes pondu par l'IA.

Voici un extrait de l'affaire où je capte pas trop ce qu'il se passe. Peut-être que je capte juste rien au React "moderne" mais c'est encore pire que ce que je critiquais dans le passé à propos de React:

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

Alors, loin de moi l'idée de citer le code infâme du présent blog comme référence. Mais voilà, chez moi ça prend une ligne:

toast: function (text) {
  M.toast({ html: text });
}

Mais bon même dans le HTML parfois y a ces espaces chelous voire des tags <br> qui est évidemment autofermé puisque c'est du JSX (dans la vraie vie on autoferme pas les tags):

<h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6">
  Confrérie des{" "}
  <span className="bg-gradient-gold bg-clip-text text-transparent">
    Chauves
  </span>
  <br />
  du Luxembourg
</h1>

J'ai pratiquement plus vu de <br> depuis l'ère glorieuse de Multimania.

Conclusion

Comme évoqué plus haut, je trouve Lovable plutôt intéressant pour générer des prototypes, pourvu que vous soyez capables d'installer Node et lancer un projet Vite. Et c'est pas mal d'avoir un compte Github aussi.

Enfin, ils fournissent un bon vieux bouton pour déployer l'application immédiatement donc peut-être que même mamie pourrait lancer son site de crypto-taxidermie sans aide aucune.

Ceci dit avant on avait MySpace et les Skyblogs et on avait pas besoin de consommer 1200 watts de carte graphique pendant 5 minutes pour générer un vieux blog statique (ou dynamique avec Supabase mais c'est possible que ça devienne trop complexe pour mamie).

Il y a aussi Wix, Squarespace et les autres qui permettent de facilement assembler un site sans écrire de code et sans IA. Enfin, maintenant ils sont obligés de bourrer de l'IA dans leurs produits mais ça fonctionnait très bien sans.

J'ai cru comprendre que les gens n'aiment pas trop le CSS (je comprends vraiment pas pourquoi) et qu'ils aimeraient bien que l'IA le fasse pour eux. A ma connaissance, Copilot est assez mauvais en CSS (et je crois qu'il utilise GPT? C'est difficile à suivre).

Avec Lovable on peut relativement facilement générer un protoype et transférer les styles, pourvu qu'on soit capables d'utiliser Tailwind.

N'importe quelle IA peut ensuite probabelement itérer dessus et même si on capte rien à Tailwind on peut juste s'inspirer du jeu de couleur choisi (les jeux de couleurs n'étant pas une très grande force pour moi je sais pas si vous aviez remarqué).

J'aurai aussi découvert et exploré quelques effets intéressants auxquels je n'avais pas pensé, la plupart sont des hover sur des trucs mais bon, je prends (encore un exemple sur mon Codepen).

Voici d'ailleurs la dernière mouture du potentiel futur blog:

---

Pour essayer d'un peu comprendre d'où on vient, j'avais demandé à Chatgpt (GPT-5) de me générer un site statique pour la confrérie des chauves du Luxembourg, avec un fichier index.html et un fichier CSS séparé. Il m'a pondu ce truc:

Par contre sa "photo de chauves souriants" est pas mal, il s'est bien arrangé pour qu'il y ait 0 bras sur l'image et utilise le même dents.jpg sur chaque personne pour créer ce poster à mettre dans une salle d'attente de pédiatre:

Vu la vitesse de progression des IA j'imagine que ça va s'améliorer et que les gens vont se rendre compte qu'on a peut-être pas besoin d'un LLM pour TOUT et combiner plusieurs solutions qui vont bien, dont les éditeurs à base de blocs. Mais là c'est important de prétendre qu'on fait tout avec des LLMs pour les investisseurs.

D'ailleurs je sentirai mieux cette affaire d'IA quand on sera sorti de la bulle spéculative infâme des 4 millions de startups d'IA qui utilisent juste un modèle existant avec un contexte injecté. Et hop, $1 million d'investissement.

Si OpenAI voire Microsoft (ou même Nvidia j'imagine) le décident toutes ces startup sont décédées d'un coup. C'est le meme de Scooby Doo où on retire le masque d'un antoganiste et c'est toujours GPT en dessous.

Tant qu'on y est, j'ai trouvé Open Lovable qui permet de générer tranquillement du React depuis votre ordinateur, en fournissant une clé d'API pour un des services d'IA supportés.

J'ignore si ça fonctionne avec le tiers gratuit, ce sera pour une prochaine fois.

On peut aussi mentionner Claude Code, l'outil en ligne de commande pour barbus permettant d'assigner des agents IA à des tâches de développement. Sachant qu'il est probablement un peu mauvais en CSS.

Déjà avant personne ne captait la "cascade" (règles de priorité qui décide des propriétés CSS qui s'appliquent) et maintenant c'est encore pire avec les @layer.

Bonne chance à tous et bisous à mamy.