จากเบอร์เกอร์ 3D ถึงสินค้าสั่งทำ: สร้างร้านด้วย AI

ขนมปังยกขึ้น หมักกรีกและแตงกวาดองโผล่ให้เห็น เพิ่มชีสอีกชิ้นแล้วเบอร์เกอร์ก็เปลี่ยนต่อหน้า พร้อมกับใบเสร็จที่อัปเดตทันทีที่อีกมุมหนึ่ง ลูกค้าลากภาพกราฟิกมาใส่บนฮู้ดดี้ เลื่อนขึ้นเล็กน้อย แล้วหมุนดูว่าดูเป็นอย่างไร ข้างหลังการกระทำเรียบง่ายนี้ ผู้ขายได้ตัดสินใจไว้แล้วว่า artwork จะไปอยู่ตรงไหนและขนาดเท่าไรได้บ้างนี่คือสองประสบการณ์การช้อปปิ้งที่ต่างกันชัดเจน แต่มีแนวคิดร่วมกันที่เป็นประโยชน์: ร้านค้าสามารถถูกออกแบบไปรอบ ๆ สิ่งที่คุณขาย จนถึงวิธีที่ลูกค้าเลือกมันเราใส่สองจุดเริ่มต้นนี้ไว้ใน คอลเล็กชัน Modern Shop บน GitHub: ตัวอย่างร้านอาหาร 3D และตัวออกแบบสินค้าสั่งทำ ผลงานต้นฉบับเปิดให้ใช้งานภายใต้ใบอนุญาต MIT ดังนั้นคุณสามารถสำรวจ ปรับแต่ง และต่อยอดได้นำไอเดีย แบรนด์ของคุณ และเครื่องมือเขียนโค้ดด้วย AI เช่น Codex หรือ Claude Code มาเริ่มต้น คุณจะมีสิ่งที่น่าสนใจให้ทำงานต่อทันที

Jelly Bites: ให้ลูกค้ารวมชุดอาหารกลางวันเอง

เริ่มจาก ตัวอย่าง Jelly Bites แบบสด เลือกเบอร์เกอร์ หมุนเพื่อพลิกดู และลองเปลี่ยนวัตถุดิบ อาหารตอบสนองด้วยการสั่นเล็กน้อยเมื่อเปลี่ยนชิ้น ส่วนชั้นใดชั้นหนึ่งไฮไลต์แล้วชั้นจะเปิดให้เห็นข้างในมันให้ความสนุก แต่การโต้ตอบนี้มีเหตุผลเชิงปฏิบัติ: ลูกค้าจะเห็นตัวเลือกที่กำลังเลือกอยู่ แตงกวาดอง ซอส ชีส และท็อปปิ้งกลายเป็นส่วนที่มองเห็นได้ของคำสั่งซื้อ แทนที่จะเป็นรายการตัวเลือกที่ต้องจินตนาการแนวคิดเดียวกันนี้ถูกนำไปใช้กับตัวสร้างพิซซ่า: เลือกขนาด ขอบ ซอส และท็อปปิ้ง แล้วดูพิซซ่าค่อย ๆ ปรากฏ ใบเสร็จสดแสดงผลให้เห็นผลลัพธ์ของการตัดสินใจเหล่านั้น ตัวอย่างยังสำรวจตัวเลือกจัดส่งหรือรับที่ร้าน รหัสโปรโมชั่น การชำระเงิน และหน้าติดตามคำสั่งซื้อมีรายละเอียดเล็ก ๆ ที่สำคัญเมื่อคนเปลี่ยนใจ สินค้าที่อยู่บนเวทีการสร้างเป็นฉบับร่างจนกว่าลูกค้าจะกดเลือก สินค้าที่อยู่ในตะกร้าสามารถนำกลับเข้ามาในตัวสร้าง 3D เพื่อแก้ไขได้ นี่คือการโต้ตอบที่ร้านอาหารสามารถปรับใช้ให้เป็นของตัวเองได้ซอร์สโค้ดของ 3D fast-food storefront สร้างด้วย Vue, TypeScript และ Three.js คุณไม่จำเป็นต้องรู้ชื่อเหล่านี้ทั้งหมดเพื่อทดลอง ตัวอย่างสำหรับนักพัฒนาหรือเอเยนต์โค้ดจะแสดงเป็นโปรเจ็กต์บนเบราว์เซอร์ที่คุ้นเคยให้ตรวจสอบและขยาย รูปร่างอาหารถูกสร้างด้วยโค้ด ทำให้คุณมีจุดเริ่มต้นที่จับต้องได้สำหรับเปลี่ยนรูปลักษณ์และพฤติกรรมร้านเบอร์เกอร์ในประเทศไทยอาจปรับเมนูให้เข้ากับสูตรและบรรจุภัณฑ์ของตัวเอง แบรนด์พิซซ่าอาจจัดชุดเมนู signature ไว้ด้านหน้า คุณสามารถเปลี่ยนสี ภาษา คำบรรยาย ตัวเลือกวัตถุดิบ และกระบวนการสั่งซื้อให้สอดคล้องกับธุรกิจ ตัวอย่างมีเลย์เอาต์ภาษาอังกฤษและเปอร์เซียเป็นตัวอย่างแล้วมีขอบเขตที่ควรเข้าใจก่อนนำไปใช้กับคำสั่งซื้อจริง: ตัวอย่างปัจจุบันใช้ข้อมูลแคตาล็อกตัวอย่าง คำสั่งเก็บในเบราว์เซอร์ และการชำระเงิน/การติดตามที่จำลองไว้ การเชื่อมต่อกับ Selldone ยังต้องถูกนำไปลงมือทำ ประสบการณ์ภาพมีให้ลอง แต่การตรวจสอบแคตาล็อกและราคาแบบสุดท้ายบนเซิร์ฟเวอร์ การชำระเงิน และการจัดการสต็อกต้องการการเชื่อมต่อการค้าจริง ประสบการณ์ 3D ต้องการเบราว์เซอร์ที่รองรับ WebGL 2 ดังนั้นทดสอบการปรับแต่งบนโทรศัพท์และเบราว์เซอร์ที่ลูกค้าของคุณใช้

