สร้างร้านแฟชั่นหรู AI พร้อมแดชบอร์ดผู้ดูแล

Claude Desktop

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

ดาวน์โหลด Claude Desktop

https://claude.ai/download

บัญชี GitHub

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

สร้างบัญชี GitHub

https://github.com/signup

Node.js

ดาวน์โหลดรุ่น LTS ปัจจุบัน ใช้รันร้านบนคอมพิวเตอร์ของคุณ

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

https://nodejs.org/en/download

บัญชี Supabase

แพ็กเกจฟรีก็เพียงพอ ใช้เก็บสินค้า รูปภาพ คำสั่งซื้อ และข้อมูลเข้าสู่ระบบของเจ้าของร้าน

สร้างบัญชี Supabase

https://supabase.link/r4gdwhi

บัญชี Cloudflare

ฟรี การตรวจสอบของ Turnstile ช่วยกันบอตออกจากหน้าชำระเงินของคุณ

สร้างบัญชี Cloudflare

https://dash.cloudflare.com/sign-up

โฮสติ้ง Hostinger

STILLFORM ใช้ฟรี ร้านที่ออนไลน์จริงของคุณจะทำงานอยู่ที่นี่

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

ใช้แพ็กเกจ Unlimited หรือแพ็กเกจ Cloud — STILLFORM ดีพลอยเป็น Node.js Web App

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

ลองร้านที่เสร็จแล้วในเดโมก่อน: วางเมาส์บนราวแขวนเสื้อ ลากราว แล้วเปิดดูสินค้าสักชิ้น ในเดโมจะปิดการชำระเงินและ Studio ไว้

เปิด STILLFORM บน GitHub

https://github.com/salhiworks/stillform-fashion-store

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

นำมาไว้บนคอมพิวเตอร์ของคุณ

Claude Desktop Code Local

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

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

ดาวน์โหลด repository STILLFORM ของคุณเองลงในโฟลเดอร์ย่อยใหม่

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, or GitHub needs me to sign in, tell me exactly what to do. 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-fashion-store

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

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

เปิดร้านบนเครื่องของคุณ

ในเซสชัน STILLFORM ของคุณ ให้ส่ง:

เตรียมและเปิด STILLFORM

ติดตั้งโปรเจกต์และเปิดร้านบนคอมพิวเตอร์ของคุณในโหมดเดโม

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

เปิดที่อยู่ที่ Claude ให้มา ซึ่งปกติคือ http://localhost:5173 ถ้ายังไม่มี Supabase ร้านจะทำงานในโหมดเดโมด้วยคอลเลกชันในตัว: ราว หน้าสินค้า และตะกร้าใช้งานได้ ส่วนการชำระเงินจะปิดอยู่จนถึงขั้นตอนที่ 3

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

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

https://supabase.com/dashboard

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

Supabase Project Settings General

Project ID คือข้อมูลโปรเจกต์อย่างเดียวที่ Claude ต้องใช้ Claude จะอ่าน Project URL และ Publishable key เองผ่าน Supabase CLI

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

คำสั่งนี้จะเปิดเบราว์เซอร์ คุณจึงต้องรันเองหนึ่งครั้ง:

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

npx supabase login

สร้างวิดเจ็ต Turnstile

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

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

ตั้งชื่อวิดเจ็ตตามชื่อร้านของคุณ ในส่วน hostnames ให้เพิ่ม localhost ถ้ารู้โดเมนร้านแล้ว ให้เพิ่มด้วย — ถ้ายังไม่รู้ คุณจะเพิ่มในขั้นตอนที่ 5 เลือกโหมด Managed แล้วสร้างวิดเจ็ต เปิดหน้านี้ค้างไว้: ขั้นตอนที่ 3 ต้องใช้ site key และ secret key ของวิดเจ็ต

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

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

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

Claude จะลิงก์โปรเจกต์ของคุณ ตั้งค่าฐานข้อมูลและคอลเลกชันเริ่มต้น แล้วดีพลอยฟังก์ชันชำระเงิน

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Project ID ของ Supabase

abcdefghijklmnopqrst

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

ใส่ข้อมูลลับใน Terminal

เมื่อ Claude ขอ ให้รันการตั้งค่าของร้านเองใน Terminal ระบบจะข้ามทุกอย่างที่ Claude ทำไปแล้ว และถามเฉพาะข้อมูลส่วนตัว:

npm run setup

