Des burgers 3D au merch personnalisé : créez une boutique avec l’IA

Le pain se soulève. Les cornichons apparaissent. Ajoutez une tranche de fromage et le burger change sous vos yeux, ainsi que le ticket de caisse.Ailleurs, un client dépose une illustration sur un sweat, la remonte un peu, puis fait pivoter le produit pour voir le rendu. Derrière cette interaction simple, le vendeur a déjà défini où le visuel peut se placer et quelle doit en être la taille.Ce sont deux expériences d’achat très différentes. Elles partagent une idée utile : une boutique peut être façonnée autour du produit que vous vendez, jusque dans la façon dont on le choisit.Nous avons placé ces deux points de départ dans la collection Modern Shop sur GitHub : , une vitrine 3D pour restauration rapide, et , un concepteur de produits pour merchandising personnalisé. Le code source est disponible sous licence MIT, vous pouvez donc l’explorer, l’adapter et le faire évoluer.Apportez une idée, votre marque, et un outil de codage IA comme Codex ou Claude Code. Il y a déjà de quoi commencer quelque chose d’intéressant.

Croq'3D : laissez vos clients composer leur déjeuner

Commencez par la démo en ligne de Croq'3D. Choisissez un burger, faites-le pivoter, et essayez de changer un ingrédient. La nourriture réagit avec un léger effet de souplesse. Sélectionnez une couche et l’empilement s’ouvre pour révéler ce qu’il y a à l’intérieur.C’est ludique, mais l’interaction a un but pratique. Les clients voient les choix qu’ils font. Cornichons, sauce, fromage et garnitures deviennent des éléments visibles d’une commande plutôt qu’une liste d’options à imaginer.Le créateur de pizza pousse la même idée dans une autre direction : choisissez la taille, la pâte, la sauce et les garnitures, puis regardez la pizza se former. Un ticket live montre les conséquences de ces décisions. La démo explore aussi la livraison ou le retrait, les codes promotionnels, le paiement et un écran de suivi de commande.Un petit détail compte lorsque les gens changent d’avis. L’article sur l’espace de création est un brouillon tant que le client n’a pas choisi . Un article de panier peut ensuite être ramené dans le créateur 3D pour être édité. C’est le type d’interaction qu’un restaurant peut personnaliser.Le code source de la vitrine 3D pour restauration est construit avec Vue, TypeScript et Three.js. Vous n’avez pas besoin de connaître ces noms pour essayer la démo. Pour un développeur ou un agent de codage IA, ils indiquent un projet navigateur familier à inspecter et étendre. Les formes alimentaires sont générées par code, ce qui vous donne un point de départ concret pour modifier leur apparence et leur comportement.Un burger indépendant pourra adapter le menu à ses propres recettes et emballages. Une pizzeria pourra mettre en avant ses combos signatures. Vous pouvez changer les couleurs, la langue, les textes, les options d’ingrédients et le parcours de commande pour coller à l’activité. Des mises en page en anglais et en persan sont déjà présentes dans l’exemple.Une limite importante à connaître avant de l’utiliser pour des commandes réelles : la démo actuelle utilise des données de catalogue d’exemple, des commandes stockées dans le navigateur et un paiement/suivi simulés. Sa connexion à Selldone doit encore être implémentée. L’expérience visuelle est là pour explorer ; les contrôles finaux de catalogue et de prix côté serveur, le paiement et l’exécution nécessitent une intégration commerce réelle. L’expérience 3D exige un navigateur compatible WebGL 2, pensez donc à tester une adaptation sur les téléphones et navigateurs de vos clients.

Atelier Maquette : une expérience pour le vendeur, une autre pour l’acheteur

Une boutique de T‑shirts personnalisés pose un autre type de problème. Le client veut expérimenter librement. L’imprimeur a besoin d’un visuel qui rentre dans la zone d’impression réelle.Atelier Maquette traite les deux côtés du problème. Ouvrez la démo en ligne du product-designer et vous verrez deux modes clairement identifiés : pour les administrateurs de la boutique et pour les acheteurs.

Le vendeur définit les règles une fois pour toutes

