Erstelle mit KI eine interaktive Sushi-Restaurant-Website

Claude Desktop

Nutze Claude Code in der Desktop-App, um deine Restaurant-Website einzurichten und anzupassen.

Claude Desktop herunterladen

https://claude.ai/download

GitHub-Konto

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

GitHub-Konto erstellen

https://github.com/signup

Node.js

Lade die LTS-Version herunter. Claude installiert und prüft damit deinen Shop.

Node.js herunterladen

https://nodejs.org/en/download

Supabase-Konto

Der Free-Tarif reicht. Hier liegen deine Speisekarte, Fotos, Öffnungszeiten, Bestellungen und deine Admin-Anmeldung.

Supabase-Konto erstellen

https://supabase.link/r4gdwhi

Hostinger-Hosting

Hosting brauchst du in Schritt 5, wenn dein Shop live geht.

Wähle einen Hostinger-Tarif

Nimm den Unlimited-Tarif oder einen Cloud-Tarif — KAITEN wird als Node.js Web App bereitgestellt, nicht als statische Website.

Deine eigene Kopie erstellen

KAITEN auf GitHub öffnen

https://github.com/salhiworks/kaiten-sushi-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

Ein Supabase-Projekt erstellen

Supabase-Dashboard öffnen

https://supabase.com/dashboard

Klicke auf New project — jede Region und der Free-Tarif passen 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. Du erstellst keine Tabellen und schreibst kein SQL: Claude richtet die Datenbank in Schritt 3 ein.

Zu Claude Desktop wechseln

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 KAITEN-Repository in einen neuen Unterordner herunter und prüft, ob Claude es aktualisieren kann.

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, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

Die Adresse deines Repositorys

https://github.com/your-name/my-sushi-restaurant

Deinen KAITEN-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

Claude bitten, deinen Shop zu verbinden

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

KAITEN mit Supabase verbinden

Claude wendet mit der Supabase CLI die drei Migrationen und die Start-Speisekarte des Starters an, prüft Sicherheit und Speicher und gibt dir dann die zwei öffentlichen Werte für Hostinger.

