สร้างเว็บไซต์ร้านซูชิแบบอินเทอร์แอกทีฟด้วย AI

Claude Desktop

ใช้ Claude Code ในแอปเดสก์ท็อปเพื่อตั้งค่าและปรับแต่งเว็บไซต์ร้านอาหารของคุณ

ดาวน์โหลด Claude Desktop

https://claude.ai/download

บัญชี GitHub

ฟรี ใช้เก็บสำเนา KAITEN ของคุณเอง และ Hostinger จะดีพลอยจากที่นี่

สร้างบัญชี GitHub

https://github.com/signup

Node.js

ดาวน์โหลดรุ่น LTS Claude ใช้มันติดตั้งและตรวจสอบร้านของคุณ

ดาวน์โหลด Node.js

https://nodejs.org/en/download

บัญชี Supabase

แพ็กเกจฟรีก็เพียงพอ ใช้เก็บเมนู รูปภาพ เวลาทำการ ออร์เดอร์ และการลงชื่อเข้าใช้ของแอดมิน

สร้างบัญชี Supabase

https://supabase.link/r4gdwhi

โฮสติ้ง Hostinger

คุณต้องใช้โฮสติ้งในขั้นตอนที่ 5 ตอนที่ร้านออนไลน์จริง

เลือกแพ็กเกจ Hostinger

ใช้แพ็กเกจ Unlimited หรือแพ็กเกจ Cloud — KAITEN ดีพลอยเป็น Node.js Web App ไม่ใช่เว็บไซต์แบบ static

สร้างสำเนาของคุณเอง

เปิด KAITEN บน GitHub

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

กด Use this template แล้วกด Create a new repository ตั้งชื่อแล้วเลือก Public หรือ Private กด Create repository แล้วคัดลอกที่อยู่ของ repository

สร้างโปรเจกต์ Supabase

เปิดแดชบอร์ด Supabase

https://supabase.com/dashboard

กด New project — เลือกภูมิภาคใดก็ได้ และแพ็กเกจ Free ก็เพียงพอ เก็บรหัสผ่านฐานข้อมูลไว้ในที่ปลอดภัย — Claude ไม่ต้องใช้ เมื่อโปรเจกต์พร้อมแล้ว ให้คัดลอก Project ID

Supabase Project Settings General

Project ID คือข้อมูลโปรเจกต์อย่างเดียวที่ Claude ต้องใช้ คุณไม่ต้องสร้างตารางหรือเขียน SQL เอง: Claude จะตั้งค่าฐานข้อมูลให้ในขั้นตอนที่ 3

นำไปใช้ใน Claude Desktop

Claude Desktop Code Local

เริ่มเซสชัน Local ในโฟลเดอร์อย่าง Documents ใส่ที่อยู่ repository ของคุณด้านล่าง แล้วส่ง:

โคลนสำเนาของคุณ

ดาวน์โหลด repository KAITEN ของคุณเองลงในโฟลเดอร์ย่อยใหม่ และตรวจสอบว่า Claude อัปเดตมันได้

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.

ที่อยู่ repository ของคุณ

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

เปิดโฟลเดอร์ KAITEN ของคุณ

เริ่มเซสชัน Local ใหม่ เปิดโฟลเดอร์ที่ Claude เพิ่งสร้าง — โฟลเดอร์ที่มี README.md อยู่ข้างใน ถ้า Claude Desktop ถาม ให้เชื่อถือโฟลเดอร์นี้

ขอให้ Claude เชื่อมต่อร้านของคุณ

ในเซสชัน KAITEN ของคุณ ใส่ Project ID ด้านล่างแล้วส่ง:

เชื่อมต่อ KAITEN กับ Supabase

Claude จะรัน migration สามรายการของสตาร์ตเตอร์และใส่เมนูเริ่มต้นด้วย Supabase CLI ตรวจสอบความปลอดภัยและพื้นที่จัดเก็บ จากนั้นให้ค่าสาธารณะสองค่าสำหรับ 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.

Project ID ของ Supabase

abcdefghijklmnopqrst

Claude จะถามก่อนทำทุกขั้นตอน — กด Allow และ Claude จะหยุดรอเมื่อถึงตาคุณ

เข้าสู่ระบบ Supabase CLI

เมื่อ Claude ขอ ให้รันคำสั่งนี้เองหนึ่งครั้ง — คำสั่งนี้จะเปิดเบราว์เซอร์ของคุณ:

กด Terminal ในแถบชื่อของเซสชัน รันคำสั่งด้านล่าง อนุมัติการเข้าสู่ระบบในหน้าต่างเบราว์เซอร์ที่เปิดขึ้นมา บอก Claude ว่าคุณลงชื่อเข้าใช้แล้ว

npx supabase login

สร้างบัญชีแอดมินของคุณ

Supabase Authentication Users

