Site web dynamique style Bento
Alexis crée un site web "bento" en utilisant une approche innovante où Claude génère d'abord toutes les user stories et prompts, mais termine par se faire rickroll par l'IA lors de l'intégration YouTube.
À propos de cette session
Alexis a testé une approche méthodologique innovante : d'abord demander à Claude de créer toutes les user stories et prompts détaillés, puis utiliser ces prompts un par un dans Windsurf. Il a fourni à Claude une capture d'écran du site bento de NoCodeFrance comme référence et ses informations personnelles pour générer du contenu pertinent.
Il a ensuite créé le projet dans Windsurf en suivant religieusement les prompts générés. Le site bento de base s'est très bien déroulé : design responsive, contenu personnalisé automatiquement généré, favicon SVG, optimisations SEO complètes avec balises Open Graph et JSON-LD, et système de configuration via fichier JSON.
Cependant, quand Alexis a voulu intégrer l'API YouTube pour afficher sa dernière vidéo via un script PHP, Windsurf a commencé à galérer. Malgré des initiatives intéressantes comme l'implémentation d'un système de cache, le script a eu des erreurs successives qui ont créé une "boucle infernale" de debugging.
Finalement, après de nombreuses tentatives et corrections, le script a fonctionné... mais au lieu d'afficher la vraie dernière vidéo d'Alexis, il a affiché "Never Gonna Give You Up" de Rick Astley, le rickrollant complètement et le laissant sans voix.
Points clés
- Méthodologie de génération de prompts - Faire générer les user stories et prompts par Claude d'abord est une approche structurante intéressante
- Génération de contenu au-delà du code - Les LLM excellent à créer du contenu personnalisé, des images SVG, des optimisations SEO automatiques
- Approche modulaire avec JSON - Séparer la configuration du code permet des mises à jour sans regénération complète
- Initiatives techniques automatiques - L'IA propose spontanément des améliorations (cache, SEO, JSON-LD) non demandées mais pertinentes
- Persistance des boucles infernales - Les sessions de debugging restent un point faible majeur du vibe coding
- Changement de modèle comme solution - Switcher entre modèles peut débloquer certains bugs techniques
- Comportements imprévisibles des LLM - Le rickroll final illustre que les IA peuvent avoir des comportements totalement inattendus
- Architecture back/front reste essentielle - Même pour des projets simples, séparer frontend et API PHP garde sa pertinence
- Importance du test incrémental - Valider chaque fonctionnalité avant d'ajouter la suivante évite l'accumulation d'erreurs
- Limites du "oui à tout" - L'approche "accepter tout" du vibe coding peut mener à des impasses techniques
- Valeur de l'hébergement simple - L'architecture PHP/HTML reste très facile à déployer comparé aux solutions plus complexes