ในส่วนการป้องกันการชำระเงิน ให้เลือก 1 แล้ววาง site key และ secret key ของ Turnstile ถ้าระบบเสนอให้ดีพลอยฟังก์ชัน place-order ใหม่ ให้พิมพ์ n — Claude ดีพลอยไปแล้ว ใส่อีเมลและรหัสผ่านอย่างน้อย 12 ตัวอักษรสำหรับบัญชีเจ้าของร้าน เมื่อระบบถาม ให้ปิด Allow new users to sign up ใน Supabase Dashboard ของคุณ แล้วกด Enter — การตั้งค่าจะตรวจว่าปิดแล้ว บอก Claude ว่าเสร็จแล้ว

Supabase Authentication Sign In / Providers

เก็บข้อมูลเหล่านี้เป็นความลับ

พิมพ์ secret key ของ Turnstile และรหัสผ่านของคุณเฉพาะในช่องที่ซ่อนข้อความของ Terminal เท่านั้น ห้ามวางลงในแชตเด็ดขาด

ตรวจสอบการตั้งค่าและเข้าสู่ระบบ

Claude จะรันการตรวจสอบของร้านและรีสตาร์ตร้าน เมื่อ Claude บอกว่าผ่านทั้งหมดแล้ว:

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

นี่คือ Studio แดชบอร์ดของร้านคุณ เฉพาะบัญชีที่อยู่ในรายชื่อผู้ดูแลร้านเท่านั้นที่เปิดได้ และไม่มีใครสมัครสมาชิกได้

เพิ่มสินค้า

ทุกอย่างที่คุณบันทึกใน Studio จะเข้าไปในฐานข้อมูลทันที — ไม่ต้องแก้โค้ด

Studio Products Add a product

กรอก Name, Category และ One-line summary ในส่วน Photos ให้เพิ่มรูปด้านหน้า ในส่วน Price, sizes and stock ให้ตั้ง Price และเลือก Sizes ตั้งชื่อสีแรก เลือกสีตัวอย่าง แล้วใส่จำนวนสต็อกของแต่ละไซซ์ กด Add a colour สำหรับสีอื่นๆ ทุกสี กด Publish

ไม่บังคับ: เมื่อเพิ่มสินค้าของคุณเองแล้ว เก็บถาวรหรือลบสินค้าเดโมทั้งแปดชิ้นได้ใน Products

จัดรูปให้พอดีกับราว

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

เปิด Remove the plain background ถ้ารูปไม่ใช่ไดคัท ปรับ Size และตำแหน่ง หรือลากรูปในตัวอย่าง เขียนคำอธิบายรูปสำหรับโปรแกรมอ่านหน้าจอ กด Use this photo

ดูที่ Preview on the rail: วางเมาส์เพื่อหมุนสินค้า แล้วคลิกเพื่อเปิดภาพระยะใกล้ รูปด้านหลังและด้านข้างจะทำให้หมุนได้รอบตัว

จัดเรียงราว

Studio Rail

ในส่วน Add a piece ให้เลือกสินค้าใหม่และสีของคุณ ลากสินค้าเพื่อจัดลำดับ หรือใช้ลูกศร เอาสินค้าที่ไม่ต้องการแสดงบนหน้าแรกออก กด Save rail

หน้าจอเดสก์ท็อปเหมาะกับสินค้าหกถึงสิบชิ้น บนโทรศัพท์ ราวจะกลายเป็นแถบเลื่อนที่ปัดดูได้

จัดคอลเลกชันและลุคบุ๊ก

Studio Collections

ในส่วน Homepage selection ให้เลือกสินค้าที่จะแสดงเด่นบนหน้าแรก แล้วกด Save กด New collection หรือแก้ไขคอลเลกชันเดิม แล้วเพิ่มสินค้า

Studio Lookbook

แก้ไขชื่อเรื่องและคำแนะนำ อัปโหลดรูปและคำบรรยายของคุณเองสำหรับแต่ละหน้าคู่ ซ่อนหรือจัดลำดับหน้าคู่ใหม่ แล้วกด Save lookbook

อัปเดตการตั้งค่าและเปิดการชำระเงิน

Studio Settings

ในส่วน Store ให้ตั้งชื่อร้านและสกุลเงิน ในส่วน Contact, Shipping และ Policies ให้ใส่ข้อมูลของคุณเอง ในส่วน Homepage ให้เปลี่ยนข้อความรอบๆ ราว ในส่วน Checkout ให้เปิด Cash on delivery, Bank transfer หรือ Pay at studio pickup แล้วแก้ไขคำแนะนำ เปิด Open checkout กด Save settings

