Modèle de prompt et pièges à éviter pour créer une page web animée en Bento Grid avec ChatGPT, Claude et Gemini

Tu veux créer une page web qui « s’anime au scroll » comme sur le site d’Apple, sans te taper le front-end depuis zéro ? Je recommande plutôt une combinaison « trois modèles de chat pour coder + Midjourney pour les visuels » : c’est d’une efficacité hallucinante.

Un seul workflow pour régler la page : structure, animations, assets

ChatGPT s’occupe de la structure

Il écrit le plus vite en HTML5 + Tailwind ; idéal pour poser d’un coup les « exigences dures » : Bento Grid, fond noir + couleur d’accent #2657FD, titres numériques XXL, etc.

Prompt directement copiable : produis un seul fichier HTML, utilise le CDN TailwindCSS et le JS nécessaire, une mise en page Bento Grid, fond noir, accent #2657FD, grand titre en chinois avec une touche de petit texte en anglais, inclure des placeholders de petits graphiques de données, ne pas omettre les points de contenu clés.

Claude s’occupe de rendre les animations fluides

Écrire du Framer Motion via CDN est facile mais on obtient souvent un résultat « qui marche mais qui tremble » ; Claude est plus fort pour ajuster les déclenchements au scroll, les animations d’entrée et les courbes de timing afin que ça paraisse plus naturel (et il aime aussi t’ajouter des conditions aux limites).

Gemini s’occupe de combler les trous

En cas d’erreur navigateur, de styles écrasés ou de composants mal alignés, laisse Gemini corriger en mode « explication section par section + localisation du problème + code de remplacement » : tu éviteras de rester planté devant la console.

Midjourney s’occupe du visuel principal

Des visuels principaux du type « cœur de réacteur / explosion galactique / libération d’énergie » (les effets néon ultra-saturés + fond sombre mentionnés dans les assets) : c’est exactement son terrain ; ensuite, renvoie l’image à ChatGPT pour l’adaptation responsive.

Deux petites plaintes que je ressors souvent

• Les liens CDN fournis par les modèles expirent parfois ; si ça ne démarre pas, ne remets pas ta vie en question : remplace par la dernière version officielle.
• Ne surcharge pas les effets : plus une Bento Grid est maîtrisée, plus elle fait haut de gamme ; sinon, ça fait ambiance PPT de gala annuel.

Si tu bloques encore sur « quel modèle choisir / comment préparer les prompts / comment configurer d’un coup les comptes et les outils », tu peux aller faire un tour sur Titikey ; moi aussi je l’utilise souvent pour éviter des détours.