Crée une boutique de mode de luxe IA avec espace admin

Claude Desktop

Utilise Claude Code dans l'application de bureau pour configurer et personnaliser ta boutique.

Télécharger Claude Desktop

https://claude.ai/download

Compte GitHub

Gratuit. Ta propre copie de STILLFORM y est stockée, et Hostinger la déploie à partir de là.

Créer un compte GitHub

https://github.com/signup

Node.js

Télécharge la version LTS actuelle. Il fait tourner la boutique sur ton ordinateur.

Télécharger Node.js

https://nodejs.org/en/download

Compte Supabase

Le plan gratuit suffit. Il contient tes produits, tes photos, tes commandes et la connexion du propriétaire.

Créer un compte Supabase

https://supabase.link/r4gdwhi

Compte Cloudflare

Gratuit. Sa vérification Turnstile tient les bots à l'écart de ton checkout.

Créer un compte Cloudflare

https://dash.cloudflare.com/sign-up

Hébergement Hostinger

STILLFORM est gratuit ; ta boutique en ligne tourne ici.

Choisis un plan Hostinger

Utilise le plan Unlimited ou un plan Cloud — STILLFORM se déploie comme une Node.js Web App.

Crée ta propre copie

Essaie d'abord la boutique terminée dans la démo en ligne : survole le portant de vêtements, fais-le glisser et ouvre une pièce. Le checkout et Studio y sont désactivés.

Ouvrir STILLFORM sur GitHub

https://github.com/salhiworks/stillform-fashion-store

Clique sur Use this template, puis sur Create a new repository Donne-lui un nom et choisis Public ou Private Clique sur Create repository et copie son adresse

Récupère-le sur ton ordinateur

Claude Desktop Code Local

Démarre une session Local dans un dossier comme Documents, ajoute l'adresse de ton dépôt ci-dessous et envoie :

Cloner ta copie

Télécharge ton propre dépôt STILLFORM dans un nouveau sous-dossier.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

L'adresse de ton nouveau dépôt

https://github.com/your-name/my-fashion-store

Ouvre ton dossier STILLFORM

Démarre une nouvelle session Local Ouvre le dossier que Claude vient de créer — celui qui contient README.md Si Claude Desktop le demande, fais confiance au dossier

Lance la boutique en local

Dans ta session STILLFORM, envoie :

Préparer et lancer STILLFORM

Installe le projet et lance la boutique sur ton ordinateur, en mode démo.

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Ouvre l'adresse que Claude te donne, généralement http://localhost:5173. Sans Supabase, la boutique tourne en mode démo avec sa collection intégrée : le portant, les pages produit et le panier fonctionnent, et le checkout reste désactivé jusqu'à l'étape 3.

Créer un projet Supabase

Ouvrir le tableau de bord Supabase

https://supabase.com/dashboard

Clique sur New project — n'importe quelle région et le plan Free conviennent Laisse la Data API activée Garde le mot de passe de la base de données en lieu sûr — Claude n'en a jamais besoin Quand le projet est prêt, copie son Project ID

Supabase Project Settings General

Le Project ID est la seule information du projet dont Claude a besoin. Il récupère lui-même ta Project URL et ta Publishable key via la Supabase CLI.

Se connecter à la Supabase CLI

Cela ouvre ton navigateur, donc tu le lances toi-même, une seule fois :

Clique sur le bouton Terminal en haut de ta session STILLFORM Exécute la commande ci-dessous Approuve la connexion dans la fenêtre du navigateur qui s'ouvre

npx supabase login

Créer un widget Turnstile

Ouvrir le tableau de bord Cloudflare

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Donne au widget le nom de ta boutique Dans hostnames, ajoute localhost Ajoute aussi le domaine de ta boutique si tu le connais déjà — sinon, tu l'ajoutes à l'étape 5 Choisis le mode Managed et crée le widget Garde la page ouverte : l'étape 3 a besoin de sa clé de site et de sa clé secrète

Demande à Claude de connecter ta boutique

Dans ta session STILLFORM, ajoute ton Project ID ci-dessous et envoie :

Connecter STILLFORM à Supabase

Claude relie ton projet, met en place la base de données et la collection de départ, et déploie la fonction de checkout.

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Ton Project ID Supabase

abcdefghijklmnopqrst

Claude demande avant chaque commande — clique sur Allow. Il s'arrête quand c'est ton tour.

Saisis tes secrets dans le Terminal

Quand Claude te le demande, lance la configuration propre à la boutique dans le Terminal. Elle saute tout ce que Claude a déjà fait et ne te demande que ce qui est privé :

npm run setup

À la protection du checkout, choisis 1, puis colle ta clé de site et ta clé secrète Turnstile Si elle propose de redéployer la fonction place-order, tape n — Claude l'a déjà déployée Saisis ton e-mail et un mot de passe d'au moins 12 caractères pour ton compte propriétaire Quand elle le demande, désactive Allow new users to sign up dans ton tableau de bord Supabase, puis appuie sur Entrée — le setup vérifie que c'est désactivé Dis à Claude que c'est fait

Supabase Authentication Sign In / Providers

Garde-les privés

Tape ta clé secrète Turnstile et ton mot de passe uniquement dans les invites masquées du Terminal. Ne les colle jamais dans le chat.

Vérifier la configuration et se connecter

Claude lance les vérifications de la boutique et la redémarre. Quand il indique que tout est passé :

Recharge ta boutique locale — elle charge maintenant sa collection depuis ta base de données Ouvre /admin et connecte-toi avec ton e-mail et ton mot de passe de propriétaire

