Erstelle einen Luxus-Modeshop mit KI und Admin-Dashboard

Claude Desktop

Nutze Claude Code in der Desktop-App, um deinen Shop einzurichten und anzupassen.

Claude Desktop herunterladen

https://claude.ai/download

GitHub-Konto

Kostenlos. Hier liegt deine eigene Kopie von STILLFORM, und Hostinger stellt sie von hier aus bereit.

GitHub-Konto erstellen

https://github.com/signup

Node.js

Lade die aktuelle LTS-Version herunter. Damit läuft der Shop auf deinem Computer.

Node.js herunterladen

https://nodejs.org/en/download

Supabase-Konto

Der Free-Tarif reicht. Hier liegen deine Produkte, Fotos, Bestellungen und deine Inhaber-Anmeldung.

Supabase-Konto erstellen

https://supabase.link/r4gdwhi

Cloudflare-Konto

Kostenlos. Die Turnstile-Prüfung hält Bots von deinem Checkout fern.

Cloudflare-Konto erstellen

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

Hostinger-Hosting

STILLFORM ist kostenlos; dein Live-Shop läuft hier.

Wähle einen Hostinger-Tarif

Nimm den Unlimited-Tarif oder einen Cloud-Tarif — STILLFORM wird als Node.js Web App bereitgestellt.

Deine eigene Kopie erstellen

Probiere den fertigen Shop zuerst in der Live-Demo aus: Fahre über die Kleiderstange, zieh sie und öffne ein Teil. Checkout und Studio sind dort ausgeschaltet.

STILLFORM auf GitHub öffnen

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

Klicke auf Use this template und dann auf Create a new repository Gib ihm einen Namen und wähle Public oder Private Klicke auf Create repository und kopiere seine Adresse

Auf deinen Computer holen

Claude Desktop Code Local

Starte eine Local-Sitzung in einem Ordner wie Dokumente, trage unten die Adresse deines Repositorys ein und sende:

Deine Kopie klonen

Lädt dein eigenes STILLFORM-Repository in einen neuen Unterordner herunter.

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.

Die Adresse deines neuen Repositorys

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

Deinen STILLFORM-Ordner öffnen

Starte eine neue Local-Sitzung Öffne den Ordner, den Claude gerade erstellt hat — den, in dem README.md liegt Wenn Claude Desktop fragt, vertraue dem Ordner

Den Shop lokal starten

Sende in deiner STILLFORM-Sitzung:

STILLFORM vorbereiten und starten

Installiert das Projekt und startet den Shop auf deinem Computer im Demo-Modus.

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.

Öffne die Adresse, die Claude dir gibt, meist http://localhost:5173. Ohne Supabase läuft der Shop im Demo-Modus mit seiner eingebauten Kollektion: Kleiderstange, Produktseiten und Warenkorb funktionieren, der Checkout bleibt bis Schritt 3 aus.

Ein Supabase-Projekt erstellen

Supabase-Dashboard öffnen

https://supabase.com/dashboard

Klicke auf New project — jede Region und der Free-Tarif passen Lass die Data API eingeschaltet Bewahre das Datenbankpasswort sicher auf — Claude braucht es nie Kopiere die Project ID, sobald das Projekt bereit ist

Supabase Project Settings General

Die Project ID ist die einzige Projektangabe, die Claude braucht. Project URL und Publishable key liest Claude selbst über die Supabase CLI aus.

Bei der Supabase CLI anmelden

Dabei öffnet sich dein Browser, deshalb machst du das einmal selbst:

Klicke oben in deiner STILLFORM-Sitzung auf die Schaltfläche Terminal Führe den Befehl unten aus Bestätige die Anmeldung im Browserfenster, das sich öffnet

npx supabase login

Ein Turnstile-Widget erstellen

Cloudflare-Dashboard öffnen

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Benenne das Widget nach deinem Shop Füge unter den Hostnamen localhost hinzu Füge auch die Domain deines Shops hinzu, wenn du sie schon kennst — sonst fügst du sie in Schritt 5 hinzu Wähle den Modus Managed und erstelle das Widget Lass die Seite offen: Schritt 3 braucht seinen Site Key und Secret Key

