Comment créer un site d’annuaire avec l’IA

Avant d’ouvrir le builder, notez la version la plus simple et utile du site.

Pour la plupart des sites d’annuaire, cela signifie :

• une page d’accueil qui explique la niche
• une page de listings avec des cartes
• une recherche et quelques filtres
• une page de détail pour chaque élément
• une page de soumission ou de contact si des personnes peuvent suggérer des fiches
• une navigation de base et des pages de pied de page

Définissez aussi la structure des données. Un annuaire est surtout une collection d’enregistrements, donc soyez précis sur les champs. Exemples de champs :

• nom
• catégorie
• ville ou région
• courte description
• URL du site web
• image
• niveau de prix
• tags
• e-mail de contact

Décidez ensuite qui peut faire quoi :

• les visiteurs peuvent parcourir et rechercher
• les éditeurs peuvent ajouter ou modifier des fiches
• les entreprises peuvent soumettre leur propre fiche

Si la première version est seulement un annuaire sélectionné par vos soins, vous n’avez peut-être pas encore besoin de connexion. Si des comptes, des éléments enregistrés ou des soumissions de fiches sont nécessaires, prévoyez-le avant de commencer.

Le premier prompt est important, car il définit la structure, les choix techniques et le ton du projet. Dans Moremade, vous décrivez le site en langage simple et l’agent IA écrit le code source, puis affiche un aperçu en direct.

Un bon premier prompt doit couvrir :

• le type d’annuaire
• les pages dont vous avez besoin
• les champs principaux de chaque fiche
• le style visuel
• si le contenu est statique pour l’instant ou connecté à des données plus tard
• les éventuelles contraintes mobiles

Restez concret. Ne demandez pas tout d’un coup si vous êtes encore en train de définir le flux de travail.

Créez un site d’annuaire en React + Tailwind pour des cafés indépendants à Lisbonne. Incluez une page d’accueil, une page de consultation avec des cartes de fiches recherchables, des filtres par quartier et par prix, ainsi qu’une page de détail pour chaque café. Chaque fiche doit afficher le nom, une photo, une courte description, l’adresse, les horaires d’ouverture, le site web et des tags comme wifi ou brunch. Utilisez une mise en page éditoriale épurée avec une navigation simple et une grille de cartes adaptée au mobile. Commencez avec des données d’exemple. Ajoutez une page de soumission d’un café avec une mise en page de formulaire, mais sans backend pour le moment.

Après la première version, inspectez l’aperçu en direct comme vous le feriez pour une maquette front-end envoyée par un collègue. Vérifiez la hiérarchie des pages, les espacements, le comportement des filtres, la lisibilité des cartes et la façon dont la page de détail expose les bonnes informations.

Moremade vous permet de modifier par conversation, et propose aussi un inspecteur visuel et une vue du code. Utilisez des demandes courtes et précises plutôt que de réécrire tout le brief.

Trois prompts de suivi utiles :

• "Modifiez les cartes de listings pour que l’image soit en 4:3, placez les tags sous la description, et faites du lien vers le site web un bouton secondaire."
• "Ajoutez une barre de filtres fixe sur la page de consultation avec la recherche, le quartier et le prix. Sur mobile, regroupez les filtres dans un tiroir."
• "Réécrivez le hero de la page d’accueil et le texte d’introduction pour un ton plus neutre et pratique. Ajoutez une section expliquant comment les cafés sont sélectionnés."

Cette étape demande généralement plusieurs allers-retours. Concentrez-vous sur un seul type de changement à la fois :

• mise en page et navigation
• logique des filtres et contenu des cartes
• texte et libellés
• espacements sur mobile
• détails d’accessibilité comme le texte des boutons et le contraste

Si une page fonctionne bien, demandez au builder de réutiliser ce modèle sur le reste du site.

Beaucoup d’annuaires peuvent être lancés d’abord avec du contenu d’exemple ou du contenu sélectionné. N’ajoutez des éléments backend que lorsqu’il y a un besoin réel.

