Tuto Claude : créer et mettre en ligne le site de votre commerce pas à pas

Un beau site tient d'abord à ses contenus et à ses visuels, pas à la technique : plus votre matière est précise, moins vous corrigez ensuite.

1. Créez un dossier "site-commerce" sur votre ordinateur.
2. Copiez-y un fichier texte avec : nom, activité, adresses, horaires, carte avec les prix, lien de commande, ce qui vous distingue (producteurs, histoire, savoir-faire).
3. Ajoutez le logo et 2 ou 3 captures de sites qui vous inspirent.
4. Notez en une phrase l'ambiance voulue, par exemple "street food premium, chaleureux, photo argentique".

Claude écrit le site ; le générateur fabrique les photos et les vidéos qui feront la différence.

1. Ouvrez l'application Claude pour ordinateur et connectez-vous.
2. Cliquez sur "Customize", onglet "Connectors", puis "Ajouter un connecteur personnalisé".
3. Nom : FLORA. URL : https://agents.flora.ai/mcp (sans barre à la fin), puis cliquez sur "Connecter" et connectez-vous à votre compte Flora.
4. Dans une conversation, activez-le par le bouton +, "Connecteurs", FLORA.

Deux extensions apprennent à Claude à faire des sites qui défilent avec des effets, au lieu de pages plates : ScrollCraft (la vidéo avance quand on descend dans la page) et HyperFrames (motion design).

1. Ouvrez l'onglet Code de l'application Claude et choisissez votre dossier "site-commerce".
2. Tapez l'une après l'autre les deux commandes ci-dessous. Si Claude répond "Run /reload-plugins to activate", tapez /reload-plugins.
3. Pour HyperFrames : "Customize", onglet "Plugins", cherchez "HyperFrames" et installez.

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Une demande qui parle d'images et autorise les questions donne un site cadré dès le premier essai.

1. Toujours dans l'onglet Code, sur le dossier "site-commerce", ouvrez une nouvelle session.
2. Indiquez à Claude que vos infos, votre logo et vos captures sont dans ce dossier.
3. Collez le texte ci-dessous en remplaçant les {{variables}}, puis validez avec Entrée.

Je veux que tu m'aides à construire le site internet de mon commerce {{nom_du_commerce}}, {{activite}} à {{ville}}.
Tu trouveras dans ce dossier toutes les informations (horaires, carte, prix, adresses, lien de commande), mon logo et des captures de sites dont j'aime le style.
Un bon site, c'est avant tout de bonnes images, de bons contenus et de bons visuels : utilise le skill scroll-craft pour construire le site et Flora pour créer les photos et les vidéos du site.
Sections souhaitées : {{sections}} (par exemple : carte interactive, commande en ligne, histoire et producteurs, infos pratiques).
N'invente aucune information : horaires, prix et adresses viennent uniquement de mes documents.
Avant de partir en production, pose-moi toutes les questions utiles sur mes attentes et sur ce qu'il faut mettre en avant.

C'est le moment où vous fixez la direction artistique ; une réponse floue ici se paie en allers-retours plus tard.

1. Choisissez la direction artistique proposée la plus proche de votre ambiance, ou écrivez la vôtre.
2. Validez les sections à garder et précisez celles à retirer.
3. Pour les images, répondez : "utilise Flora".

Des visuels qui semblent venir d'un même shooting évitent l'effet "image générée" qui fait fuir les clients.

1. Pendant le travail, envoyez à Claude la consigne de style ci-dessous, adaptée à votre ambiance.
2. Attendez que Claude annonce que le site est prêt.

Pour toutes les images et vidéos : rendu aussi réaliste que possible, aucune ambiance IA. Style {{style_photo}} (par exemple : photo argentique au flash, look un peu vintage), même lumière et même grain partout, comme un seul shooting réalisé par le même photographe. Utilise {{modele_images}} pour les images et {{modele_videos}} pour les vidéos.

À ce stade le site n'existe que sur votre machine : c'est le moment de tout vérifier avant que quiconque le voie.

1. Ouvrez le lien d'aperçu donné par Claude (une adresse qui commence par "localhost").
2. Faites défiler toute la page, cliquez sur chaque bouton et chaque lien de commande.
3. Comparez horaires, prix et adresses avec vos documents.
4. Envoyez à Claude la liste des corrections en une seule fois.

Le connecteur permet à Claude de mettre le site en ligne lui-même, sans manipulation technique de votre part.

1. Dans l'application Claude, ouvrez "Customize" puis "Plugins".
2. Cherchez "Hostinger" et ajoutez "Hostinger connector".
3. Connectez-vous à votre compte Hostinger dans la fenêtre qui s'ouvre.

Une vraie adresse permet de montrer le site à vos clients, à un associé ou à un commerçant à qui vous le proposez.

1. Dans la même conversation, collez le texte ci-dessous.
2. Quand Claude propose une adresse gratuite (en hostinger-site.com) ou votre nom de domaine, choisissez l'adresse gratuite pour un premier test.
3. Ouvrez l'adresse donnée par Claude sur votre téléphone.

Merci pour ce site. Il ne me reste plus qu'à le mettre en ligne : je veux qu'il soit disponible sur une adresse que je peux envoyer à {{destinataire}}. Utilise le connecteur Hostinger pour l'héberger, et propose-moi les options d'adresse avant de publier.