Utiliser l'IA pour refondre le design de son site ou de son application

Bon, c'est pas tout ça, mais c'est la rentrée ! Alors pendant que la plupart des gens vont chercher les fournitures scolaires et acheter de nouveaux cartables colorés, nous, on fait quoi en dév ?

Eh bien, déjà, on peut commencer à faire un petit récap de ce qui s'est passé pendant l'été.

Comme souvent, c'est la période parfaite pour se reposer et tester de nouvelles choses. Dans mon cas, le test majeur a été de pousser les IA un peu plus loin que d'habitude pour voir ce qu'elles pouvaient m'apporter.

Alors c'est parti, je vous raconte tout ça ! 😀

Le projet de départ

Comme vous le savez sûrement déjà, j'ai créé il y a quelque temps un micro-SaaS du nom de Plus Tard dont l'objectif est de planifier à l'avance ses publications sur les réseaux sociaux.

J'ai commencé le code de cet outil début 2024, soit une éternité dans le monde du dév, surtout pour les IA.

Entre-temps, de nombreuses choses se sont produites et les premiers clients payants sont arrivés avec leurs retours. L'accent devait donc être mis sur l'interface ET l'expérience utilisateur, comprenez l'UI/UX.

Tout d'abord à l'extérieur de l'app, sur la landing page, afin d'attirer du monde et de convertir le plus possible en donnant envie de s'inscrire et d'utiliser l'outil.

Puis évidemment à l'intérieur, pour les utilisateurs qui ont déjà franchi le cap de l'abonnement et qui se servent de l'outil à temps complet.

Deux pans majeurs à améliorer, et si possible avant la rentrée et que l'effervescence des réseaux sociaux ne reprenne.

Le rôle de l'IA

En 2025, tout bon dév se doit de penser à l'IA et comprendre comment elle peut lui faire gagner du temps. C'est donc pour cela que j'ai dès le départ songé à la placer dans ce processus de refonte.

Oui, mais pas n'importe comment. Car contrairement à ce que l'on pourrait penser, une IA est toujours bien loin de remplacer un développeur. Pour une raison toute simple : l'analyse.

Il faut penser SEO, UX, éléments d'UI adéquats, couleurs coordonnées, etc.

Sans directives précises, l'IA n'en fera "qu'à sa tête" et le résultat sera peu intéressant. Bien sûr, il sera toujours possible d'itérer et de lui demander des retouches ci et là. Mais il ne faut alors pas tomber dans le piège de prendre finalement plus de temps à itérer que la refonte n'aurait pris sans IA.

Le Directive Coding

Donner des instructions à l'IA utilisée est donc primordial et c'est le travail à faire en amont avant de lancer quoi que ce soit.

Pour ma part, et pour ce projet, j'ai donc listé ce que j'avais en tête, ce que je souhaitais conserver ou au contraire changer, et toutes les obligations à tenir.

Voici un exemple d'une partie du listing :

• Intégration de TailwindCSS et utilisation de ses classes
• Conserver les couleurs dominantes bleu/vert et les effets de dégradé
• Mettre en valeur la plus-value du service (headers, catchphrases, CTA...)
• Mettre l'accent à la fois sur le SEO et l'UX (en détaillant pour ce point quels éléments sont les plus importants à prendre en compte)

La seconde partie importante est de découper le projet en plusieurs parties comme on le ferait avant de donner des tâches à de véritables développeurs.

Ici, j'ai d'abord commencé par la landing page avant de refondre l'app en elle-même, car il y a moins d'interactions utilisateur, moins d'éléments et plus de marge de manœuvre pour ajouter de nouvelles choses.

Au bout de quelques itérations, le résultat ressemblait déjà à quelque chose de correct et plutôt agréable à l'œil. Voici un avant/après final, mais assez proche visuellement de ce qui avait été sorti au départ pour que vous vous rendiez compte.

Les points positifs ✅

• La rapidité, évidemment. L'IA a cette capacité à sortir du code, même HTML/CSS simple, très rapidement et une refonte complète peut prendre 40 à 50 % de temps en moins que la norme.
• Le code relativement propre grâce au prompt de départ et aussi à l'intégration de Tailwind. Les classes et composants étant déjà prédéfinis, l'IA peut se documenter facilement elle-même et construire quelque chose de cohérent.
• Les jeux de couleurs pertinents. Je n'aurais pas pensé que cette partie soit la mieux gérée par l'IA, car on dit souvent qu'elle ne "voit" pas et ne peut se baser uniquement que sur l'écrit et le code en lui-même. Mais force est de constater que le résultat est visuellement agréable.

Les points négatifs ❌

• Le JavaScript. En l'occurrence, ce projet utilise beaucoup Stimulus et Symfony UX. Ce sont des parties que l'IA n'a pas su gérer. Soit elle les a totalement oubliées, soit elles n'étaient plus fonctionnelles car le code HTML n'était plus adapté à ce qui devait se passer côté contrôleurs.
• Le SEO. Malgré des instructions sur le référencement précises, elle n'aura pas su non plus remplir suffisamment les pages pour maximiser le référencement et encore moins pouvoir positionner le site sur des créneaux intéressants.

Conclusion

Pour conclure, on dira donc que oui, l'IA fait gagner un temps fou sur des tâches très longues, oui, l'IA est un bon assistant pour établir un plan de travail sur une refonte.

Non, elle n'a pas de capacité d'analyse suffisante, oui, il faut repasser derrière elle sur de nombreux points, mais avec un prompt bien cadré, cela reste du détail et n'empêche pas le gain de temps.

Si vous souhaitez visiter la version finale (ou tester le SaaS "Plus Tard"), ça se passe par ici.

Quant à moi, je vous dis à une prochaine sur un nouveau sujet tout aussi palpitant 😀