กด Add user แล้วกด Create new user ใส่อีเมลและรหัสผ่านที่คาดเดายาก ปล่อยให้ติ๊ก Auto Confirm User ไว้ แล้วสร้างผู้ใช้ บอกอีเมลแอดมินให้ Claude รู้ — ห้ามบอกรหัสผ่านเด็ดขาด

Supabase Authentication Sign In / Providers

ปิด Allow new users to sign up แล้วบันทึก — ร้านนี้ไม่มีบัญชีลูกค้า

Claude จะเพิ่มอีเมลของคุณในรายชื่อผู้ดูแลของร้าน คุณจะล็อกอินที่ /admin บนร้านจริงของคุณในขั้นตอนที่ 5

Supabase CLI ใช้ไม่ได้? ตั้งค่าด้วยตัวเอง

ในโปรเจกต์ Supabase ของคุณ ให้เปิด SQL Editor แล้วรันไฟล์สามไฟล์นี้จากโฟลเดอร์ KAITEN ของคุณ ไฟล์ละครั้งเดียวและตามลำดับนี้ แต่ละไฟล์ให้เปิด คัดลอกทั้งหมด วางลงในคิวรีใหม่ แล้วกด Run

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

คัดลอก Project URL และ Publishable key จาก Connect — คุณจะนำไปเพิ่มใน Hostinger ในขั้นตอนที่ 5 หลังสร้างผู้ใช้แอดมินด้านบนแล้ว ใส่อีเมลของคุณด้านล่างและรัน SQL นี้ใน SQL Editor:

ตั้งให้ฉันเป็นแอดมิน

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

อีเมลแอดมินของคุณ

you@example.com

บอกรายละเอียดร้านของคุณให้ Claude

กรอกเท่าที่รู้ — ช่องที่เว้นว่างไว้ Claude จะใช้ของ KAITEN ตามเดิม จากนั้นส่งในเซสชัน KAITEN ของคุณ:

ปรับแต่งร้านซูชิของฉัน

เปลี่ยนชื่อ ข้อความ และหน้าตาของแบรนด์ โดยคงสายพานและระบบสั่งอาหารไว้เหมือนเดิมทุกอย่าง แล้ว push การเปลี่ยนแปลงไปยัง 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.

ชื่อร้านอาหาร

Sushi Nami

แนวคิดหรือเรื่องราวของร้านคุณ

เคาน์เตอร์ซูชิสายพานแบบครอบครัวในลียงตั้งแต่ปี 2009 ใช้ปลาจากตลาดเช้าและหุงข้าวใหม่ทุกชั่วโมง

อัตลักษณ์ทางภาพ

Claude จะเปลี่ยนแบรนด์ ดีไซน์ และโค้ด ส่วนเมนูอาหาร รูปภาพ ราคาจาน หมวดหมู่ เวลาทำการ รายละเอียดการมารับที่ร้าน และออร์เดอร์ จะจัดการในหน้าแอดมินหลังเปิดตัวในขั้นตอนที่ 5 ตรวจดูการเปลี่ยนแปลงของ Claude ขอแก้เพิ่มได้ในเซสชันเดียวกัน แล้วบอก Claude เมื่อพร้อม: Claude จะ push ครั้งเดียวไปยัง repository บน GitHub ของคุณ ซึ่งขั้นตอนที่ 5 จะนำไปดีพลอย

สร้าง Web App ของคุณ

ยังไม่มีโฮสติ้งใช่ไหม? ให้เลือกแพ็กเกจในส่วนสิ่งที่ต้องมี

Hostinger Websites Create site Web App

หาก Hostinger ให้เลือกโดเมน ให้เลือกโดเมนของคุณเอง — ไม่เช่นนั้นแอปของคุณจะเริ่มบนโดเมนชั่วคราว เลือก Import Git Repository อนุญาต GitHub แล้วเลือกสำเนา KAITEN ของคุณเอง ที่มีการเปลี่ยนแปลงซึ่ง Claude push ไว้ในขั้นตอนที่ 4

จดโดเมนไว้ที่อื่น? เพิ่มเรคคอร์ด DNS ที่ Hostinger แสดงไว้ที่ผู้ให้บริการจดโดเมนของคุณ และเก็บเรคคอร์ดอีเมลเดิมไว้

ตั้งค่าและดีพลอย

ใช้การตั้งค่า Next.js ที่ Hostinger ตรวจพบ — Hostinger จะบิลด์และเปิดร้านให้เอง เลือก Node.js 22 ขึ้นไป ตรวจสอบให้แน่ใจว่าคำสั่ง build คือ npm run build และคำสั่ง start คือ npm start — ห้ามใช้ npm run build:demo ซึ่งจะบิลด์เป็นเดโมที่ถูกล็อก

ก่อนดีพลอย ให้เปิด Environment variables คลิก Edit แล้วเพิ่มสามค่านี้ KAITEN_MODE จะเปิดการสั่งอาหารจริงและหน้าแอดมิน — ถ้าไม่มีค่านี้ เว็บไซต์ของคุณจะถูกบิลด์เป็นเดโม ส่วนค่า Supabase สองค่าคือค่าที่ Claude แสดงให้คุณในขั้นตอนที่ 3 ค่าเหล่านี้ถูกบิลด์เข้าไปในร้าน ถ้าเปลี่ยนค่าใดในภายหลังจึงต้องดีพลอยใหม่

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

