Le Kit : parcourir, aperçus et ajout d'un module

L'Explorer comporte exactement trois niveaux, et chacun se trouve dans l'adresse propre de la page, et non seulement dans l'état du composant : la grille des catégories (/projects/kit ou /projects/<id>/kit), la liste des modules d'une catégorie (ajoutez ?cat=<key>), et la page de détail complète d'un module (ajoutez &module=<id>). Ainsi, le bouton Retour du navigateur fonctionne toujours correctement, et la page de détail d'un module précis est un lien réel que vous pouvez partager : envoyez directement quelqu'un vers « voici exactement ce que vous offre le formulaire de devis ou de demande d'estimation » au lieu de lui indiquer où cliquer. La touche Échap remonte d'un niveau à la fois, comme le fait Retour.

Ouverte depuis un projet (/projects/<id>/kit), la page sait quel projet vous consultez : elle peut donc afficher ce qui s'y trouve déjà et vous permettre d'ajouter directement des éléments. Ouverte seule (/projects/kit, depuis le lien de l'onglet Kit ou directement), elle reprend les trois mêmes niveaux sans rien de spécifique à un projet : utile pour parcourir le catalogue avant de décider ce que vous allez créer, ou pour montrer le catalogue à quelqu'un sans ouvrir un projet précis.

En haut de la grille des catégories, le même bouton à deux positions que partout ailleurs dans aiKit répartit l'ensemble du catalogue : Kit du site regroupe les sections et fonctionnalités qui deviennent une partie du site web ou de l'application elle-même (pages, formulaires, galeries, boutique, réservation, référencement) ; Kit des outils professionnels regroupe les outils qui fonctionnent à côté du projet plutôt qu'à l'intérieur (automatisation marketing, facturation, CRM, outils pour l'équipe, rapports). Chaque vignette de catégorie indique son nombre de modules, et un badge « N prêts maintenant » apparaît dès qu'au moins un d'entre eux est un module Prêt maintenant (voir ci-dessous).

La zone de recherche au-dessus des catégories porte sur le nom ou la description des modules dans TOUT le catalogue à la fois, Kit du site et Kit des outils professionnels confondus, quel que soit le bouton sélectionné : ainsi, rechercher « facture » trouve le module même si vous consultez le Kit du site.

Ouverte depuis un projet, et seulement lorsque vous ne faites pas de recherche, une rangée « Recommandé pour ce projet » apparaît au-dessus de la grille des catégories lorsqu'aiKit a de vraies suggestions : des règles simples, sans IA, appliquées au type du projet (un site web reçoit des suggestions de formulaire de devis, de formulaire de contact, de vitrine d'avis, de référencement local et de pages FAQ ; une boutique en ligne reçoit le panier et le paiement, la récupération des paniers abandonnés et les avis produits ; et ainsi de suite pour les pages de destination, les applications, les systèmes d'administration, les tableaux de bord, les espaces clients, les blogs et les projets d'automatisation marketing), ainsi que quelques correspondances par mots-clés dans le texte d'objectif du projet (mentionner « devis », « réservation », « avis », « e-mail », « facture » ou « vendre en ligne » fait apparaître le module correspondant avec sa propre raison en une ligne). Les éléments déjà présents dans le projet sont exclus, et la liste est limitée à six.

Chaque module porte l'une de deux pastilles de statut, dont le libellé est volontairement factuel et non promotionnel. « Prêt maintenant » signifie que le module fait partie des modules testés du moteur de création : du vrai code qui affiche une page réelle avec des données d'exemple à la place de vos informations, exactement le même modèle que celui d'un site en ligne. « Conçu pour vous » signifie que le module est une vraie partie prévue du catalogue, mais que rien ne l'affiche encore : le choisir l'ajoute au plan et crée un véritable élément de travail, et le module est intégré au code du site, avec sa propre marque et ses propres textes, comme toute autre modification faite par l'IA ; simplement, il n'existe pas encore de modèle testé prêt aujourd'hui.

Aucun des deux statuts ne signifie « pas réel » ou « hypothétique ». Les deux sont des éléments qu'aiKit créera réellement pour vous. La seule différence indiquée par la pastille est de savoir si vous pouvez voir dès maintenant la forme finale du module ou si vous devez l'imaginer à partir d'une description et d'un schéma.

L'ouverture d'une catégorie affiche chaque module sous forme de carte : une vignette, le nom du module, sa pastille de statut, une courte description d'une ligne, une rangée de puces « Idéal pour » (jusqu'à trois) et « Dans ce projet » s'il a déjà été ajouté (lorsque vous parcourez un projet). La vignette d'un module Prêt maintenant est un petit aperçu en direct de la vraie page, chargé seulement lorsqu'il entre dans l'écran, et limité à six vignettes en direct à l'écran à la fois afin qu'une longue catégorie ne ralentisse jamais la page ; au-delà de cette limite, un simple espace de chargement s'affiche jusqu'à ce qu'il soit réellement visible. La vignette d'un module Conçu pour vous est le même schéma illustratif décrit ci-dessous, en plus petit, sauf pour les modules qui disposent d'un aperçu fonctionnel (voir ci-dessous) : leur carte affiche alors le vrai site d'exemple réduit, un badge « Aperçu fonctionnel · N variantes » et un bouton « Voir en action » au lieu de « Voir les détails ». « Voir les détails » ouvre la page propre au module.