Utilisez Supabase si vous avez besoin de :

• une base de données pour les listings
• une connexion admin ou utilisateur
• du stockage de fichiers pour les images
• des fiches soumises par les utilisateurs

Exemples :

• un annuaire d’entreprises locales où les éditeurs ajoutent des enregistrements dans une base de données
• un annuaire de membres où les utilisateurs se connectent pour gérer leur profil
• un annuaire avec un workflow de soumission

Utilisez Stripe si l’annuaire facture quelque chose, par exemple :

• des soumissions de fiches payantes
• des emplacements sponsorisés
• un accès par abonnement à des données premium

Gardez une portée serrée. Si votre première version n’est qu’un parcours public, n’ajoutez pas encore de système de comptes ni de paiements. Moremade inclut des connecteurs pour Supabase et Stripe, donc vous pouvez les brancher quand le modèle produit est clair.

Un schéma courant est :

• construire d’abord l’expérience de consultation publique
• connecter Supabase pour les listings et l’édition admin
• ajouter Stripe plus tard s’il existe un flux de soumission payant

Les sites d’annuaire paraissent souvent corrects sur desktop et maladroits sur téléphone. Les problèmes habituels sont des cartes trop longues, des filtres trop serrés et des pages de détail avec trop de sections mal empilées.

Passez en revue ces points dans l’aperçu :

• largeur de la barre de recherche et zones tactiles
• bon comportement du repli des filtres
• recadrage des images dans les cartes
• lisibilité des adresses, tags et métadonnées
• espacements autour des boutons et des formulaires
• maintien des informations les plus utiles en haut de la page de détail

Si nécessaire, demandez des ajustements mobiles précis, par exemple :

• réduire le texte des cartes à deux lignes
• déplacer les métadonnées secondaires sous la ligne de flottaison
• transformer les chips de filtres en ligne de défilement horizontal
• rendre le bouton d’appel à l’action pleine largeur sur les petits écrans

C’est aussi un bon moment pour utiliser l’inspecteur visuel afin de cliquer sur un élément et de l’ajuster directement.

Quand la structure et le contenu sont suffisamment stables, publiez le site. Moremade peut publier en un clic vers un sous-domaine gratuit yourname.moremade.ai. Si vous êtes sur un plan payant, vous pouvez connecter un domaine personnalisé. Les domaines peuvent aussi être achetés dans Moremade.

Une manière pratique de lancer le site est :

• publier d’abord sur le sous-domaine gratuit
• tester les liens, les formulaires et les titres de page
• le partager avec quelques personnes pour recueillir des retours
• connecter le domaine personnalisé une fois le site prêt

Si vous voulez conserver une copie en dehors de la plateforme, exportez le code source complet en ZIP ou poussez-le vers GitHub. Les sites sont du vrai code React + Tailwind, donc vous n’êtes pas coincé avec un format propriétaire.

La plupart des problèmes viennent d’une structure floue, pas de l’outil lui-même.

Évitez ces erreurs :

• Trop de filtres trop tôt. Commencez avec les deux ou trois champs que les gens utilisent réellement pour affiner leur choix.
• Pas de modèle de données. Si les champs des fiches sont vagues, chaque page devient incohérente.
• Mélanger curation et soumissions sans règles. Décidez si les fiches sont éditoriales, soumises par les utilisateurs, ou les deux.
• Ajouter la connexion avant qu’elle soit nécessaire. Les annuaires publics fonctionnent souvent très bien sans comptes au lancement.
• Écrire un énorme prompt pour chaque fonctionnalité. Construisez d’abord le flux principal, puis affinez par petites étapes.
• Ignorer la vérification mobile. La plupart des consultations d’annuaires se font sur téléphone.
• Lancer sans prévoir la propriété du code. Exportez le code ou poussez-le vers GitHub si vous voulez une reprise propre plus tard.

L’historique des versions aide ici. Si une série de changements dégrade le site, revenez en arrière et essayez une instruction plus ciblée.