Mockup Studio: ประสบการณ์คนขายคนละแบบกับผู้ซื้อ

ร้านเสื้อสั่งทำมีโจทย์ต่างออกไป ลูกค้าต้องการอิสระในการทดลอง ส่วนโรงพิมพ์ต้องการดีไซน์ที่พอดีกับพื้นที่พิมพ์จริงMockup Studio จัดการทั้งสองด้านของปัญหานั้น เปิด ตัวอย่างตัวออกแบบสินค้าแบบสด และคุณจะเห็นสองโหมดที่ระบุชัดเจน: โหมดสำหรับผู้ดูแลร้าน (seller/admin) และโหมดสำหรับผู้ซื้อ (shopper/customer)

ผู้ขายตั้งกฎเพียงครั้งเดียว

ในตัวสร้างเทมเพลต ผู้ขายเลือกสินค้า เพิ่มมุมมองของสินค้า และกำหนดพื้นที่พิมพ์ พารามิเตอร์เหล่านั้นถูกเก็บเป็นมิลลิเมตร พร้อมการตั้งค่าความละเอียดและ bleed (พื้นที่งานขอบตัด)ผู้ขายจะกำหนดได้ว่าลูกค้าสามารถเปลี่ยนอะไรได้บ้าง เช่น ย้าย ปรับขนาด หรือหมุนงานศิลป์ พิมพ์หน้าอกอาจมีขอบเขตของตัวเอง ในขณะที่แขนเสื้อใช้พื้นที่อีกแบบ เทมเพลตสามารถทดสอบจากมุมมองของผู้ซื้อก่อนส่งมอบให้แอปโฮสต์การแยกส่วนนี้ทำให้แนวคิดใช้งานได้กว้างกว่าแค่เสื้อยืด แกลเลอรีตัวอย่างประกอบด้วยเสื้อยืด ฮู้ดดี้ สเวตเตอร์ หมวก แก้ว หมอน และป้ายแท็ก รวมทั้งสินทรัพย์ 3D ที่เตรียมไว้ก็สามารถใช้ได้ในรูปแบบโมเดลที่รองรับ หากต้องการรูปทรงสินค้าที่ต่างออกไป ให้เตรียมโมเดลและการแมปพื้นที่พิมพ์ให้เรียบร้อยสตูดิโอยังสามารถสร้างภาพสินค้าต้นแบบจากโมเดล 3D ที่ตั้งค่าไว้ได้ด้วย นั่นช่วยให้ผู้ขายมีวิธีเตรียมมุมมองสำหรับตัวแก้ไขขณะพัฒนาประสบการณ์สินค้า

