Crie com IA um site interativo para um restaurante de sushi

Claude Desktop

Use o Claude Code no app para desktop para configurar e personalizar o site do seu restaurante.

Baixar o Claude Desktop

https://claude.ai/download

Conta no GitHub

Grátis. Sua própria cópia do KAITEN fica aqui, e a Hostinger faz o deploy a partir dela.

Criar conta no GitHub

https://github.com/signup

Node.js

Baixe a versão LTS. O Claude a usa para instalar e verificar a sua loja.

Baixar Node.js

https://nodejs.org/en/download

Conta no Supabase

O plano gratuito é suficiente. Ele guarda seu cardápio, fotos, horário de funcionamento, pedidos e o login do admin.

Criar conta no Supabase

https://supabase.link/r4gdwhi

Hospedagem Hostinger

Você precisa de hospedagem no Passo 5, quando sua loja for ao ar.

Escolha um plano da Hostinger

Use o plano Unlimited ou um plano Cloud — o KAITEN é implantado como uma Node.js Web App, não como um site estático.

Crie sua própria cópia

Abrir o KAITEN no GitHub

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

Clique em Use this template e depois em Create a new repository Dê um nome e escolha Public ou Private Clique em Create repository e copie o endereço dele

Criar um projeto no Supabase

Abrir o painel do Supabase

https://supabase.com/dashboard

Clique em New project — qualquer região e o plano Free servem Guarde a senha do banco de dados em um lugar seguro — o Claude nunca precisa dela Quando o projeto estiver pronto, copie o Project ID dele

Supabase Project Settings General

O Project ID é o único dado do projeto de que o Claude precisa. Você não cria nenhuma tabela nem escreve SQL: o Claude configura o banco de dados no Passo 3.

Leve-o para o Claude Desktop

Claude Desktop Code Local

Inicie uma sessão Local em uma pasta como Documentos, adicione o endereço do seu repositório abaixo e envie:

Clone sua cópia

Baixa seu próprio repositório do KAITEN em uma nova subpasta e confere se o Claude consegue atualizá-lo.

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.

O endereço do seu repositório

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

Abra sua pasta do KAITEN

Inicie uma nova sessão Local Abra a pasta que o Claude acabou de criar — a que tem o README.md dentro Se o Claude Desktop pedir, confie na pasta

Peça ao Claude para conectar sua loja

Na sua sessão do KAITEN, adicione seu Project ID abaixo e envie:

Conecte o KAITEN ao Supabase

O Claude aplica as três migrações do starter e o cardápio inicial com a Supabase CLI, verifica a segurança e o armazenamento e depois te passa os dois valores públicos para a 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.

Seu Project ID do Supabase

abcdefghijklmnopqrst

O Claude pergunta antes de cada ação — clique em Allow. Ele para quando for a sua vez.

Faça login na Supabase CLI

Quando o Claude pedir, execute isto você mesmo, uma única vez — abre o seu navegador:

Clique em Terminal na barra de título da sua sessão Execute o comando abaixo Aprove o login na janela do navegador que abrir Avise o Claude que você entrou

npx supabase login

Crie sua conta de administrador

Supabase Authentication Users

Clique em Add user e depois em Create new user Digite seu e-mail e uma senha forte Deixe Auto Confirm User marcado e crie o usuário Informe ao Claude seu e-mail de administrador — nunca sua senha

Supabase Authentication Sign In / Providers

Desative Allow new users to sign up e salve — a loja não tem contas de clientes

O Claude adiciona o seu e-mail à lista de administradores da loja. Você faz login em /admin na sua loja no ar no Passo 5.

A Supabase CLI não funciona? Configure manualmente

No seu projeto do Supabase, abra o SQL Editor. Execute estes três arquivos da sua pasta do KAITEN, uma vez cada e nesta ordem. Para cada um, abra-o, copie tudo, cole em uma nova consulta e clique em Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Copie o seu Project URL e a Publishable key de Connect — você vai adicioná-los à Hostinger no Passo 5. Depois de criar acima o seu usuário administrador, adicione abaixo o seu e-mail e execute isto no SQL Editor:

Torne-me administrador

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

Seu e-mail de administrador

you@example.com

Descreva seu restaurante para o Claude

Preencha o que você sabe — deixe o resto em branco e o Claude mantém a versão do KAITEN. Depois envie na sua sessão do KAITEN:

Personalizar meu restaurante de sushi

Muda o nome, os textos e o visual, mantém a esteira e os pedidos exatamente como estão e envia as mudanças para o seu próprio repositório no 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 do restaurante

