Crea con IA una web interactiva para un restaurante de sushi

Claude Desktop

Usa Claude Code en la app de escritorio para configurar y personalizar la web de tu restaurante.

Descarga Claude Desktop

https://claude.ai/download

Cuenta de GitHub

Gratis. Aquí vive tu propia copia de KAITEN, y Hostinger la despliega desde aquí.

Crear cuenta de GitHub

https://github.com/signup

Node.js

Descarga la versión LTS. Claude la usa para instalar y comprobar tu tienda.

Descargar Node.js

https://nodejs.org/en/download

Cuenta de Supabase

El plan gratuito es suficiente. Guarda tu carta, tus fotos, el horario, los pedidos y el inicio de sesión del admin.

Crear cuenta de Supabase

https://supabase.link/r4gdwhi

Hosting de Hostinger

Necesitas hosting en el Paso 5, cuando tu tienda sale en vivo.

Elige un plan de Hostinger

Usa el plan Unlimited o un plan Cloud: KAITEN se despliega como una Node.js Web App, no como un sitio web estático.

Crea tu propia copia

Abrir KAITEN en GitHub

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

Haz clic en Use this template y luego en Create a new repository Ponle nombre y elige Public o Private Haz clic en Create repository y copia su dirección

Crear un proyecto en Supabase

Abrir el panel de Supabase

https://supabase.com/dashboard

Haz clic en New project: cualquier región y el plan Free sirven Guarda la contraseña de la base de datos en un lugar seguro: Claude nunca la necesita Cuando el proyecto esté listo, copia su Project ID

Supabase Project Settings General

El Project ID es el único dato del proyecto que Claude necesita. No creas ninguna tabla ni escribes SQL: Claude configura la base de datos en el Paso 3.

Llévalo a Claude Desktop

Claude Desktop Code Local

Inicia una sesión Local en una carpeta como Documentos, añade abajo la dirección de tu repositorio y envía:

Clona tu copia

Descarga tu propio repositorio de KAITEN en una subcarpeta nueva y comprueba que Claude puede actualizarlo.

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.

La dirección de tu repositorio

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

Abre tu carpeta de KAITEN

Inicia una nueva sesión Local Abre la carpeta que Claude acaba de crear: la que contiene README.md Si Claude Desktop lo pide, confía en la carpeta

Pide a Claude que conecte tu tienda

En tu sesión de KAITEN, añade abajo tu Project ID y envía:

Conecta KAITEN a Supabase

Claude aplica las tres migraciones del starter y la carta inicial con la Supabase CLI, revisa la seguridad y el almacenamiento, y luego te da los dos valores públicos para 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.

Tu Project ID de Supabase

abcdefghijklmnopqrst

Claude pregunta antes de cada acción: haz clic en Allow. Se detiene cuando te toca a ti.

Inicia sesión en la Supabase CLI

Cuando Claude te lo pida, ejecuta esto tú mismo una vez: abre tu navegador.

Haz clic en Terminal en la barra de título de tu sesión Ejecuta el comando de abajo Aprueba el inicio de sesión en la ventana del navegador que se abre Dile a Claude que ya iniciaste sesión

npx supabase login

Crea tu cuenta de administrador

Supabase Authentication Users

Haz clic en Add user y luego en Create new user Introduce tu email y una contraseña segura Deja marcada la opción Auto Confirm User y crea el usuario Dile a Claude tu email de administrador, nunca tu contraseña

Supabase Authentication Sign In / Providers

Desactiva Allow new users to sign up y guarda: la tienda no tiene cuentas de clientes

Claude añade tu email a la lista de administradores de la tienda. Inicias sesión en /admin en tu tienda en vivo en el Paso 5.

¿La Supabase CLI no funciona? Configúralo a mano

En tu proyecto de Supabase, abre SQL Editor. Ejecuta estos tres archivos de tu carpeta de KAITEN, una vez cada uno y en este orden. Para cada uno, ábrelo, cópialo entero, pégalo en una consulta nueva y haz clic en Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Copia tu Project URL y tu Publishable key desde Connect: las añadirás a Hostinger en el Paso 5. Después de crear arriba tu usuario administrador, añade abajo tu email y ejecuta esto en el SQL Editor:

Hazme administrador

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

Tu email de administrador

you@example.com

Describe tu restaurante a Claude

Rellena lo que sepas; deja el resto en blanco y Claude mantiene la versión de KAITEN. Después envíalo en tu sesión de KAITEN:

Personaliza mi restaurante de sushi

Cambia el nombre, los textos y el aspecto, mantiene la cinta transportadora y los pedidos exactamente como están, y sube los cambios a tu propio repositorio de 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.