ลูกค้ามีพื้นที่ให้เล่น

The shopper's editor is more focused. Upload an image, position it, adjust its size, and preview it on the product. The merchant's rules stay in place while the customer experiments.มุมมองแบบ 2D จากภาพถ่ายและมุมมอง 3D แบบเลือกได้ที่หมุนดูได้ การเปลี่ยนแปลงกับงานศิลป์จะปรากฏบนโมเดล บนสินค้าที่รองรับวัสดุอ่อน เครื่องมือดึง (pull tool) ยังให้คุณยกผ้าแล้วดูมันคืนรูปกลับได้เป็นผลการพรีวิว—แต่ไม่ยืดภาพที่จะส่งพิมพ์จริง

โครงการมีความชัดเจนหนึ่งอย่าง: หนึ่งมุมมองแสดงให้ลูกค้าเห็นว่าสินค้าอาจเป็นอย่างไร ส่วนอีกมุมมองเป็น PNG โปร่งใสที่เตรียมไว้สำหรับพื้นผิวการพิมพ์ โดยใช้ขนาดกายภาพและความละเอียดที่ตั้งค่าไว้ ตัวบอกคุณภาพการพิมพ์ช่วยอธิบายว่าพิกเซลของภาพต้นทางสัมพันธ์กับขนาดที่เลือกอย่างไรสำหรับเวิร์กโฟลว์การผลิตจริง โรงพิมพ์ยังต้องอนุมัติขนาด สี และข้อกำหนดไฟล์ การส่งออกปัจจุบันเป็น PNG RGB ที่เรนเดอร์ในเบราว์เซอร์ โดยไม่มีการแปลง CMYK หรือโปรไฟล์สีเฉพาะสำหรับโรงพิมพ์ รูปร่างสินค้าที่สร้างขึ้นเป็นภาพประกอบมากกว่าจะเป็นแบบจำลองที่วัดขนาดตามเสื้อผ้าจริงทุกตัวตัวอย่างยังเก็บเทมเพลตและดีไซน์ไว้ในเครื่องท้องถิ่น การบันทึกลงธุรกิจ แนบดีไซน์ที่แน่นอนกับคำสั่งซื้อ รับชำระเงิน และส่งงานไปยังการผลิต เป็นขั้นตอนการรวมระบบสำหรับร้านจริง เครื่องมือข้อความ/ฟอนต์ ตัวแปรสินค้า และการลากงานศิลป์ตรงบนพื้นผิว 3D เป็นฟีเจอร์ที่ยังอยู่ในแผนพัฒนา

จุดเริ่มต้นช่วยให้การคุยกับ AI เปลี่ยนไป

“สร้างร้านให้ฉัน” ทิ้งให้ผู้ช่วย AI ต้องคาดเดาเยอะ ในขณะที่ “นำตัวแก้ไขสินค้าอันนี้ ใช้แบรนด์ของเรา และทำให้เส้นทางลูกค้าทำงานสำหรับร้านพิมพ์ของเรา” ให้สิ่งที่จับต้องได้นั่นคือเหตุผลที่เราแชร์ซอร์สโค้ด คุณจะเห็นการโต้ตอบ ลองเล่น และชี้ไปยังส่วนที่อยากเปลี่ยน สกรีนช็อตกลายเป็นประเด็นคุย ตัวอย่างกลายเป็นข้อมูลอ้างอิงใช้งานได้ โค้ดให้จุดเริ่มต้นแก่ผู้พัฒนาหรือเอเยนต์โค้ด AIใช้ ChatGPT เพื่อช่วยร่างไอเดียธุรกิจ: ใครคือผู้ซื้อ ตัวเลือกใดสำคัญ จุดไหนที่ลูกค้าลังเล ข้อมูลอะไรควรส่งถึงครัวหรือทีมพิมพ์ จากนั้นนำบรีฟนั้นไปยัง Codex, Claude Code หรือสภาพแวดล้อมการพัฒนา AI อื่นที่สามารถตรวจสอบและแก้ไขโปรเจ็กต์ได้เครื่องมือ AI ช่วยปรับคอมโพเนนต์ ปรับดีไซน์ เชื่อมต่อเซอร์วิส เขียนเทสต์ และอธิบายโค้ดที่ไม่คุ้นเคย ผลลัพธ์ที่แข็งแกร่งยังขึ้นกับบรีฟที่ชัดเจนและการตรวจสอบประสบการณ์จริง ให้ผู้ช่วยทีละเป้าหมายที่เป็นประโยชน์ และขอให้มันแสดงผลงานที่ใช้งานได้

