Du clavier à la page web : le parcours complet en pratique 2026-04-02
Dans l'épisode précédent, nous avons découvert Google AI Studio, cet outil précieux, et vu quel modèle choisir et comment rédiger la description initiale.
Mais une question vous trotte peut-être encore en tête : après tout ce discours, comment passe-t-on concrètement d'un paragraphe à une page web qui fonctionne vraiment ?
Aujourd'hui, place au concret : avec un cas réel, « Hanzi Master », nous vous guidons pas à pas dans tout le processus, du « clavier à la page web ».
01 Première étape : ne vous empressez pas de donner des instructions, laissez d'abord l'IA vous interroger
Beaucoup de gens commencent par rédiger un long bloc d'exigences, et l'IA finit par n'en saisir que des fragments.
Changeons d'approche : laissez l'IA vous poser les questions à son tour.
Par exemple, voici comment j'ai commencé :
Je veux créer un site d'apprentissage des caractères chinois avec entraînement aux traits, entraînement aux composants, assemblage de caractères et devinettes. Posez-moi 3 à 5 questions pour clarifier mon besoin.
L'IA a immédiatement renvoyé cinq questions clés :
- Qui sont les utilisateurs cibles ? (enfants / étudiants étrangers / passionnés de caractères chinois)
- Comment rendre l'entraînement aux traits interactif ? (reconnaissance de l'écriture manuscrite / démonstration animée)
- Quel est le principe de l'entraînement aux composants ? (glisser-déposer pour assembler les caractères / questions à choix multiples)
- Les devinettes s'appuient-elles sur une banque existante ou sont-elles générées en temps réel par l'IA ?
- Faut-il une connexion utilisateur et un suivi de progression ?
Vous n'avez pas besoin d'avoir tous les détails en tête dès le départ : l'IA vous aide à décomposer une idée floue en questions concrètes.
💡« Vous ne savez pas rédiger un cahier des charges ? Laissez l'IA réfléchir à votre place : vous n'avez qu'à répondre. »
02 Deuxième étape : répondez aux questions, appuyez sur Entrée et attendez que l'IA rende sa copie
Mes réponses ont été très brèves :
- Des étudiants étrangers
- Une démonstration animée
- Glisser-déposer les composants pour assembler les caractères
- Commencer avec une banque de questions classique
- Pas de système d'utilisateurs pour l'instant
Quelques phrases toutes simples. J'appuie sur Entrée et, d'un « swish », l'IA rend sa copie — une plateforme d'apprentissage des caractères chinois nommée « Hanzi Master » apparaît aussitôt dans la fenêtre d'aperçu.
Qu'a-t-elle géré automatiquement pour vous ?
✅ Module d'entraînement aux traits : intègre une bibliothèque d'animations d'ordre des traits ; cliquez sur « rejouer » pour revoir l'ordre d'écriture autant de fois que vous voulez
✅ Module d'entraînement aux composants : glissez les radicaux dans un cadre en pointillés pour former un caractère complet ; une bonne réponse déclenche une animation de confirmation
✅ Module de défi de devinettes : des énigmes classiques assorties d'une fonction d'indice, pour aider les étudiants à comprendre la logique de décomposition des caractères
✅ Design visuel : des transitions d'une fluidité soyeuse sont intégrées d'office, les caractères s'affichent dans une police à empattements, avec un vrai parfum de calligraphie
Du clavier au produit fini : moins d'une minute en tout.
03 Troisième étape : pas de panique, la première version aura forcément des défauts
Le résultat est bon, mais — l'interface du défi de devinettes n'offre aucun endroit où saisir une réponse.
L'utilisateur ne peut que lire l'énigme, sans pouvoir saisir de réponse : où est le jeu ?
Respirez un grand coup. La première version est un brouillon, pas un rebut : inutile de tout reprendre de zéro.
La bonne méthode d'itération se fait en deux temps :
1.Capture d'écran : faites une capture de l'interface problématique
2.Coller l'image et parler simplement : collez la capture dans la fenêtre de discussion et ajoutez une phrase de description
Je n'ai écrit qu'une phrase :
L'interface de devinettes n'a pas d'endroit pour saisir une réponse, il faut l'ajouter
Et le résultat ? L'IA a corrigé aussitôt : champ de réponse, bouton d'envoi, tout du premier coup.
L'interface de devinettes après correction :
💡« Réviser avec l'IA, c'est comme réviser avec un designer : montrer du doigt ce qui ne va pas sur une capture d'écran est dix fois plus efficace que cent mots de description. »
04 Deux conseils pratiques
💡À propos des messages d'erreur
Pendant la construction, un message d'erreur peut apparaître à côté de l'IA. Pas de panique : cliquez sur le bouton `Fix` et l'IA tentera de corriger automatiquement. Si cela n'affecte pas le fonctionnement de la page, vous pouvez aussi laisser passer pour l'instant.
💡À propos du téléchargement du code
Vous voulez enregistrer en local la page générée par l'IA ? En haut à droite de l'interface de code se trouve un bouton de téléchargement : un clic vous fournit une archive zip contenant tout le code.
05 Le récapitulatif du jour
Aujourd'hui, nous avons franchi l'étape la plus décisive, de 0 à 1 :
- 🎯 Vous ne savez pas rédiger le besoin ? Laissez l'IA poser les questions, contentez-vous de choisir
- ⚡ Appuyez sur Entrée et obtenez une première page web fonctionnelle en 30 secondes
- 🔧 Un problème ? Une capture d'écran et une phrase suffisent à le corriger précisément, sans tout recommencer
🌟« Une idée dans votre tête n'est jamais qu'une idée ; confiez-la à l'IA et elle devient un produit. »