Dans l’éditeur de gabarits, le vendeur choisit le produit, ajoute des vues produit et définit la zone imprimable. Ces dimensions sont enregistrées en millimètres, avec des réglages pour la résolution et le fond perdu, la zone supplémentaire autour du bord de coupe.Le vendeur décide ensuite ce que le client peut modifier : déplacer, redimensionner ou faire pivoter un visuel, par exemple. Un motif poitrine peut avoir ses propres limites, tandis qu’une manche en utilise une autre. Le gabarit peut être testé côté client avant d’être transmis à l’application hôte.Cette séparation rend l’idée utile au‑delà d’un simple T‑shirt. La galerie d’exemples comprend un T‑shirt, un hoodie, un pull, une casquette, une tasse, un coussin et une étiquette. Des assets 3D préparés peuvent aussi être utilisés dans le format de modèle pris en charge. Pour une forme de produit différente, prévoyez de préparer le modèle et le mappage de sa zone d’impression.Le studio peut aussi créer des photos produit initiales à partir d’un modèle 3D configuré. Cela donne au vendeur un autre moyen de préparer des vues pour l’éditeur pendant le développement du produit.

Le client a de la marge pour jouer

L’éditeur côté acheteur est plus ciblé. Téléversez une image, positionnez‑la, ajustez sa taille et prévisualisez‑la sur le produit. Les règles du commerçant restent appliquées pendant que le client expérimente.Il existe des vues photo 2D et une vue 3D optionnelle que l’on peut faire pivoter. Les modifications du visuel apparaissent sur le modèle. Sur certains produits textiles pris en charge, un outil de « tirage » permet même de relever le tissu et d’observer son retour en place. C’est un effet de prévisualisation ; cela n’étire pas le visuel envoyé à l’impression.Une distinction claire parcourt le projet : l’une des sorties montre au client à quoi pourrait ressembler l’article. L’autre est un PNG transparent pour la surface d’impression, utilisant les dimensions physiques et la résolution configurées. Un indicateur de qualité d’impression aide à expliquer comment les pixels de l’image source se rapportent à la taille choisie.Pour un flux de production réel, l’imprimeur doit encore approuver les dimensions, les couleurs et les exigences de fichier. L’export actuel est un PNG RVB rendu par le navigateur, sans conversion CMJN ni gestion de profils colorimétriques spécifiques à l’imprimeur. Les formes produits générées sont des illustrations plutôt que des reproductions métriques exactes de chaque vêtement que vous pourriez vendre.La démo conserve aussi les gabarits et les designs localement. Les enregistrer pour une entreprise, attacher le design exact à une commande, prendre le paiement et envoyer le travail en production sont des étapes d’intégration pour une boutique aboutie. Les outils texte/police, variantes produit et glisser‑déposer direct d’un visuel sur la surface 3D figurent parmi les fonctionnalités encore prévues sur la feuille de route.

Un point de départ change la conversation avec l’IA

« Construis‑moi une boutique » laisse beaucoup de choses à deviner pour un assistant IA. « Prends cet éditeur produit, applique notre marque et rends le parcours client adapté à notre atelier d’impression » lui donne quelque chose de concret.C’est pour cela que nous partageons le code source. Vous pouvez voir l’interaction, l’essayer et pointer les éléments que vous souhaitez modifier. Une capture d’écran devient un sujet de discussion. Une démo devient une référence de travail. Le code offre à votre développeur ou agent de codage IA un point de départ concret.Utilisez ChatGPT pour travailler le brief métier : Qui achète ? Quelles options comptent ? Où les clients hésitent‑ils ? Quelles informations doivent remonter à la cuisine ou à l’atelier d’impression ? Ensuite, apportez ce brief à Codex, Claude Code ou un autre environnement de développement IA capable d’inspecter et modifier le projet.Les outils IA peuvent aider à adapter des composants, revoir le design, connecter des services, écrire des tests et expliquer du code inconnu. Un résultat solide dépend toujours d’un brief clair et de la vérification de l’expérience réelle. Donnez à l’assistant une étape utile à la fois et demandez‑lui de montrer ce qui fonctionne.

Où Selldone MCP intervient