Claude bitten, deinen Shop zu verbinden

Trage in deiner STILLFORM-Sitzung unten deine Project ID ein und sende:

STILLFORM mit Supabase verbinden

Claude verknüpft dein Projekt, richtet die Datenbank und die Starter-Kollektion ein und stellt die Checkout-Funktion bereit.

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.

Deine Supabase Project ID

abcdefghijklmnopqrst

Claude fragt vor jedem Befehl — klicke auf Allow. Wenn du dran bist, hält Claude an.

Deine Secrets im Terminal eingeben

Wenn Claude dich auffordert, führe die Einrichtung des Shops selbst im Terminal aus. Sie überspringt alles, was Claude schon erledigt hat, und fragt dich nur nach dem, was privat ist:

npm run setup

Wähle beim Checkout-Schutz 1 und füge dann deinen Turnstile Site Key und Secret Key ein Wenn es anbietet, die Funktion place-order neu zu deployen, tippe n — Claude hat sie schon deployt Gib für dein Inhaberkonto deine E-Mail und ein Passwort mit mindestens 12 Zeichen ein Wenn du gefragt wirst, schalte in deinem Supabase Dashboard Allow new users to sign up aus und drücke dann Enter — das Setup prüft, dass es aus ist Sag Claude, dass es erledigt ist

Supabase Authentication Sign In / Providers

Halte diese privat

Gib deinen Turnstile Secret Key und dein Passwort nur in die verdeckten Eingaben des Terminals ein. Füge sie niemals in den Chat ein.

Einrichtung prüfen und anmelden

Claude führt die Prüfungen des Shops aus und startet ihn neu. Wenn alles bestanden ist:

Lade deinen lokalen Shop neu — er lädt seine Kollektion jetzt aus deiner Datenbank Öffne /admin und melde dich mit deiner Inhaber-E-Mail und deinem Passwort an

Du bist in Studio, dem Dashboard deines Shops. Nur Konten auf der Administratorliste des Shops können es öffnen, und niemand kann sich registrieren.

Ein Produkt hinzufügen

Alles, was du in Studio speicherst, landet direkt in deiner Datenbank — ganz ohne Codeänderungen.

Studio Products Add a product

Fülle Name, Category und One-line summary aus Füge unter Photos ein Frontfoto hinzu Lege unter Price, sizes and stock den Price fest und wähle die Sizes Benenne die erste Farbe, wähle ihr Farbfeld und gib ihren Bestand für jede Größe ein Klicke für jede weitere Farbvariante auf Add a colour Klicke auf Publish

Optional: Sobald deine eigenen Teile drin sind, archiviere oder lösche die acht Demo-Produkte unter Products.

Das Foto an die Kleiderstange anpassen

Wenn du ein Frontfoto hinzufügst, öffnet sich der Stangen-Editor. Ein freigestelltes PNG mit dem Bügelhaken oben sieht am besten aus; ein Foto vor einer schlichten, hellen Wand geht auch.

Schalte Remove the plain background ein, wenn das Foto nicht freigestellt ist Passe Size und Position an oder zieh das Foto in der Vorschau Beschreibe das Foto für Screenreader Klicke auf Use this photo

Prüfe Preview on the rail: Fahre darüber, um das Teil zu drehen, und klicke darauf, um die Nahansicht zu öffnen. Mit Rück- und Seitenfotos dreht es sich ganz.

Die Kleiderstange anordnen

Studio Rail

Wähle unter Add a piece dein neues Produkt und seine Farbe Zieh die Teile in die gewünschte Reihenfolge oder nutze die Pfeile Entferne jedes Teil, das du nicht auf der Startseite haben willst Klicke auf Save rail

Sechs bis zehn Teile passen gut auf einen Desktop-Bildschirm. Auf Smartphones wird die Stange zu einem wischbaren Karussell.

Kollektionen und das Lookbook gestalten

Studio Collections

Wähle unter Homepage selection die Teile, die die Startseite anführen, und klicke auf Save Klicke auf New collection oder bearbeite eine bestehende und füge ihre Teile hinzu

Studio Lookbook

