Crea con l'IA un sito interattivo per un ristorante di sushi

Claude Desktop

Usa Claude Code nell'app desktop per configurare e personalizzare il sito del tuo ristorante.

Scarica Claude Desktop

https://claude.ai/download

Account GitHub

Gratis. Qui c'è la tua copia di KAITEN, e Hostinger la distribuisce da qui.

Crea un account GitHub

https://github.com/signup

Node.js

Scarica la versione LTS. Claude la usa per installare e controllare il tuo negozio.

Scarica Node.js

https://nodejs.org/en/download

Account Supabase

Il piano gratuito basta. Contiene il tuo menu, le foto, gli orari di apertura, gli ordini e l'accesso all'admin.

Crea un account Supabase

https://supabase.link/r4gdwhi

Hosting Hostinger

L'hosting ti serve al Passaggio 5, quando il negozio va online.

Scegli un piano Hostinger

Usa il piano Unlimited o un piano Cloud: KAITEN viene distribuito come Node.js Web App, non come sito statico.

Crea la tua copia

Apri KAITEN su GitHub

https://github.com/salhiworks/kaiten-sushi-store

Clicca su Use this template, poi su Create a new repository Dagli un nome e scegli Public o Private Clicca su Create repository e copia il suo indirizzo

Creare un progetto Supabase

Apri la dashboard di Supabase

https://supabase.com/dashboard

Clicca su New project: va bene qualsiasi regione e il piano Free Conserva la password del database in un posto sicuro: a Claude non serve mai Quando il progetto è pronto, copia il suo Project ID

Supabase Project Settings General

Il Project ID è l'unico dato del progetto che serve a Claude. Non crei nessuna tabella e non scrivi SQL: Claude configura il database nel Passo 3.

Portalo su Claude Desktop

Claude Desktop Code Local

Avvia una sessione Local in una cartella come Documenti, aggiungi qui sotto l'indirizzo del tuo repository e invia:

Clona la tua copia

Scarica il tuo repository KAITEN in una nuova sottocartella e verifica che Claude possa aggiornarlo.

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.

L'indirizzo del tuo repository

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

Apri la tua cartella KAITEN

Avvia una nuova sessione Local Apri la cartella che Claude ha appena creato, quella che contiene README.md Se Claude Desktop lo chiede, considera attendibile la cartella

Chiedi a Claude di collegare il tuo negozio

Nella tua sessione KAITEN, aggiungi qui sotto il tuo Project ID e invia:

Collega KAITEN a Supabase

Claude applica le tre migrazioni dello starter e il menu iniziale con la Supabase CLI, controlla sicurezza e storage, poi ti dà i due valori pubblici per 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.

Il tuo Project ID di Supabase

abcdefghijklmnopqrst

Claude chiede prima di ogni azione: clicca su Allow. Si ferma quando tocca a te.

Accedi alla Supabase CLI

Quando Claude te lo chiede, eseguilo tu una sola volta: apre il browser.

Clicca su Terminal nella barra del titolo della sessione Esegui il comando qui sotto Approva l'accesso nella finestra del browser che si apre Di' a Claude che hai effettuato l'accesso

npx supabase login

Crea il tuo account amministratore

Supabase Authentication Users

Clicca su Add user, poi su Create new user Inserisci la tua email e una password sicura Lascia selezionato Auto Confirm User e crea l'utente Comunica a Claude la tua email di amministratore, mai la password

Supabase Authentication Sign In / Providers

Disattiva Allow new users to sign up e salva: il negozio non ha account cliente

Claude aggiunge la tua email all'elenco degli amministratori del negozio. Accedi su /admin nel tuo negozio online al Passaggio 5.

La Supabase CLI non funziona? Configura a mano

Nel tuo progetto Supabase, apri SQL Editor. Esegui questi tre file della tua cartella KAITEN, una volta ciascuno e in quest'ordine. Per ognuno, aprilo, copia tutto, incollalo in una nuova query e clicca su Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Copia la tua Project URL e la Publishable key da Connect: le aggiungi a Hostinger al Passaggio 5. Dopo aver creato qui sopra il tuo utente admin, aggiungi qui sotto la tua email ed eseguila nello SQL Editor:

Rendimi amministratore

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

La tua email di amministratore

you@example.com

Descrivi il tuo ristorante a Claude

Compila quello che sai: lascia vuoto il resto e Claude mantiene la versione di KAITEN. Poi invialo nella tua sessione KAITEN:

Personalizza il mio ristorante di sushi

Cambia il nome, i testi e lo stile, mantiene il nastro trasportatore e gli ordini esattamente come sono e invia le modifiche al tuo repository GitHub.

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.

Nome del ristorante

Sushi Nami