La vitrine est la partie que touchent les clients. Derrière se trouvent les produits, les stocks, les paiements, les livraisons et les commandes qu’il faut traiter.Selldone MCP donne à un assistant IA connecté un accès structuré à une boutique Selldone autorisée. Pendant la construction, cela aide l’agent à travailler avec le catalogue, le contenu et la configuration pris en charge par la boutique au lieu de deviner un ensemble de données de démonstration distinct. L’accès reste limité à la boutique et aux permissions que vous choisissez.La vitrine déployée aura ensuite besoin de sa propre intégration Selldone API ou service. MCP aide l’assistant à faire le développement et le travail approuvé pour la boutique ; il ne transforme pas automatiquement le bouton de paiement d’une démo en un flux de paiement en direct.Pour Croq'3D, cela signifie connecter le menu et le parcours de commande aux services commerce réels. Pour Atelier Maquette, il s’agit de stocker le gabarit du vendeur et le design choisi par le client de façon fiable, puis de préserver ce design avec le bon produit et la bonne commande. L’expérience côté client peut rester distinctive pendant que Selldone fournit la base commerce.Il existe différentes façons de bâtir sur cette fondation. Une vitrine complète peut être personnalisée via le workflow Selldone Layout, tandis qu’une application frontale plus spécialisée peut utiliser un frontend séparé. L’aperçu Selldone Genesis explique ces trajectoires. Le bon choix dépend de la part de la boutique existante que vous souhaitez conserver et du caractère particulier du parcours client que vous visez.

Donnez une meilleure première consigne à votre IA

Vous pouvez commencer avec la requête suivante dans un environnement de codage. Remplacez les parties entre crochets par les détails de votre activité.

Inspectez les deux projets sur https://github.com/Modern-Shop et recommandez le meilleur point de départ pour [mon activité]. Lisez la documentation, puis clonez le projet choisi dans un nouveau dossier. Indiquez quelles fonctionnalités fonctionnent aujourd’hui et lesquelles nécessitent une intégration. Adaptez le parcours client à [ma marque, mes produits et mes exigences], en restant utilisable sur mobile.

Une fois la direction choisie, demandez l’étape suivante :

Connectez la boutique Selldone prévue via MCP avec les permissions nécessaires à cette tâche. Planifiez et implémentez le catalogue réel, le stockage des designs lorsque pertinent, le panier, le checkout et l’intégration des commandes en utilisant les services Selldone pris en charge. Remplacez les hypothèses de la démo par les données réelles de la boutique. Testez le parcours complet et montrez une prévisualisation avant déploiement.

Ces invites sont le début d’une conversation de construction. Un bon agent inspectera le projet, identifiera les éléments manquants et travaillera avec vous pour les résoudre.Pour un premier jalon de restaurant, vous pourriez demander une commande complète : personnaliser un article, voir le prix correct, payer dans le flux de test pris en charge et vérifier que la commande a bien été reçue par l’entreprise. Pour un atelier d’impression, suivez un design depuis le téléversement jusqu’à la prévisualisation et l’enregistrement exact de l’œuvre attachée à la commande.C’est aussi ici qu’une vitrine sur mesure peut devenir un projet plus économique. Du code d’interaction existant et une plateforme commerce peuvent réduire ce que vous devez construire depuis zéro. Le coût final dépendra toujours du design, des intégrations, des assets, de l’hébergement et des tests nécessaires à votre activité. La licence MIT rend le code d’exemple réutilisable ; elle n’inclut pas gratuitement ces services.

Construisez vous‑même, ou confiez l’idée à notre équipe

Nous continuerons à affiner les exemples Modern Shop et à développer la collection. Vous pouvez partir des versions disponibles aujourd’hui, adapter une expérience complète ou réutiliser la partie qui résout votre problème particulier.Si vous préférez que des spécialistes façonnent le résultat autour de votre marque, vous pouvez demander une estimation de vitrine sur mesure auprès de l’équipe officielle de mise en place et design de Selldone. Apportez la démo qui vous plaît, vos produits et l’expérience que vous souhaitez offrir aux clients. Nous pouvons cadrer le design et l’implémentation avec vous avant le démarrage du projet.Peut‑être que votre boutique commence par un burger qui se démonte à l’écran. Peut‑être qu’elle commence par une petite illustration sur une tasse. Ouvrez les démos, modifiez quelque chose et voyez quelle idée ressemble à votre activité.Explorez Modern Shop sur GitHub · Essayez le créateur alimentaire 3D · Essayez Atelier Maquette