Bearbeite den Titel und die Einleitung Lade für jede Doppelseite eigene Fotos und Bildunterschriften hoch Blende Doppelseiten aus oder ordne sie neu und klicke dann auf Save lookbook

Einstellungen aktualisieren und Checkout öffnen

Studio Settings

Lege unter Store den Namen und die Währung deines Shops fest Trage unter Contact, Shipping und Policies deine eigenen Angaben ein Ändere unter Homepage die Texte rund um die Kleiderstange Schalte unter Checkout Cash on delivery, Bank transfer oder Pay at studio pickup ein und bearbeite die Anleitung dazu Schalte Open checkout ein Klicke auf Save settings

STILLFORM nimmt keine Kartendaten an: Kunden wählen eine deiner Zahlungsarten, und du markierst jede Bestellung als bezahlt, sobald das Geld da ist.

Eine Testbestellung aufgeben

Öffne deinen lokalen Shop, leg ein Teil in den Warenkorb und geh zur Kasse Notiere dir die Bestellnummer auf der Bestätigungsseite Öffne in Studio Orders und klicke auf deine Testbestellung Klicke auf Cancel order — der Bestand ist wieder verfügbar

Deine Web App erstellen

Noch kein Hosting? Hol dir einen Tarif unter Voraussetzungen.

Hostinger Websites Create website Web App

Wähle deine eigene Domain oder zum Start eine temporäre Domain Wähle Import your Git repository Fahre mit Continue with GitHub fort und gib Hostinger Zugriff auf dein STILLFORM-Repository Wähle das Repository und den Branch main

Konfigurieren und bereitstellen

Behalte das Framework-Preset Vite bei, das Hostinger erkennt Wähle Node.js 22 Setze den Build-Befehl auf npm run build — niemals build:demo Setze das Ausgabeverzeichnis auf dist und lass die Einstiegsdatei leer

Füge vor dem ersten Build diese drei Umgebungsvariablen hinzu — dieselben Werte wie in deiner .env.local, die Claude dir zeigen kann. Sie werden in den Shop eingebaut, deshalb braucht eine spätere Änderung ein neues Deployment.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Supabase Publishable key

VITE_TURNSTILE_SITE_KEY

Turnstile Site Key

Die Supabase-Werte findest du unter Connect. Der Site Key steht bei deinem Turnstile-Widget.

Öffne Connect

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

Nur öffentliche Werte

Füge niemals den Turnstile Secret Key, den Supabase Secret key oder den service_role-Key in Hostinger ein. Alles, was mit VITE_ beginnt, ist im Browser sichtbar.

Lass Claude npm run preflight ausführen, den Launch-Check des Shops — deploye erst, wenn er besteht Klicke auf Deploy und warte, bis der Build fertig ist Öffne deine Live-Adresse

Deine Live-Domain verbinden

Supabase Authentication URL Configuration

Setze die Site URL auf deine Live-Adresse, beginnend mit https:// Füge dieselbe Adresse zu den Redirect URLs hinzu Klicke auf Save

Cloudflare Turnstile

Öffne dein STILLFORM-Widget Füge deine Live-Domain zu seinen Hostnamen hinzu und speichere

Allow new users to sign up bleibt in Supabase ausgeschaltet.

Deinen Live-Shop testen

Öffne eine deiner Produktseiten direkt über ihre Adresse und lade sie dann neu Melde dich unter /admin auf deiner Live-Adresse an Leg ein Teil in den Warenkorb und schließ den Checkout ab — die Turnstile-Prüfung ist unsichtbar oder ein einzelnes Kästchen Such deine Testbestellung unter Orders und storniere sie

Wie Hostinger direkte Links für diesen Shop behandelt, ist noch nicht bestätigt. Wenn eine Produktseite beim Öffnen oder Neuladen einen 404 zeigt, geh mit Claude den Hostinger-Abschnitt in docs/DEPLOY.md durch.

Deinen Shop später aktualisieren

Produkte, Fotos, Bestand, Bestellungen und Einstellungen: Ändere sie in Studio — sie sind sofort live

Design- oder Codeänderungen: Lass Claude sie umsetzen und zu main pushen — Hostinger baut deinen Shop bei jedem Push neu