Pour un module Prêt maintenant, l'aperçu est une véritable iframe de la page réelle et testée, en taille réelle, encadrée comme une petite fenêtre de navigateur avec un bouton Ordinateur/Téléphone qui redimensionne vraiment le cadre pour que vous puissiez voir comment la page s'affiche sur un téléphone (sur un vrai téléphone, le bouton est remplacé par un simple libellé « Aperçu téléphone » et le cadre s'ouvre défilé jusqu'au formulaire lui-même, pour que vous voyiez les champs, pas seulement la bannière). Le cadre s'estompe en bas ; « Ouvrir l'aperçu complet » sous celui-ci ouvre la page entière dans un nouvel onglet, et une légende en dessous nomme l'entreprise fictive dont les données sont utilisées. Ouvert dans un projet, un bouton « Afficher avec les couleurs de ce site » relance le même aperçu avec les couleurs de marque du projet (lues directement dans les codes hexadécimaux saisis dans les notes de marque du brief) et le nom du projet à la place, pour que vous voyiez quelque chose de plus proche de ce que votre site affichera réellement, et non un exemple générique.

Pour un module Conçu pour vous, il n'y a pas d'iframe en direct : vous obtenez à la place le même schéma d'illustration que dans la liste des catégories, dessiné en plus grand : un diagramme SVG simple à trait unique représentant la forme de la mise en page (les champs d'un formulaire, la grille d'un calendrier, les tuiles d'un tableau de bord, selon le type d'écran qui convient à ce module) avec quelques courtes étiquettes tirées des données d'aperçu du module. Une légende en dessous est obligatoire sur chacun de ces aperçus et ne doit jamais être supprimée : « Illustration de la mise en page. Votre version est conçue pour correspondre à votre site. » Elle est là précisément pour qu'un croquis de la forme ne soit jamais pris pour un aperçu finalisé et aux couleurs de la marque.