Sushi Nami

O conceito ou a história do seu restaurante

Um balcão de kaiten familiar em Lyon desde 2009, com peixe do mercado da manhã e arroz feito a cada hora.

Identidade visual

O Claude muda a marca, o design e o código. Seus pratos, fotos, preços dos pratinhos, categorias, horário de funcionamento, dados de retirada e pedidos são gerenciados no admin depois do lançamento, no Passo 5. Revise as mudanças do Claude, peça mais na mesma sessão e avise o Claude quando estiver pronto: ele faz um único push para o seu repositório no GitHub, que o Passo 5 implanta.

Crie sua Web App

Ainda não tem hospedagem? Escolha um plano nos Pré-requisitos.

Hostinger Websites Create site Web App

Se a Hostinger oferecer a escolha de domínio, escolha seu próprio domínio — caso contrário, seu app começa em um domínio temporário Selecione Import Git Repository Autorize o GitHub e selecione sua própria cópia do KAITEN, com as mudanças que o Claude enviou no Passo 4

Domínio registrado em outro lugar? Adicione no seu registrador os registros DNS que a Hostinger mostra e mantenha seus registros de e-mail existentes.

Configure e implante

Mantenha as configurações de Next.js que a Hostinger detecta — ela mesma faz o build e inicia a loja Escolha Node.js 22 ou mais recente Confira se o comando de build é npm run build e o de inicialização npm start — nunca npm run build:demo, que gera a demo bloqueada

Antes de fazer o deploy, abra Environment variables, clique em Edit e adicione estas três. KAITEN_MODE ativa os pedidos reais e o admin — sem ela, seu site é gerado como a demo. Os dois valores do Supabase são os que o Claude te mostrou no Passo 3. Eles ficam embutidos na loja, então mudar um deles depois exige um novo deploy.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

A palavra live, em letras minúsculas

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key do Supabase

Os valores do Supabase estão em Connect.

Abrir o Connect

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

Somente valores públicos

Nunca adicione aqui a Secret key nem a chave service_role do Supabase. Tudo que começa com NEXT_PUBLIC_ fica visível no navegador.

Clique em Finish, depois em Deploy, e espere o build terminar

Rodando em um domínio temporário?

Para usar seu próprio domínio, abra sua Web App na Hostinger e conecte o domínio por lá, adicionando no seu registrador os registros DNS exibidos. O KAITEN não guarda o próprio endereço, então não há nada para mudar nem é preciso fazer um novo deploy.

Configure seu restaurante

Abra /admin na sua loja no ar e entre com seu e-mail de admin. Tudo o que você salva no admin vai direto para o seu banco de dados — sem mudar código.

Em Restaurant, escolha primeiro seu fuso horário em Hours are in, depois defina seu Restaurant name, o endereço de retirada, o telefone e o horário de funcionamento, e clique em Save restaurant details Em Plates & prices, defina o preço de cada cor de pratinho e clique em Save plate prices — todos os pratos daquele pratinho acompanham Em Menu, clique em Edit em um prato, altere os dados, use Replace photo para colocar sua própria foto e clique em Save changes. Use Add dish para pratos novos Desative On menu nos pratos que você não serve, e In stock quando um acabar no dia Em Categories, renomeie, reordene ou adicione as seções do seu cardápio

Substitua as fotos iniciais antes de abrir

As oito fotos iniciais dos pratos vêm da demo do componente original, e os direitos delas não foram verificados. Use fotos suas ou licenciadas.

Do que as fotos dos seus pratos precisam

Quadradas, com pelo menos 800 × 800 px

Tiradas de cima, com o pratinho preenchendo o quadro

Fundo transparente (PNG ou WebP), para a esteira aparecer em volta do pratinho

Até 5 MB

Verifique e lance

Abra seu domínio — o cadeado aparece, a esteira gira e o cabeçalho mostra se você está aberto Coloque alguns pratinhos no seu pedido, clique em Review order e depois em Checkout for pickup Informe um nome e um número de telefone e clique em Place pickup order No admin, abra Orders, encontre o pedido e clique em Start preparing Na página de confirmação do pedido, clique em Refresh status: agora aparece Preparing

A loja só aceita pedidos durante o seu horário de funcionamento e enquanto Taking orders estiver ativado, no topo de cada página do admin. Os clientes pagam na retirada: não há pagamento com cartão on-line.

Depois, mude pratos, fotos, preços e horários no admin — eles entram no ar na hora. Para mudanças de design ou código, peça ao Claude e aprove o push: a Hostinger recompila sua loja a cada push na main.