💻 8. Vibe Coding & Blocs HTML5

Dernière mise à jour le 18 août 2026

8.1 Qu'est-ce que le Vibe Coding dans Celestory ?

Le Vibe Coding consiste à générer et intégrer du code (HTML/CSS/JS) par itérations conversationnelles avec une IA, sans maîtriser le développement web. On fournit un prompt à l'IA, qui génère le code, qu'on colle dans un bloc HTML5 de Celestory. On ajuste par échanges successifs jusqu'au résultat souhaité.

8.2 Comment injecter des variables Celestory dans un bloc HTML5 ?

Dans le code HTML, utilisez la syntaxe des doubles accolades : {{nom_variable}}. Celestory remplace automatiquement ces balises par les valeurs réelles. Pour des données structurées, utilisez des Entrées JSON via le point d'entrée du bloc.

8.3 Comment créer une interface HTML5 à partir d'une capture d'écran d'un site existant ?

Capturez le site d'inspiration, soumettez l'image à une IA multimodale (Claude, Gemini Vision) ou à un outil spécialisé (Google Stitch), demandez la génération du code HTML/CSS correspondant, puis collez ce code dans un bloc HTML5 de Celestory. Utilisez ensuite le Vibe Coding pour le rendre dynamique (injecter des variables).

8.4 Comment générer un quiz dynamique aléatoire dans mon module ?

Stockez les questions en base de données (Airtable), récupérez les données via un bloc Airtable, formatez en JSON via un bloc Formater le texte, injectez ce JSON dans un bloc HTML5 qui se charge de l'affichage interactif du quiz. Les scores sont renvoyés en sortie et peuvent mettre à jour la base.

8.5 Qu'est-ce qu'un bloc Commutateur (Switch) et à quoi sert-il ?

Le bloc Commutateur (Switch) permet de router le flux vers un nombre indéfini de sorties différentes (contrairement à la Condition qui ne gère que Vrai/Faux). Idéal pour analyser la réponse textuelle d'une IA (plusieurs mots-clés possibles) et déclencher l'action correspondante.