คำว่า live เขียนด้วยตัวพิมพ์เล็ก

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

ค่า Supabase อยู่ใน Connect

เปิด Connect

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

เฉพาะค่าสาธารณะ

ห้ามใส่ Secret key หรือ service_role key ของ Supabase ที่นี่เด็ดขาด ค่าที่ขึ้นต้นด้วย NEXT_PUBLIC_ ทุกคนมองเห็นได้ในเบราว์เซอร์

คลิก Finish แล้วคลิก Deploy และรอให้บิลด์เสร็จ

ใช้งานบนโดเมนชั่วคราวอยู่?

หากต้องการเปลี่ยนไปใช้โดเมนของคุณเอง ให้เปิด Web App ของคุณใน Hostinger แล้วเชื่อมโดเมนที่นั่น พร้อมเพิ่มระเบียน DNS ที่แสดงไว้ที่ผู้ให้บริการจดโดเมนของคุณ KAITEN ไม่ได้เก็บที่อยู่เว็บของตัวเอง จึงไม่ต้องเปลี่ยนอะไรและไม่ต้องดีพลอยใหม่

ตั้งค่าร้านอาหารของคุณ

เปิด /admin บนร้านที่ใช้งานจริงของคุณ แล้วลงชื่อเข้าใช้ด้วยอีเมลแอดมิน ทุกอย่างที่บันทึกในหน้าแอดมินจะเข้าไปในฐานข้อมูลของคุณทันที — ไม่ต้องแก้โค้ด

ใน Restaurant ให้เลือกเขตเวลาที่ Hours are in ก่อน จากนั้นตั้งค่า Restaurant name ที่อยู่สำหรับมารับอาหาร เบอร์โทร และเวลาทำการ แล้วกด Save restaurant details ใน Plates & prices ให้ตั้งราคาของจานแต่ละสี แล้วกด Save plate prices — ทุกเมนูที่อยู่บนจานสีนั้นจะใช้ราคานี้ ใน Menu ให้กด Edit ที่เมนูอาหาร แก้รายละเอียด ใช้ Replace photo เพื่อใส่รูปของคุณเอง แล้วกด Save changes ใช้ Add dish สำหรับเมนูใหม่ ปิด On menu สำหรับเมนูที่คุณไม่ได้เสิร์ฟ และปิด In stock เมื่อเมนูใดขายหมดในวันนั้น ใน Categories ให้เปลี่ยนชื่อ จัดลำดับ หรือเพิ่มหมวดหมู่ในเมนูของคุณ

เปลี่ยนรูปภาพเริ่มต้นก่อนเปิดร้าน

รูปอาหารเริ่มต้นทั้งแปดรูปมาจากเดโมของคอมโพเนนต์ต้นฉบับ และยังไม่ได้ตรวจสอบสิทธิ์การใช้งาน ใช้รูปที่คุณเป็นเจ้าของหรือได้รับอนุญาตให้ใช้

รูปอาหารของคุณต้องเป็นแบบไหน

สี่เหลี่ยมจัตุรัส อย่างน้อย 800 × 800 px

ถ่ายจากด้านบน ให้จานเต็มเฟรม

พื้นหลังโปร่งใส (PNG หรือ WebP) เพื่อให้เห็นสายพานรอบจาน

ไม่เกิน 5 MB

ตรวจสอบและเปิดตัว

เปิดโดเมนของคุณ — มีไอคอนแม่กุญแจ สายพานหมุน และส่วนหัวแสดงสถานะเปิดร้านของคุณ หยิบจานสองสามจานใส่ออร์เดอร์ กด Review order แล้วกด Checkout for pickup ใส่ชื่อและเบอร์โทร แล้วกด Place pickup order ในหน้าแอดมิน เปิด Orders หาออร์เดอร์นั้น แล้วกด Start preparing ในหน้ายืนยันออร์เดอร์ กด Refresh status: ตอนนี้จะแสดง Preparing

ร้านรับออร์เดอร์เฉพาะในเวลาทำการของคุณ และขณะที่ Taking orders เปิดอยู่ ซึ่งอยู่ด้านบนของทุกหน้าแอดมิน ลูกค้าจ่ายเงินตอนมารับอาหาร: ไม่มีการชำระเงินด้วยบัตรออนไลน์

ภายหลังคุณเปลี่ยนเมนู รูปภาพ ราคา และเวลาทำการได้ในหน้าแอดมิน — มีผลทันที ส่วนการเปลี่ยนดีไซน์หรือโค้ด ให้ขอ Claude แล้วอนุมัติการ push: Hostinger จะบิลด์ร้านของคุณใหม่ทุกครั้งที่มีการ push ไปยัง main