Te voilà dans Studio, le tableau de bord de ta boutique. Seuls les comptes de la liste des administrateurs de la boutique peuvent l'ouvrir, et personne ne peut s'inscrire.

Ajouter un produit

Tout ce que tu enregistres dans Studio va directement dans ta base de données — aucune modification de code.

Studio Products Add a product

Remplis Name, Category et One-line summary Dans Photos, ajoute une photo de face Dans Price, sizes and stock, définis le Price et choisis les Sizes Nomme la première couleur, choisis sa pastille et saisis son stock pour chaque taille Clique sur Add a colour pour chaque autre coloris Clique sur Publish

Facultatif : une fois tes propres pièces ajoutées, archive ou supprime les huit produits de démonstration dans Products.

Ajuster la photo sur le portant

Ajouter une photo de face ouvre l'éditeur du portant. Un détourage PNG transparent avec le crochet du cintre en haut rend le mieux ; une photo devant un mur clair et uni fonctionne aussi.

Active Remove the plain background si la photo n'est pas détourée Règle Size et la position, ou fais glisser la photo dans l'aperçu Décris la photo pour les lecteurs d'écran Clique sur Use this photo

Vérifie Preview on the rail : survole la pièce pour la faire tourner et clique dessus pour ouvrir le gros plan. Des photos de dos et de profil lui permettent de tourner complètement.

Organiser le portant

Studio Rail

Dans Add a piece, choisis ton nouveau produit et sa couleur Fais glisser les pièces pour les mettre dans l'ordre, ou utilise les flèches Retire toute pièce que tu ne veux pas sur la page d'accueil Clique sur Save rail

Six à dix pièces conviennent à un écran d'ordinateur. Sur téléphone, le portant devient un carrousel à faire défiler.

Façonner les collections et le lookbook

Studio Collections

Dans Homepage selection, choisis les pièces mises en avant sur la page d'accueil et clique sur Save Clique sur New collection, ou modifie-en une, et ajoute ses pièces

Studio Lookbook

Modifie le titre et l'introduction Importe tes propres photos et légendes pour chaque double page Masque ou réordonne les doubles pages, puis clique sur Save lookbook

Mettre à jour les réglages et ouvrir le checkout

Studio Settings

Dans Store, définis le nom de ta boutique et la devise Dans Contact, Shipping et Policies, ajoute tes propres informations Dans Homepage, modifie les textes autour du portant Dans Checkout, active Cash on delivery, Bank transfer ou Pay at studio pickup, et modifie ses instructions Active Open checkout Clique sur Save settings

STILLFORM ne demande aucune donnée de carte : les acheteurs choisissent l'une de tes méthodes, et tu marques chaque commande comme payée quand l'argent arrive.

Passer une commande test

Ouvre ta boutique locale, mets une pièce dans le panier et passe commande Note la référence de la commande sur la page de confirmation Dans Studio, ouvre Orders et clique sur ta commande test Clique sur Cancel order — son stock est remis en vente

Créer ta Web App

Pas encore d'hébergement ? Prends un plan dans les Prérequis.

Hostinger Websites Create website Web App

Choisis ton propre domaine, ou un domaine temporaire pour commencer Choisis Import your Git repository Choisis Continue with GitHub et donne à Hostinger l'accès à ton dépôt STILLFORM Sélectionne le dépôt et la branche main

Configurer et déployer

Garde le preset de framework Vite détecté par Hostinger Choisis Node.js 22 Définis la commande de build sur npm run build — jamais build:demo Définis le répertoire de sortie sur dist et laisse le fichier d'entrée vide

Avant le premier build, ajoute ces trois variables d'environnement — les mêmes valeurs que dans ton .env.local, que Claude peut te montrer. Elles sont intégrées à la boutique : en changer une plus tard demande un nouveau déploiement.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Publishable key Supabase

VITE_TURNSTILE_SITE_KEY

Clé de site Turnstile

Les valeurs Supabase se trouvent dans Connect. La clé de site est sur ton widget Turnstile.

Ouvrir Connect

https://supabase.com/dashboard/project/_?showConnect=true

Valeurs publiques uniquement

N'ajoute jamais la clé secrète Turnstile, la Secret key Supabase ou la clé service_role à Hostinger. Tout ce qui commence par VITE_ est visible dans le navigateur.

Demande à Claude de lancer npm run preflight, la vérification de lancement de la boutique — ne déploie que si elle réussit Clique sur Deploy et attends la fin du build Ouvre ton adresse en ligne

Connecter ton domaine en ligne

Supabase Authentication URL Configuration

Définis la Site URL sur ton adresse en ligne, en commençant par https:// Ajoute la même adresse aux Redirect URLs Clique sur Save

Cloudflare Turnstile

Ouvre ton widget STILLFORM Ajoute ton domaine en ligne à ses hostnames et enregistre

Allow new users to sign up reste désactivé dans Supabase.

Tester ta boutique en ligne

Ouvre directement l'une de tes pages produit par son adresse, puis actualise-la Connecte-toi à /admin sur ton adresse en ligne Mets une pièce dans le panier et passe commande — la vérification Turnstile est invisible ou se limite à une case à cocher Retrouve ta commande de test dans Orders, puis annule-la

La gestion des liens directs par Hostinger n'a pas encore été confirmée pour cette boutique. Si une page produit affiche une erreur 404 quand tu l'ouvres ou l'actualises, demande à Claude de parcourir avec toi la section Hostinger de docs/DEPLOY.md.

Mettre à jour ta boutique plus tard

Produits, photos, stock, commandes et réglages : modifie-les dans Studio — c'est en ligne immédiatement

Changements de design ou de code : demande à Claude de les faire et de les pousser sur main — Hostinger reconstruit ta boutique à chaque push