Nombre del restaurante

Sushi Nami

El concepto o la historia de tu restaurante

Una barra de kaiten familiar en Lyon desde 2009, con pescado del mercado de la mañana y arroz cocido cada hora.

Identidad visual

Claude cambia la marca, el diseño y el código. Tus platos, fotos, precios de los platos, categorías, horario, datos de recogida y pedidos se gestionan en el admin después del lanzamiento, en el Paso 5. Revisa los cambios de Claude, pide más en la misma sesión y avisa a Claude cuando esté listo: hace un único push a tu repositorio de GitHub, que el Paso 5 despliega.

Crea tu Web App

¿Aún no tienes hosting? Consigue un plan en Requisitos.

Hostinger Websites Create site Web App

Si Hostinger te ofrece elegir dominio, elige tu propio dominio; si no, tu app empieza en un dominio temporal Selecciona Import Git Repository Autoriza GitHub y selecciona tu propia copia de KAITEN, con los cambios que Claude subió en el Paso 4

¿Tu dominio está registrado en otro sitio? Añade en tu registrador los registros DNS que muestra Hostinger y conserva tus registros de email existentes.

Configura y despliega

Mantén la configuración de Next.js que detecta Hostinger: compila e inicia la tienda por sí mismo Elige Node.js 22 o posterior Asegúrate de que el comando de build sea npm run build y el de inicio npm start; nunca npm run build:demo, que genera la demo bloqueada

Antes de desplegar, abre Environment variables, haz clic en Edit y añade estas tres. KAITEN_MODE activa los pedidos reales y el admin; sin ella, tu sitio se genera como la demo. Los dos valores de Supabase son los que Claude te mostró en el Paso 3. Se integran en la tienda, así que cambiar uno más adelante requiere volver a desplegar.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

La palabra live, en minúsculas

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key de Supabase

Los valores de Supabase están en Connect.

Abrir Connect

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

Solo valores públicos

Nunca añadas aquí la Secret key ni la service_role key de Supabase. Todo lo que empieza por NEXT_PUBLIC_ es visible en el navegador.

Haz clic en Finish, luego en Deploy, y espera a que termine el build

¿Funcionas con un dominio temporal?

Para usar tu propio dominio, abre tu Web App en Hostinger y conecta allí el dominio, añadiendo en tu registrador los registros DNS que te muestre. KAITEN no guarda su propia dirección, así que no hay nada que cambiar ni hace falta volver a desplegar.

Configura tu restaurante

Abre /admin en tu tienda en vivo e inicia sesión con tu email de admin. Todo lo que guardas en el admin va directamente a tu base de datos, sin cambios de código.

En Restaurant, elige primero tu zona horaria en Hours are in, luego define tu Restaurant name, la dirección de recogida, el teléfono y el horario, y haz clic en Save restaurant details En Plates & prices, fija el precio de cada color de plato y haz clic en Save plate prices: todos los platos de ese color lo siguen En Menu, haz clic en Edit en un plato, cambia sus datos, usa Replace photo para poner tu propia foto y haz clic en Save changes. Usa Add dish para añadir platos nuevos Desactiva On menu en los platos que no sirves, e In stock cuando uno se agote por hoy En Categories, cambia el nombre, reordena o añade las secciones de tu carta

Sustituye las fotos iniciales antes de abrir

Las ocho fotos iniciales de los platos vienen de la demo del componente original y sus derechos no están verificados. Usa fotos tuyas o con licencia.

Qué necesitan las fotos de tus platos

Cuadradas, de al menos 800 × 800 px

Tomadas desde arriba, con el plato llenando el encuadre

Fondo transparente (PNG o WebP), para que la cinta se vea alrededor del plato

Hasta 5 MB

Verifica y lanza

Abre tu dominio: aparece el candado, la cinta gira y la cabecera muestra si estás abierto Pasa unos cuantos platos a tu pedido, haz clic en Review order y luego en Checkout for pickup Introduce un nombre y un número de teléfono y haz clic en Place pickup order En el admin, abre Orders, busca el pedido y haz clic en Start preparing En la página de confirmación del pedido, haz clic en Refresh status: ahora muestra Preparing

La tienda solo acepta pedidos durante tu horario de apertura y mientras Taking orders esté activado, arriba en cada página del admin. Los clientes pagan al recoger: no hay pagos con tarjeta en línea.

Más adelante, cambia platos, fotos, precios y horario en el admin: se aplican al instante. Para cambios de diseño o de código, pídeselo a Claude y aprueba el push: Hostinger vuelve a generar tu tienda con cada push a main.