Connect this KAITEN restaurant to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md (step 2, "Make it a real store with Supabase") and docs/SUPABASE.md first, and follow docs/SUPABASE.md's Supabase CLI steps. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. Use only this project's own pinned Supabase CLI, through npx supabase after npm install — never a global supabase command — always on my hosted project. Never run supabase db reset, supabase migration repair or any command that deletes data, never use --include-seed, and never start a local database or Docker. Never ask me for a password, an access token or a Secret key, and never use --reveal. Do these yourself, and tell me what each one does before you run it: 1. Check that Node.js 22 or newer is installed (if it isn't, stop and tell me how to install it), then run npm install and check that npx supabase --version shows 2.122.0. If it doesn't, stop and tell me. 2. Check that I'm signed in to the Supabase CLI. If I'm not, stop and tell me to run npx supabase login in the Terminal myself, and continue when I say I'm signed in. 3. Link this folder with npx supabase link --project-ref {{PROJECT_REF}}, then show me the project's name and URL and ask me to confirm it's the right one. 4. Show me the project's migration history (npx supabase migration list --linked). If it has migrations that aren't in supabase/migrations, stop and explain what you see. If the history is empty but the table public.dishes already exists, the setup was already run by hand: stop and tell me, and push nothing, because these files must not run twice. 5. Show me what the push would apply (npx supabase db push --linked --dry-run). It must be exactly the three files in supabase/migrations, in order: kaiten_schema, kaiten_seed, kaiten_private_helpers. Then apply them with npx supabase db push --linked, so they are recorded in the project's migration history. They create the tables, the Row Level Security policies, the dish-images storage bucket and the starting menu. There is no separate seed step. 6. Verify the setup with npx supabase db query --linked: Row Level Security is on for all seven tables in public, the public dish-images bucket exists, and there are 5 plate tiers, 4 categories and 8 dishes. Fix nothing by hand: tell me what's wrong. 7. Show me my Project URL and Publishable key (sb_publishable_...) as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger, using npx supabase projects api-keys --project-ref {{PROJECT_REF}}. If no Publishable key is listed, tell me to copy it from Connect in the Supabase Dashboard. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/SUPABASE.md ("Your admin account"), through npx supabase db query --linked, and check that the row exists. Finally, tell me in plain words what passed and what is still left to do.

Deine Supabase Project ID

abcdefghijklmnopqrst

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

Bei der Supabase CLI anmelden

Wenn Claude dich darum bittet, führe das einmal selbst aus — dabei öffnet sich dein Browser:

Klicke in der Titelleiste deiner Sitzung auf Terminal Führe den Befehl unten aus Bestätige die Anmeldung im Browserfenster, das sich öffnet Sag Claude, dass du angemeldet bist

npx supabase login

Dein Admin-Konto erstellen

Supabase Authentication Users

Klicke auf Add user und dann auf Create new user Gib deine E-Mail und ein starkes Passwort ein Lass Auto Confirm User angehakt und erstelle den Benutzer Nenne Claude deine Admin-E-Mail — niemals dein Passwort

Supabase Authentication Sign In / Providers

Schalte Allow new users to sign up aus und speichere — der Shop hat keine Kundenkonten

Claude trägt deine E-Mail-Adresse in die Administratorenliste des Shops ein. In Schritt 5 meldest du dich in deinem Live-Shop unter /admin an.

Supabase CLI funktioniert nicht? Richte es von Hand ein

Öffne in deinem Supabase-Projekt den SQL Editor. Führe diese drei Dateien aus deinem KAITEN-Ordner aus, jede genau einmal und in dieser Reihenfolge. Öffne jede, kopiere alles, füge es in eine neue Abfrage ein und klicke auf Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Kopiere deine Project URL und deinen Publishable key aus Connect — du fügst sie in Schritt 5 bei Hostinger ein. Nachdem du oben deinen Admin-Nutzer erstellt hast, trage unten deine E-Mail-Adresse ein und führe das im SQL Editor aus:

Mich zum Administrator machen

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

Deine Admin-E-Mail

you@example.com

Beschreibe Claude dein Restaurant

Füll aus, was du weißt — lass den Rest leer, dann behält Claude die Version von KAITEN. Sende es anschließend in deiner KAITEN-Sitzung:

Mein Sushi-Restaurant anpassen

Ändert Name, Texte und Look, lässt das Förderband und die Bestellfunktion genau so, wie sie sind, und pusht die Änderungen in dein eigenes GitHub-Repository.

This folder is my own copy of the KAITEN sushi restaurant. Before you change anything, read README.md ("How it works"), AGENTS.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the website for my restaurant. Restaurant name: {{RESTAURANT_NAME}} Our concept and story: {{RESTAURANT_STORY}} Visual identity: {{VISUAL_STYLE}} Where each change belongs: - The brand mark and its default name: src/components/site/brand-mark.tsx - Homepage and about copy: src/components/home/ and src/app/(store)/about/page.tsx - Colours and fonts: src/app/globals.css and src/app/layout.tsx The restaurant name guests see in the header, footer and page titles, plus the address, phone, opening hours, dishes, photos and plate prices, come from the database. Don't hard-code them: I'll set them in the admin after launch. Tell me which name to enter there. Keep these exactly as they are: - The sushi conveyor belt in src/components/ui/sushi-conveyor-menu.tsx: dragging, flicking, lifting a plate, the plate stack and every animation, timing and hit area - The menu, the order and checkout, pickup ordering, the admin, the Supabase migrations, KAITEN_MODE and the other environment variables - The dependencies: don't add new ones First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server. Then summarize what you changed and wait. I may ask for more changes. Only when I say it's ready: make sure .env.local and any other secrets are not committed, commit everything with a clear message and push it to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

Name des Restaurants

Sushi Nami

Konzept oder Geschichte deines Restaurants

Ein familiengeführter Kaiten-Tresen in Lyon seit 2009, mit Fisch vom Frühmarkt und Reis, der jede Stunde frisch gekocht wird.

Visuelle Identität

Claude ändert Marke, Design und Code. Deine Gerichte, Fotos, Tellerpreise, Kategorien, Öffnungszeiten, Abholdetails und Bestellungen verwaltest du nach dem Start im Admin-Bereich, in Schritt 5. Prüfe Claudes Änderungen, bitte in derselben Sitzung um weitere und sag Claude, wenn alles bereit ist: Claude pusht einmal in dein GitHub-Repository, das Schritt 5 bereitstellt.

Deine Web App erstellen

Noch kein Hosting? Hol dir einen Tarif unter Voraussetzungen.

Hostinger Websites Create site Web App

Wenn Hostinger dir eine Domain-Auswahl anbietet, wähle deine eigene Domain — sonst startet deine App auf einer temporären Domain Wähle Import Git Repository Autorisiere GitHub und wähle deine eigene Kopie von KAITEN aus, mit den Änderungen, die Claude in Schritt 4 gepusht hat

Domain woanders registriert? Trage bei deinem Registrar die DNS-Einträge ein, die Hostinger anzeigt, und behalte deine bestehenden E-Mail-Einträge.

Konfigurieren und bereitstellen

Behalte die Next.js-Einstellungen, die Hostinger erkennt — Hostinger baut und startet den Shop selbst Wähle Node.js 22 oder neuer Achte darauf, dass der Build-Befehl npm run build und der Start-Befehl npm start ist — niemals npm run build:demo, das die gesperrte Demo baut

Öffne vor dem Deployment Environment variables, klicke auf Edit und füge diese drei hinzu. KAITEN_MODE schaltet echte Bestellungen und den Admin-Bereich ein — ohne diese Variable wird deine Website als Demo gebaut. Die zwei Supabase-Werte sind die, die Claude dir in Schritt 3 gezeigt hat. Sie werden fest in den Shop eingebaut, daher erfordert eine spätere Änderung ein Re-Deployment.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

Das Wort live, kleingeschrieben

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

Die Supabase-Werte findest du unter Connect.

Öffne Connect

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

Nur öffentliche Werte

Füge hier niemals den Secret key oder den service_role key von Supabase hinzu. Alles, was mit NEXT_PUBLIC_ beginnt, ist im Browser sichtbar.

Klicke auf Finish, dann auf Deploy, und warte, bis der Build fertig ist

Läuft deine App auf einer temporären Domain?

Um auf deine eigene Domain zu wechseln, öffne deine Web App in Hostinger und verbinde die Domain dort; füge bei deinem Registrar alle DNS-Einträge hinzu, die angezeigt werden. KAITEN speichert seine eigene Adresse nicht, daher musst du nichts ändern und kein Re-Deployment durchführen.

Dein Restaurant einrichten

Öffne /admin in deinem Live-Shop und melde dich mit deiner Admin-E-Mail an. Alles, was du im Admin-Bereich speicherst, landet direkt in deiner Datenbank — ganz ohne Codeänderungen.

Wähle unter Restaurant zuerst bei Hours are in deine Zeitzone, lege dann Restaurant name, Abholadresse, Telefonnummer und Öffnungszeiten fest und klicke auf Save restaurant details Lege unter Plates & prices den Preis jeder Tellerfarbe fest und klicke auf Save plate prices — jedes Gericht auf diesem Teller übernimmt ihn Klicke unter Menu bei einem Gericht auf Edit, ändere seine Details, nutze Replace photo für dein eigenes Foto und klicke auf Save changes. Neue Gerichte fügst du mit Add dish hinzu Schalte On menu für Gerichte aus, die du nicht anbietest, und In stock, wenn eines für den Tag ausverkauft ist Benenne unter Categories die Abschnitte deiner Speisekarte um, ordne sie neu oder füge welche hinzu

Ersetze die Startfotos vor der Eröffnung

Die acht Start-Fotos der Gerichte stammen aus der Demo der ursprünglichen Komponente, und ihre Rechte sind nicht geprüft. Verwende Fotos, die dir gehören oder für die du eine Lizenz hast.

Was deine Gerichtfotos brauchen

Quadratisch, mindestens 800 × 800 px

Von oben aufgenommen, der Teller füllt das Bild aus

Ein transparenter Hintergrund (PNG oder WebP), damit das Band rund um den Teller sichtbar ist

Bis zu 5 MB

Prüfen und launchen

Öffne deine Domain — das Schloss-Symbol erscheint, das Band dreht sich und die Kopfzeile zeigt deinen Öffnungsstatus Nimm ein paar Teller in deine Bestellung, klicke auf Review order und dann auf Checkout for pickup Gib einen Namen und eine Telefonnummer ein und klicke auf Place pickup order Öffne im Admin-Bereich Orders, suche die Bestellung und klicke auf Start preparing Klicke auf der Bestätigungsseite der Bestellung auf Refresh status: Dort steht jetzt Preparing

Der Shop nimmt Bestellungen nur während deiner Öffnungszeiten an und solange Taking orders oben auf jeder Admin-Seite eingeschaltet ist. Gäste zahlen bei der Abholung: Es gibt keine Online-Kartenzahlungen.

Änderst du später Gerichte, Fotos, Preise und Öffnungszeiten im Admin-Bereich, sind sie sofort live. Für Design- oder Codeänderungen bitte Claude darum und gib den Push frei: Hostinger baut deinen Shop bei jedem Push zu main neu.