Selldone MCP เข้ามาตรงไหน

หน้าร้านเป็นส่วนที่ลูกค้าสัมผัส เบื้องหลังคือสินค้า สต็อก การชำระเงิน การจัดส่ง และคำสั่งซื้อที่ต้องจัดการSelldone MCP ให้ผู้ช่วย AI ที่เชื่อมต่อสิทธิ์อย่างเป็นโครงสร้างเข้าถึงร้านค้า Selldone ที่ได้รับอนุญาตได้ระหว่างการสร้าง ในขั้นตอนการพัฒนา นั่นช่วยให้เอเยนต์ทำงานกับแคตาล็อก เนื้อหา และการตั้งค่าที่รองรับของร้านแทนที่จะเดาข้อมูลตัวอย่างที่แยกออกไป การเข้าถึงยังคงอยู่ภายในร้านและสิทธิ์ที่คุณเลือกหน้าร้านที่นำขึ้นใช้จะยังต้องมีการนำ Selldone API หรือการเชื่อมต่อเซอร์วิสไปใช้งานจริง MCP ช่วยให้ผู้ช่วยทำงานพัฒนาและงานที่อนุมัติในร้าน แต่มันไม่แปลงปุ่มเช็คเอาต์ของเดโมให้กลายเป็นช่องทางจ่ายเงินจริงโดยอัตโนมัติสำหรับ Jelly Bites นั่นหมายถึงการเชื่อมเมนูและกระบวนการสั่งซื้อเข้ากับบริการการค้าจริง สำหรับ Mockup Studio นั่นหมายถึงการเก็บเทมเพลตของผู้ขายและดีไซน์ที่ลูกค้าเลือกอย่างเชื่อถือได้ แล้วแนบดีไซน์นั้นกับสินค้าจริงและคำสั่งซื้อ ประสบการณ์ฝั่งลูกค้ายังคงโดดเด่น ในขณะที่ Selldone เป็นพื้นฐานการค้าขายมีหลายวิธีในการสร้างบนพื้นฐานนั้น หน้าร้านเต็มรูปแบบสามารถปรับแต่งผ่านกระบวนการ Selldone Layout ในขณะที่แอปเฉพาะทางสามารถใช้ frontend แยกต่างหากได้ ภาพรวม Selldone Genesis อธิบายเส้นทางเหล่านั้น ตัวเลือกที่เหมาะสมขึ้นกับว่าคุณอยากเก็บส่วนใดของร้านเดิมไว้และเส้นทางลูกค้าต้องแปลกใหม่แค่ไหน

ให้ AI ของคุณบรีฟเริ่มต้นที่ดีกว่า

คุณสามารถเริ่มด้วยคำขอต่อไปนี้ในสภาพแวดล้อมการเขียนโค้ด แทนที่ส่วนในวงเล็บด้วยรายละเอียดธุรกิจของคุณ

ตรวจสอบโปรเจ็กต์ทั้งสองที่ https://github.com/Modern-Shop แล้วแนะนำจุดเริ่มต้นที่เหมาะกับ [my business] มากกว่า อ่านเอกสาร จากนั้นโคลนโปรเจ็กต์ที่เลือกลงในโฟลเดอร์ใหม่ แสดงฟีเจอร์ที่ทำงานได้วันนี้และฟีเจอร์ที่ต้องการการเชื่อมต่อ ปรับเส้นทางลูกค้าให้เข้ากับ [my brand, products, and requirements] โดยยังใช้งานได้บนมือถือ

