Comment créer une boutique en ligne avec l’IA

Une petite boutique fonctionne mieux si vous définissez d’abord les bases. L’IA peut générer le code rapidement, mais elle a tout de même besoin d’un brief clair.

Notez :

• ce que vous vendez
• combien de produits vous voulez dans la version 1
• si les clients peuvent acheter directement ou seulement envoyer une demande
• les pages dont vous avez besoin
• les informations que chaque produit doit contenir

Pour une boutique simple, la première version a généralement besoin de :

• une page d’accueil
• une page boutique ou catalogue
• une page de détail produit
• une page panier ou un bouton de paiement
• une page à propos ou contact

Décidez aussi comment les données produits seront gérées. Si vous n’avez que quelques produits, vous pouvez commencer avec du contenu produit codé en dur dans le site. Si vous voulez gérer les produits, les comptes clients ou les commandes plus tard, c’est à ce moment-là qu’une base de données devient importante.

Gardez la première version ciblée. Trois à six produits suffisent pour valider le parcours.

Dans Moremade, vous décrivez le site en langage simple et l’agent IA écrit le code React et Tailwind. Vous obtenez ensuite un aperçu en direct et pouvez continuer à faire évoluer le site par chat.

Votre premier prompt doit couvrir la structure, le style et les principales interactions. Soyez précis sur ce qui doit exister sur la page, mais évitez de vouloir spécifier chaque pixel.

Un premier prompt utile inclut :

• le type de boutique
• les pages à générer
• les champs produit à afficher
• le style de mise en page
• le comportement du paiement
• le ton du contenu ou les contraintes de marque

Exemple :

Créez une petite boutique en ligne pour une marque de bougies artisanales. Créez une page d’accueil, une page boutique, une page de détail produit, une page panier et une page contact. Utilisez une mise en page minimale et épurée avec des couleurs neutres chaudes et des cartes produit claires. Ajoutez six produits d’exemple avec nom, prix, courte description, notes olfactives et images produit en tant qu’emplacements. La page produit doit afficher les images, la description, les ingrédients et un bouton ajouter au panier. Le panier doit permettre de modifier la quantité et de voir le sous-total. Rendez le site responsive et facile à utiliser sur mobile.

Après la première génération, utilisez l’aperçu en direct comme outil d’édition. Ne repartez pas de zéro sauf si la structure est complètement fausse. Il est généralement préférable de faire des demandes petites et directes.

Dans Moremade, vous pouvez discuter des modifications, utiliser l’inspecteur visuel pour pointer un élément et l’éditer, et consulter la vue du code si vous voulez voir ce qui a changé.

Les bons prompts de suivi sont précis et localisés. Demandez une amélioration à la fois.

Exemples :

• "Changez la grille produit en 3 colonnes sur desktop et 2 sur tablette. Uniformisez la hauteur des cartes produit et gardez le bouton ajouter au panier collé en bas."
• "Sur la page produit, placez les notes olfactives au-dessus des ingrédients, ajoutez une petite note sur la livraison sous le bouton ajouter au panier, et agrandissez l’image principale sur desktop."
• "Simplifiez le hero de la page d’accueil. Utilisez un titre plus court, une phrase d’accompagnement et un bouton principal qui mène à la page boutique."

C’est à cette étape que vient la majeure partie de la qualité. Vérifiez les espacements, la hiérarchie des produits, les libellés des boutons, les états vides et la clarté du parcours panier.

Toutes les premières versions n’ont pas besoin d’un backend complet.

Si vous voulez seulement une boutique vitrine ou une démo cliquable, vous pouvez garder les produits dans le code front-end et vous arrêter là. Si vous voulez que les clients paient, ajoutez Stripe. Si vous avez besoin d’une connexion, de données utilisateur enregistrées ou d’enregistrements produits stockés, ajoutez Supabase.

Moremade propose des connecteurs intégrés pour les deux.

Utilisez Stripe quand vous avez besoin de :

• un paiement avec de vrais prix que vous définissez
• un parcours de paiement simple pour un petit catalogue

Utilisez Supabase quand vous avez besoin de :

• la connexion client
• une base de données pour les produits ou les commandes
• du stockage de fichiers

Pour beaucoup de petites boutiques, Stripe est la première vraie intégration à ajouter. Un prompt de suivi pratique serait :

• "Connectez le paiement à Stripe en utilisant les prix produits affichés sur le site. Gardez la page panier, affichez le récapitulatif de commande avant le paiement, et rendez les boutons de paiement clairs sur mobile."

Si vous avez ensuite besoin de comptes clients ou de données liées au stock, c’est un bon moment pour intégrer Supabase plutôt que de forcer cela dans la version 1.

La plupart des petites boutiques sont jugées d’abord sur mobile, même si vous avez conçu sur desktop.

Vérifiez soigneusement ces éléments :

• hauteur du hero de la page d’accueil et visibilité du bouton
• lisibilité des cartes produit
• recadrage des images sur les pages produit
• contrôles de quantité du panier
• position du bouton de paiement
• champs de formulaire et zones tactiles

Demandez des corrections en langage simple. Par exemple :

• "Rendez le menu mobile plus simple avec des zones tactiles plus grandes et gardez l’icône panier visible dans l’en-tête."
• "Sur téléphone, empilez l’image produit au-dessus des détails produit et réduisez légèrement l’espacement latéral."

Si quelque chose paraît incorrect mais que vous n’arrivez pas bien à le décrire, utilisez d’abord l’inspecteur visuel pour pointer l’élément, puis demandez la modification.

Quand le site vous paraît correct, publiez-le.

Moremade peut publier en un clic sur un sous-domaine gratuit yourname.moremade.ai. Sur les formules payantes, vous pouvez connecter un domaine personnalisé. Les domaines peuvent aussi être achetés directement dans Moremade.

Un parcours de lancement simple est :

• publier sur le sous-domaine gratuit pour revue
• tester les liens, le parcours panier et le paiement
• connecter le vrai domaine quand la boutique est prête

Si vous voulez conserver une copie hors de la plateforme, vous pouvez exporter l’ensemble du code source en ZIP à tout moment ou le pousser vers GitHub. Les sites sont du vrai code React et Tailwind, donc vous n’êtes pas enfermé dans un format propriétaire.

L’erreur principale consiste à demander à l’IA de construire trop de choses trop tôt.

Évitez ces erreurs :

• commencer avec 20 fonctionnalités au lieu d’un simple catalogue et d’un paiement
• écrire un prompt vague comme "créez-moi une boutique en ligne" sans détail sur les produits ou les pages
• ajouter la connexion avant de savoir pourquoi les clients ont besoin d’un compte
• mélanger plusieurs directions de design dans une seule demande
• ignorer les tests mobiles jusqu’à la fin
• changer la structure et le style dans le même prompt lorsque vous déboguez un problème

Une meilleure approche consiste à construire par étapes :

1. Générer la structure de base de la boutique.
2. Corriger la mise en page et le contenu.
3. Ajouter Stripe si les clients doivent payer maintenant.
4. Ajouter Supabase uniquement si vous avez besoin de données enregistrées ou d’une connexion.
5. Publier, tester, puis itérer.

Cette approche garde le projet compréhensible et évite de dépenser des Build Units dans des réécritures évitables.