De la préparation des données à l'interface achevée, tout repose uniquement sur la conversation
La dernière fois, nous avons vu comment faire passer une page web de « regardable » à « vraiment belle ». Mais la beauté ne suffit pas : le contenu de la page doit encore être riche et varié.
Aujourd'hui, nous passons à l'étape suivante : relier votre page web à une base de données légère pour lui donner de la consistance.
Nous reprenons Hanzi Master comme exemple. Cette fois, l'objectif est une fonction de cartes d'apprentissage des traits : 50 caractères chinois de niveau HSK 1, chaque carte comportant une animation d'écriture, le pinyin, des mots composés et des phrases d'exemple, avec un changement de carte en un clic.
Cela semble représenter beaucoup de travail ? En réalité, la conversation seule suffit du début à la fin.
Étape 1 : ne laissez pas Gemini inventer les données, confiez-les à une IA dédiée
Beaucoup de gens demandent d'emblée à Gemini d'organiser les données et d'écrire le code, et le résultat est médiocre sur les deux tableaux.
Ma méthode consiste à séparer « organiser les données » et « écrire le code » en deux étapes, confiées à des IA différentes.
J'ai d'abord sollicité Zhipu Qingyan, avec une seule phrase :
Liste 50 caractères chinois de niveau HSK 1, avec seulement le caractère et son pinyin + un mot composé + une phrase
Il a immédiatement renvoyé un jeu de données bien structuré, par exemple :
八(bā) → mot composé : 八个 (huit) → phrase : 我有八个苹果。 (J'ai huit pommes.)
Les données du répertoire de hanzi renvoyées par ChatGLM
Importation des données du répertoire de hanzi dans le code du projet
Cinquante caractères, un format uniforme, utilisables tels quels.
Pourquoi ne pas confier directement la tâche à Gemini ? Parce que la confier à une autre IA est plus efficace et économise des tokens.
Étape 2 : une phrase suffit pour relier les données à l'interface
Les données sont prêtes ; il ne reste plus qu'à les confier à Gemini. J'ai importé le fichier du répertoire de hanzi déjà préparé, puis j'ai dit une seule phrase :
À partir du répertoire de hanzi contenu dans data, ajoute des mots composés et des phrases aux cartes de l'interface des traits, et relie toutes les données à cette interface — une carte par caractère, avec l'animation d'écriture, le pinyin, la traduction anglaise, les mots composés avec pinyin et traduction, et les phrases d'exemple avec traduction.
Gemini a tourné environ trois minutes et a tout réalisé d'un seul coup :
- Intégration complète des données
Les 50 caractères reliés à l'interface, changeables d'un clic
- Cartes enrichies
Animation d'écriture sur grille en riz + informations de base + section mots composés + section phrases
- Première version de l'interface
Bordures et fond traditionnels, un style « cabinet de lettré »
Première version de l'interface d'apprentissage des traits générée par Gemini
Le résultat était déjà très abouti. Mais un problème subsistait : il fallait faire défiler la page vers le bas pour changer de caractère, et l'expérience manquait de fluidité.
Étape 3 : de « l'empilement de fonctions » à la sobriété, grâce à l'audace de dire non
Vient ensuite le travail d'ajustement répété de l'interface avec l'IA. Cette partie prolonge la logique du numéro précédent :
Des besoins flous, que l'IA construit à notre place.
Premier tour : j'ai décrit vaguement les éléments que je voulais proscrire, et il a proposé une mise en page en écran partagé.
J'ai demandé à Gemini de modifier la mise en page pour changer de caractère sans faire défiler la page. Il a conçu un écran partagé avec une colonne de caractères à gauche et une zone de détail à droite — le problème fonctionnel était résolu, mais la page devenait très encombrée.
Premier tour : mise en page en écran partagé — fonctionnelle mais visuellement encombrée
Deuxième tour : j'ai dit « c'est trop redondant, réfléchis à nouveau », et il a conçu une mise en page avec de larges blancs.
Cette fois, je n'ai donné aucune solution concrète, juste une phrase : « c'est trop redondant maintenant, vois s'il existe une meilleure mise en page ». Gemini a réexaminé le design et proposé une solution totalement différente :
- Une bande horizontale de caractères en haut
, comme un rouleau raffiné
- Une grande carte au centre
, l'animation d'écriture à gauche et le détail à droite
- Suppression des éléments superflus
: la barre de recherche, les icônes superflues, les calques translucides complexes
- De larges blancs ajoutés
Deuxième tour : retour au minimalisme — supprimer le superflu, ne garder que l'essentiel
De « vouloir tout y mettre » à « ne garder que l'essentiel », un seul refus suffit.
Troisième tour : j'ai dit « place la carte de caractère bien au centre », et il y est parvenu du premier coup.
La dernière étape a consisté en un réglage précis. Je n'ai formulé qu'une demande concrète — « place le répertoire de caractères sous la carte, mets la carte au centre exact de la page et ajoute un carrousel de cartes de 8 s » — et Gemini a obtenu un centrage vertical plein écran grâce à une mise en page flex. La page a aussitôt pris l'allure d'un « affichage pédagogique professionnel » — propre, concentré, soigné.
Le résultat final
Version finale : rouleau horizontal + grande carte centrée + carrousel automatique
Après trois tours d'ajustement, la version finale offre une page nette et agréable, une carte de caractère centrée et mise en avant, avec un carrousel automatique intégré.
Tout au long du processus, pas une seule ligne de code n'a été écrite : de la préparation des données à l'interface achevée, tout s'est fait par la conversation.
Trois points clés de ce numéro
- Séparer le travail sur les données et le travail sur le code
Confiez les données à une IA douée pour l'organisation et le code à une IA douée pour le développement : c'est bien plus efficace que de tout confier à un seul modèle
- Une phrase suffit pour connecter une base de données
Il suffit que le format des données soit clair : leur intégration à l'interface tient réellement en une seule instruction
- Oser dire non est la condition d'une bonne amélioration
La première version de l'IA est souvent fonctionnellement complète mais surchargée ; lui dire ce que l'on ne veut pas fonctionne mieux que d'énoncer précisément les exigences souhaitées
— Série Vibe Coding pour débutants · Épisode 4 —