Aperçus fonctionnels (2026-10-04) : un nombre croissant de modules Conçu pour vous ne proposent pas de croquis, mais ouvrent à la place un site d'exemple complet et cliquable, affiché sur toute la largeur au-dessus des détails. Les douze modules Boutique en ligne / E-commerce ouvrent tous la même boutique de poterie fictive, Juniper Kiln, chacun sur la partie qui le concerne : le catalogue (filtrer, trier, rechercher, ouvrir un produit et choisir un émail et une taille — l'image et le prix changent), le panier et le paiement (modifier les quantités, retirer des articles, saisir WELCOME10, FREESHIP ou GIFT-2580, estimer la livraison par code postal et finaliser la commande jusqu'à une page de confirmation), les options de paiement (carte, Payer en 4 et boutons de portefeuille électronique), les tarifs d'expédition, les codes de réduction et cartes cadeaux, les avis clients (filtrer par étoiles ou photos, marquer comme utile, en rédiger un), les lots et options complémentaires, la taxe de vente (changer l'état de livraison et la ligne de taxe change), les comptes clients (se connecter, racheter, suivre un colis, lancer un retour), les e-mails de commande (confirmation, expédition et livraison, avec une page de suivi fonctionnelle), les retours et échanges (retrouver la commande, choisir les articles et un motif, obtenir une étiquette de retour) et les stocks (une vue Propriétaire où modifier le stock change ce que voient les acheteurs). Les dix modules Cours en ligne et produits numériques ouvrent tous une école de boulangerie fictive, Rise & Crumb : lire une leçon (vitesse, sous-titres), la marquer comme terminée, regarder l'anneau de progression se remplir, passer le quiz, s'inscrire depuis l'aperçu gratuit, voir le certificat, poser une question sous une leçon, acheter un téléchargement numérique, choisir un lot de cours ou cocher un complément à la commande, et passer à la vue Propriétaire pour renommer, réordonner, ajouter ou dépublier des leçons et définir la date d'ouverture de chaque semaine. Sur le module de calendrier de diffusion, une ligne Heure d'aperçu au-dessus du cadre propose Avancer d'une semaine (et Revenir à aujourd'hui), pour que vous puissiez voir les leçons verrouillées s'ouvrir à leurs dates.

Au-dessus du cadre : une rangée de choix pour chaque variante proposée par le module (par exemple Mise en page de la boutique : Grille, Liste ou Mise en avant ; Panier : Panier coulissant ou Page panier, plus Paiement : Une seule page ou Étape par étape ; Règle de diffusion : À dates fixes, Jours après l'inscription ou Après la dernière leçon). Un choix redessine immédiatement le site d'exemple dans cette variante et est enregistré dans l'adresse de la page (?v=…), afin qu'un lien vers une variante précise puisse être partagé. Ordinateur et Téléphone redimensionnent le cadre pour que le site d'exemple se réorganise comme il le ferait sur un téléphone (sur un vrai téléphone, il s'agit d'un simple libellé « Affichage téléphone »). Réinitialiser remet le site d'exemple dans son état de départ. Une courte rangée « À essayer » indique quoi cliquer en premier, et la description de chaque variante choisie se trouve sous le cadre. Dans un projet dont le brief contient des couleurs de marque, « Afficher avec les couleurs de ce site » remplace la couleur principale du site d'exemple par celle du projet (uniquement si cette couleur est assez foncée pour que le texte blanc des boutons reste lisible).

Rien dans un aperçu fonctionnel n'atteint un serveur. Il n'existe aucune connexion de paiement : le paiement est étiqueté « Aperçu — rien n'est facturé et aucune commande n'est envoyée », le numéro de carte est un exemple fixe en lecture seule, et les boutons de portefeuille (Apple Pay, Google Pay, PayPal) affichent seulement une note. Aucun e-mail n'est envoyé, aucun avis n'est publié et rien n'est enregistré ; quitter la page efface tout. Les entreprises, produits, personnes et prix d'exemple sont inventés. La légende sous le cadre le précise : « Aperçu fonctionnel avec des données fictives pour une entreprise inventée. Votre version utilise vos propres produits, prix, textes et votre marque. Rien ici n'est facturé, enregistré ni envoyé. » Tous les autres modules Conçu pour vous affichent toujours l'illustration de la mise en page.

• Ce que voit le visiteur : un parcours numéroté, en langage simple, de ce que vit réellement une personne qui utilise le module, étape par étape.
• Ce que vous obtenez : ce que le module remet au propriétaire du projet (des prospects enregistrés quelque part de réel, un statut que vous pouvez mettre à jour, etc.).
• Fonctionnalités et, uniquement pour un module doté de variantes nommées définies dans le catalogue, un ensemble de cartes sélectionnables « Choisir la variante » directement dans cette section (la première est sélectionnée par défaut, avec une petite coche), afin qu'un véritable choix entre deux options (et non une simple personnalisation en texte libre) se fasse ici plutôt que d'être saisi à la main.
• Pourquoi c'est important : l'argument honnête pour lequel une entreprise voudrait ce module.
• Comment il se personnalise (Prêt maintenant) ou Variantes au choix (Conçu pour vous) : ce qui peut vraiment être rendu différent dans ce module.
• Idéal pour : les mêmes puces de types d'entreprise que sur la carte, affichées en entier.
• Comment il est créé : une phrase simple qui indique exactement comment ce module existe (une page testée que le moteur affiche déjà, ou intégrée au site par l'IA pendant une création), avec une note s'il nécessite un compte tiers comme le paiement ou la carte.

Tout en bas se trouve « Ajouter à <nom du projet> » (ou « votre projet », si vous parcourez sans projet sélectionné). Si le module a des idées de personnalisation enregistrées, elles apparaissent d'abord sous forme de liste à cocher — intitulée « Personnalisations suggérées » pour un module Prêt maintenant, ou « Choisissez les variantes souhaitées » pour un module Créé pour vous — et cocher l'une d'elles ajoute cette ligne exacte à ce qui est envoyé, et non pas simplement une case silencieuse.

Pour un module avec un aperçu fonctionnel, le panneau se trouve dans la colonne de gauche sous l'aperçu et commence par « Votre variante » — la variante choisie dans les lignes de choix de l'aperçu (par exemple « Panier : page du panier · Paiement : étape par étape »). Tout ce qui est affiché dans l'aperçu au moment où vous appuyez sur Ajouter est enregistré : il est sauvegardé dans le brief du projet avec ce module, et l'élément de travail affiche « Variante : … » afin que la personne qui le réalise crée cette mise en page. Un module qui comporte aussi des options nommées dans sa section Fonctionnalités demande « Qu'est-ce qui compte le plus pour vous ? » à cet endroit, pour que les deux choix ne soient pas confondus.

« Qu'est-ce qui doit être différent pour vous ? » est une note en texte libre avec le même bouton de dictée que partout ailleurs dans aiKit, ainsi qu'un bouton « Joindre une photo ou un PDF » (images et PDF uniquement, jusqu'à 2,5 Mo chacun) pour un logo, une photo de référence ou une fiche technique — les fichiers joints apparaissent là sous forme de pastilles supprimables. Si le module comporte de vraies questions précises auxquelles il faut répondre pour être bien créé, elles apparaissent sous « Ce que nous vous demanderons », chacune avec son propre champ de texte facultatif, afin que vous puissiez répondre dès maintenant au lieu d'attendre qu'on vous les pose plus tard.

« Ajouter au plan » est toujours disponible dès que vous êtes sur un vrai projet : il enregistre le choix dans le brief du projet (le même plan que lisent l'écran Plan du site et la page du projet) et crée un véritable élément de travail destiné à notre équipe, dans l'onglet Commentaires, marqué « En attente de notre part », exactement comme toute autre demande. « Ajouter et créer maintenant » apparaît à côté seulement lorsque le projet contient déjà de vrais fichiers à modifier — sa première création est terminée ou il est déjà en ligne ; cela fait les deux mêmes choses, puis lance immédiatement cet élément de travail dans le même éditeur IA qu'utilise Corriger avec l'IA, sans file d'attente séparée. Tenter d'ajouter un module déjà présent sur le projet est refusé directement avec un message simple « déjà sur ce projet », plutôt que de créer un doublon.

Une fois envoyé, une confirmation remplace les boutons par ce qui s'est réellement passé : le message simple « Ajouté au plan comme élément de travail », ou, pour une demande de création immédiate, le statut réel (lancée, ou la raison précise si ce n'est pas possible, comme une mise en attente pour approbation préalable) — ainsi que deux liens directs vers « Ouvrir le plan » et « Voir les demandes », pour que vous sachiez toujours où cela est allé.

À /projects/kit — la même connexion réelle que le reste du tableau de bord des projets hébergés, sans projet requis — tout fonctionne exactement de la même façon, jusqu'au moment où vous essayez d'ajouter quelque chose. Appuyer sur « Ajouter à un projet » (le bouton affiche ce texte au lieu de « Ajouter au plan » lorsqu'aucun projet n'est chargé) ouvre « À quel projet ajouter ? », un petit sélecteur listant tous les projets de votre compte. Choisissez-en un et vous êtes dirigé directement vers l'Explorateur de kit de ce projet, avec le même module encore ouvert, prêt à être ajouté. Si vous n'avez pas encore de projet, le sélecteur l'indique clairement et propose un lien direct « Démarrer un projet → » au lieu de vous laisser bloqué.