STILLFORM ไม่รับข้อมูลบัตร: ผู้ซื้อเลือกหนึ่งในวิธีชำระเงินของคุณ และคุณทำเครื่องหมายว่าชำระแล้วเมื่อได้รับเงิน

ทดลองสั่งซื้อ

เปิดร้านบนเครื่องของคุณ ใส่สินค้าลงตะกร้า แล้วชำระเงิน จดหมายเลขอ้างอิงคำสั่งซื้อในหน้ายืนยัน ใน Studio ให้เปิด Orders แล้วคลิกคำสั่งซื้อทดสอบของคุณ กด Cancel order — สต็อกจะกลับมาขายได้อีกครั้ง

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

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

Hostinger Websites Create website Web App

เลือกโดเมนของคุณเอง หรือใช้โดเมนชั่วคราวเพื่อเริ่มต้น เลือก Import your Git repository ไปต่อด้วย Continue with GitHub แล้วให้ Hostinger เข้าถึง repository STILLFORM ของคุณ เลือก repository และ branch main

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

ใช้พรีเซ็ตเฟรมเวิร์ก Vite ที่ Hostinger ตรวจพบ เลือก Node.js 22 ตั้งคำสั่ง build เป็น npm run build — ห้ามใช้ build:demo ตั้งไดเรกทอรีเอาต์พุตเป็น dist และปล่อยไฟล์ entry ว่างไว้

ก่อนบิลด์ครั้งแรก ให้เพิ่มตัวแปรสภาพแวดล้อมสามตัวนี้ ใช้ค่าเดียวกับใน .env.local ของคุณ ซึ่ง Claude แสดงให้ดูได้ ค่าเหล่านี้ถูกบิลด์รวมไว้ในร้าน ถ้าเปลี่ยนภายหลังจึงต้องดีพลอยใหม่

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Supabase Publishable key

VITE_TURNSTILE_SITE_KEY

site key ของ Turnstile

ค่าของ Supabase อยู่ใน Connect ส่วน site key อยู่ที่วิดเจ็ต Turnstile ของคุณ

เปิด Connect

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

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

ห้ามเพิ่ม secret key ของ Turnstile, Secret key ของ Supabase หรือ service_role key ลงใน Hostinger — ทุกอย่างที่ขึ้นต้นด้วย VITE_ จะมองเห็นได้ในเบราว์เซอร์

ให้ Claude รัน npm run preflight ซึ่งเป็นการตรวจก่อนเปิดร้าน — ดีพลอยเมื่อผ่านเท่านั้น กด Deploy แล้วรอให้บิลด์เสร็จ เปิดที่อยู่เว็บไซต์จริงของคุณ

เชื่อมต่อโดเมนจริงของคุณ

Supabase Authentication URL Configuration

ตั้ง Site URL เป็นที่อยู่เว็บไซต์จริงของคุณ โดยขึ้นต้นด้วย https:// เพิ่มที่อยู่เดียวกันลงใน Redirect URLs กด Save

Cloudflare Turnstile

เปิดวิดเจ็ต STILLFORM ของคุณ เพิ่มโดเมนจริงของคุณลงใน hostnames ของวิดเจ็ต แล้วบันทึก

Allow new users to sign up ใน Supabase ยังคงปิดไว้

ทดสอบร้านที่ออนไลน์จริง

เปิดหน้าสินค้าหน้าหนึ่งโดยตรงจากที่อยู่ของหน้านั้น แล้วรีเฟรช เข้าสู่ระบบที่ /admin บนที่อยู่เว็บไซต์จริง ใส่สินค้าลงตะกร้าแล้วชำระเงิน — การตรวจสอบ Turnstile จะมองไม่เห็นหรือเป็นช่องติ๊กเพียงช่องเดียว หาคำสั่งซื้อทดสอบใน Orders แล้วยกเลิก

ยังไม่ได้ยืนยันว่า Hostinger จัดการลิงก์ตรงของร้านนี้อย่างไร ถ้าหน้าสินค้าแสดง 404 เมื่อเปิดหรือรีเฟรช ให้ขอให้ Claude ดูส่วน Hostinger ใน docs/DEPLOY.md ไปพร้อมกับคุณ

อัปเดตร้านของคุณภายหลัง

สินค้า รูปภาพ สต็อก คำสั่งซื้อ และการตั้งค่า: เปลี่ยนใน Studio — มีผลทันที

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