Il concept o la storia del tuo ristorante

Un bancone kaiten a conduzione familiare a Lione dal 2009, con pesce del mercato del mattino e riso cotto ogni ora.

Identità visiva

Claude cambia il brand, il design e il codice. I tuoi piatti, le foto, i prezzi dei piattini, le categorie, gli orari di apertura, i dati per il ritiro e gli ordini si gestiscono nell'admin dopo il lancio, nel Passo 5. Controlla le modifiche di Claude, chiedine altre nella stessa sessione e di' a Claude quando è pronto: fa un solo push sul tuo repository GitHub, che il Passo 5 distribuisce.

Crea la tua Web App

Non hai ancora un hosting? Scegli un piano nei Requisiti.

Hostinger Websites Create site Web App

Se Hostinger ti offre la scelta del dominio, scegli il tuo dominio, altrimenti la tua app parte su un dominio temporaneo Seleziona Import Git Repository Autorizza GitHub e seleziona la tua copia di KAITEN, con le modifiche che Claude ha inviato nel Passo 4

Dominio registrato altrove? Aggiungi presso il tuo registrar i record DNS che mostra Hostinger e mantieni i record email esistenti.

Configura ed esegui il deploy

Mantieni le impostazioni Next.js rilevate da Hostinger: compila e avvia il negozio da solo Scegli Node.js 22 o successivo Assicurati che il comando di build sia npm run build e quello di avvio npm start: mai npm run build:demo, che genera la demo bloccata

Prima del deploy, apri Environment variables, clicca su Edit e aggiungi queste tre. KAITEN_MODE attiva gli ordini reali e l'admin: senza, il tuo sito viene generato come la demo. I due valori di Supabase sono quelli che Claude ti ha mostrato nel Passo 3. Sono integrati nello store, quindi cambiarne uno in seguito richiede un nuovo deploy.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

La parola live, in minuscolo

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key di Supabase

I valori Supabase si trovano in Connect.

Apri Connect

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

Solo valori pubblici

Non aggiungere mai qui la Secret key o la service_role key di Supabase. Tutto ciò che inizia con NEXT_PUBLIC_ è visibile nel browser.

Clicca su Finish, poi su Deploy, e attendi la fine della build

Sei su un dominio temporaneo?

Per passare al tuo dominio, apri la tua Web App in Hostinger e collega lì il dominio, aggiungendo presso il tuo registrar i record DNS mostrati. KAITEN non memorizza il proprio indirizzo, quindi non c'è nulla da cambiare e non serve un nuovo deploy.

Configura il tuo ristorante

Apri /admin sul tuo store online e accedi con la tua email di admin. Tutto ciò che salvi nell'admin va direttamente nel tuo database, senza modifiche al codice.

In Restaurant, scegli prima il tuo fuso orario in Hours are in, poi imposta il Restaurant name, l'indirizzo di ritiro, il telefono e gli orari di apertura, e clicca su Save restaurant details In Plates & prices, imposta il prezzo di ogni colore di piattino e clicca su Save plate prices: tutti i piatti di quel piattino si adeguano In Menu, clicca su Edit su un piatto, modificane i dati, usa Replace photo per la tua foto e clicca su Save changes. Usa Add dish per aggiungerne di nuovi Disattiva On menu per i piatti che non servi, e In stock quando uno finisce per la giornata In Categories, rinomina, riordina o aggiungi le sezioni del tuo menu

Sostituisci le foto iniziali prima di aprire

Le otto foto iniziali dei piatti provengono dalla demo del componente originale e i loro diritti non sono verificati. Usa foto tue o con licenza.

Cosa serve per le foto dei tuoi piatti

Quadrate, almeno 800 × 800 px

Scattate dall'alto, con il piattino che riempie l'inquadratura

Sfondo trasparente (PNG o WebP), così il nastro si vede intorno al piattino

Fino a 5 MB

Verifica e lancia

Apri il tuo dominio: compare il lucchetto, il nastro gira e l'intestazione mostra se sei aperto Metti qualche piattino nel tuo ordine, clicca su Review order, poi su Checkout for pickup Inserisci un nome e un numero di telefono e clicca su Place pickup order Nell'admin, apri Orders, trova l'ordine e clicca su Start preparing Nella pagina di conferma dell'ordine, clicca su Refresh status: ora mostra Preparing

Lo store accetta ordini solo durante i tuoi orari di apertura e finché Taking orders è attivo, in cima a ogni pagina dell'admin. I clienti pagano al ritiro: non ci sono pagamenti con carta online.

In seguito, cambia piatti, foto, prezzi e orari nell'admin: sono online subito. Per modifiche al design o al codice, chiedi a Claude e approva il push: Hostinger ricompila il tuo store a ogni push su main.