เมื่อเลือกทิศทางแล้ว ให้ขอไทม์สเตจถัดไป:

เชื่อมร้าน Selldone ที่ตั้งใจใช้งานผ่าน MCP โดยให้สิทธิ์ที่งานนี้ต้องการ วางแผนและนำไปใช้งานแคตาล็อกจริง การเก็บดีไซน์เมื่อจำเป็น ตะกร้า การชำระเงิน และการเชื่อมต่อคำสั่งซื้อโดยใช้บริการ Selldone ที่รองรับ แทนที่สมมติฐานเดโมด้วยข้อมูลร้านจริง ทดสอบกระบวนการทั้งหมดและแสดงพรีวิวเพื่อตรวจก่อนนำขึ้นใช้งาน

พรอมต์เหล่านี้เป็นจุดเริ่มต้นของการสนทนาสร้างงาน ตัวแทนที่ดีจะตรวจสอบโปรเจ็กต์ ระบุชิ้นที่ขาด และทำงานผ่านพวกมันกับคุณสำหรับไทม์สเตจร้านอาหารขั้นแรก คุณอาจขอให้ทำคำสั่งสมบูรณ์หนึ่งรายการ: ปรับแต่งสินค้า ดูราคาที่ถูกต้อง จ่ายด้วยช่องทางทดสอบที่รองรับ และยืนยันว่าธุรกิจได้รับคำสั่งแล้ว สำหรับร้านพิมพ์ ให้ติดตามดีไซน์หนึ่งชิ้นจากการอัปโหลดถึงพรีวิวจนถึงไฟล์งานสุดท้ายที่ถูกบันทึกและแนบกับคำสั่งซื้อนี่คือจุดที่หน้าร้านเฉพาะทางอาจเป็นโปรเจ็กต์ที่ประหยัดกว่า โค้ดการโต้ตอบที่มีอยู่และแพลตฟอร์มการค้าสามารถลดงานที่ต้องสร้างจากศูนย์ ค่าใช้จ่ายสุดท้ายยังขึ้นกับดีไซน์ การเชื่อมต่อ สินทรัพย์ โฮสติ้ง และการทดสอบที่ธุรกิจของคุณต้องการ ใบอนุญาต MIT ทำให้ซอร์สตัวอย่างนำกลับมาใช้ซ้ำได้; แต่ไม่ได้รวมบริการเหล่านั้นฟรี

สร้างเอง หรือให้ทีมเราเป็นผู้ดูแล

เราจะพัฒนาตัวอย่าง Modern Shop ต่อไป คุณสามารถเริ่มจากเวอร์ชันที่มีอยู่ ปรับประสบการณ์ทั้งชุด หรือยืมส่วนที่แก้ปัญหาเฉพาะของคุณหากคุณต้องการให้ผู้เชี่ยวชาญออกแบบผลลัพธ์ให้เข้ากับแบรนด์ คุณสามารถ ขอประมาณราคาออกแบบหน้าร้านเฉพาะจากทีมตั้งค่าและออกแบบอย่างเป็นทางการของ Selldone นำตัวอย่างที่คุณชอบ สินค้า และประสบการณ์ที่ต้องการให้ลูกค้ามี ทีมงานจะช่วยสโคปรายละเอียดการออกแบบและการนำไปใช้งานร่วมกับคุณก่อนเริ่มโปรเจ็กต์บางทีร้านของคุณอาจเริ่มจากเบอร์เกอร์ที่แยกชิ้นบนหน้าจอ หรืออาจเริ่มจากภาพเล็ก ๆ บนแก้วกาแฟ เปิดตัวอย่าง เปลี่ยนบางอย่าง และดูว่าไอเดียไหนเข้ากับธุรกิจของคุณสำรวจ Modern Shop บน GitHub · ลองตัวสร้างอาหาร 3D · ลอง Mockup Studio