Từ burger 3D đến sản phẩm tùy chỉnh: Xây cửa hàng bằng AI

Bánh mì nâng lên. Những lát dưa chuột hiện ra. Thêm một lát phô mai nữa và chiếc burger thay đổi trước mắt bạn, cùng với hóa đơn.Ở nơi khác, một khách hàng thả một bản vẽ lên áo hoodie, kéo hơi lên cao một chút, rồi xoay sản phẩm để xem cảm giác. Đằng sau thao tác đơn giản đó, người bán đã quyết định trước vị trí và kích thước mà artwork có thể đặt.Đó là hai trải nghiệm mua sắm rất khác nhau. Chúng cùng chia sẻ một ý tưởng hữu ích: cửa hàng có thể được tạo xung quanh thứ bạn bán, kể cả cách người ta chọn món.Chúng tôi đặt cả hai điểm khởi đầu trong bộ sưu tập Modern Shop trên GitHub: , một mặt tiền cửa hàng đồ ăn nhanh 3D, và , một công cụ thiết kế sản phẩm cho hàng hóa tùy chỉnh. Mã nguồn được cấp phép MIT, nên bạn có thể khám phá, điều chỉnh và phát triển tiếp.Mang theo một ý tưởng, thương hiệu của bạn, và một công cụ lập trình AI như Codex hoặc Claude Code. Đã có sẵn một nền tảng thú vị để bắt đầu.

Jelly Bites: để khách tự xây bữa trưa

Bắt đầu với demo trực tiếp Jelly Bites. Chọn một chiếc burger, kéo để xoay, và thử thay đổi một thành phần. Món ăn phản ứng bằng một chuyển động lắc nhẹ. Chạm để làm nổi một lớp và stack sẽ mở ra để bạn nhìn thấy bên trong.Nó mang tính vui nhộn, nhưng tương tác có mục đích thực tế. Khách hàng có thể thấy rõ các lựa chọn họ đang thực hiện. Dưa chuột, sốt, phô mai và topping trở thành phần nhìn thấy được trong đơn thay vì là một chuỗi tùy chọn phải hình dung trong đầu.Trình tạo pizza đưa cùng ý tưởng theo hướng khác: chọn kích thước, vỏ bánh, sốt và topping, rồi xem pizza thành hình. Hóa đơn trực tiếp hiển thị hậu quả của những quyết định đó. Demo cũng khám phá giao hàng hoặc nhận tại quầy, mã khuyến mãi, thanh toán và màn hình theo dõi đơn hàng.Có một chi tiết nhỏ nhưng quan trọng khi người ta thay đổi ý định. Món nằm trên khung xây dựng là một bản nháp cho đến khi khách chọn . Một món trong giỏ sau đó có thể được đưa trở lại bộ dựng 3D và chỉnh sửa. Đó là kiểu tương tác mà một nhà hàng có thể biến thành đặc trưng riêng.Mã nguồn 3D fast-food storefront được xây dựng bằng Vue, TypeScript và Three.js. Bạn không cần biết những tên đó để thử demo. Đối với lập trình viên hoặc agent lập trình, chúng xác định một dự án dựa trên trình duyệt quen thuộc để kiểm tra và mở rộng. Các hình dạng đồ ăn được sinh bằng code, cho bạn một điểm khởi đầu cụ thể để thay đổi diện mạo và hành vi của chúng.Một quán burger tại Hà Nội có thể điều chỉnh menu theo công thức và cách đóng gói riêng. Một thương hiệu pizza có thể đưa các kết hợp đặc trưng lên đầu. Bạn có thể thay màu sắc, ngôn ngữ, nội dung, tùy chọn nguyên liệu và luồng đặt hàng để phù hợp với doanh nghiệp. Bố cục tiếng Anh và tiếng Ba Tư đã được minh họa trong mẫu.Cần hiểu một giới hạn trước khi dùng cho đơn hàng thực: demo hiện tại sử dụng dữ liệu danh mục mẫu, đơn hàng lưu trên trình duyệt và mô phỏng thanh toán cùng theo dõi. Kết nối tới Selldone của nó vẫn cần được triển khai. Trải nghiệm hình ảnh có thể khám phá; kiểm tra catalog và giá cuối cùng trên máy chủ, thanh toán và thực hiện đơn hàng đòi hỏi tích hợp thương mại thật. Trải nghiệm 3D cần trình duyệt hỗ trợ WebGL 2, nên hãy thử thích nghi trên điện thoại và trình duyệt mà khách hàng bạn dùng.

Mockup Studio: một trải nghiệm cho người bán, một cho người mua

Một cửa hàng áo thun tùy chỉnh có vấn đề khác. Khách hàng muốn thỏa sức thử nghiệm. Máy in cần một thiết kế phù hợp diện tích in thực tế.Mockup Studio tiếp cận cả hai phía của vấn đề đó. Mở demo thiết kế sản phẩm trực tiếp và bạn sẽ thấy hai chế độ được đánh dấu rõ: cho quản trị cửa hàng và cho khách hàng.

Người bán thiết lập quy tắc một lần

Trong trình xây dựng mẫu, người bán chọn sản phẩm, thêm các góc nhìn sản phẩm và xác định vùng in được phép. Các kích thước đó được lưu theo millimet, với cài đặt cho độ phân giải và bleed — phần artwork thừa xung quanh mép cắt.Người bán sau đó quyết định khách hàng được phép thay đổi gì: di chuyển, thay đổi kích thước hoặc xoay artwork, ví dụ. In ngực có thể có ranh giới riêng, trong khi tay áo dùng vùng khác. Mẫu có thể được thử từ góc nhìn người mua trước khi bàn giao cho ứng dụng chủ.Sự tách bạch đó khiến ý tưởng hữu dụng hơn cả áo thun đơn lẻ. Thư viện mẫu bao gồm áo thun, hoodie, áo len, mũ lưỡi trai, cốc, gối và tag treo. Các tài nguyên 3D đã chuẩn bị cũng có thể dùng trong định dạng mô hình được hỗ trợ. Với hình dạng sản phẩm khác, bạn cần chuẩn bị mô hình và gắn ánh xạ vùng in tương ứng.Studio còn có thể tạo ảnh sản phẩm ban đầu từ mô hình 3D đã cấu hình. Điều này giúp người bán có thêm cách chuẩn bị các góc nhìn cho trình chỉnh sửa khi đang phát triển trải nghiệm sản phẩm.

Khách hàng có không gian để thử nghiệm

Trình chỉnh sửa của người mua tập trung hơn. Tải lên ảnh, đặt vị trí, điều chỉnh kích thước và xem trước trên sản phẩm. Quy tắc của người bán vẫn được giữ nguyên trong khi khách thoải mái thử nghiệm.Có các góc nhìn 2D chụp ảnh và một chế độ 3D tùy chọn có thể xoay. Những thay đổi với artwork xuất hiện trên mô hình. Với các sản phẩm vải được hỗ trợ, công cụ kéo còn cho phép bạn nâng vải lên và nhìn nó rơi xuống lại. Đó là hiệu ứng xem trước; nó không làm thay đổi artwork gửi đến máy in.Một sự phân biệt rõ ràng chạy xuyên suốt dự án: Một phần hiển thị cho khách nhìn thấy sản phẩm trông thế nào. Phần khác là một PNG trong suốt dành cho bề mặt in, dùng kích thước vật lý và độ phân giải đã cấu hình. Bộ chỉ báo chất lượng in giúp giải thích cách số điểm ảnh của ảnh nguồn liên quan tới kích thước bạn chọn.Cho quy trình sản xuất thực tế, máy in vẫn cần duyệt lại kích thước, màu sắc và yêu cầu tập tin. Xuất hiện tại là PNG RGB do trình duyệt render, chưa có chuyển đổi CMYK hoặc profile màu theo yêu cầu máy in. Các hình dạng sản phẩm sinh ra là minh họa chứ không phải bản sao đo đạc chính xác của mọi trang phục bạn có thể bán.Demo hiện cũng lưu mẫu và thiết kế cục bộ. Lưu chúng vào một doanh nghiệp, gắn chính xác thiết kế vào đơn hàng, nhận thanh toán và gửi job đến sản xuất là các bước tích hợp cho cửa hàng hoàn chỉnh. Công cụ văn bản/font, biến thể sản phẩm và kéo artwork trực tiếp trên bề mặt 3D là những tính năng đang nằm trong lộ trình phát triển.

Một điểm khởi đầu làm thay đổi cuộc trao đổi với AI

“Xây cho tôi một cửa hàng” buộc AI trợ lý phải đoán nhiều thứ. “Lấy trình chỉnh sửa sản phẩm này, dùng thương hiệu của chúng tôi, và làm cho luồng khách phù hợp với xưởng in của chúng tôi” lại cho nó một điều cụ thể để làm việc.Đó là lý do chúng tôi chia sẻ mã nguồn. Bạn có thể xem tương tác, thử nghiệm và chỉ ra các phần bạn muốn thay đổi. Một ảnh chụp màn hình trở thành đề tài thảo luận. Một demo trở thành tài liệu tham khảo làm việc. Mã nguồn cho lập trình viên hoặc agent lập trình một nơi để bắt đầu.Dùng ChatGPT để làm rõ ý tưởng kinh doanh: Ai là người mua? Những tùy chọn nào quan trọng? Ở đâu khách chần chừ? Thông tin nào nên đến bếp hay đội in? Sau đó mang bản tóm tắt đó vào Codex, Claude Code, hoặc môi trường phát triển AI khác có thể kiểm tra và chỉnh sửa dự án.Các công cụ AI có thể giúp điều chỉnh thành phần, sửa giao diện, kết nối dịch vụ, viết test và giải thích code chưa rõ. Kết quả mạnh vẫn phụ thuộc vào một bản tóm tắt rõ ràng và việc kiểm tra trải nghiệm thực tế. Hãy cho trợ lý một mốc hữu ích từng bước, và yêu cầu nó trình bày những gì hoạt động.

Nơi Selldone MCP góp mặt

Mặt trước cửa hàng là phần khách chạm tới. Đằng sau đó là sản phẩm, tồn kho, thanh toán, vận chuyển và các đơn hàng ai đó phải thực hiện.Selldone MCP cung cấp cho trợ lý AI được kết nối quyền truy cập có cấu trúc tới một shop Selldone được ủy quyền. Trong quá trình xây dựng, điều này giúp agent làm việc với catalog, nội dung và cấu hình được hỗ trợ của shop thay vì phải đoán dữ liệu demo riêng lẻ. Truy cập vẫn nằm trong shop và theo quyền bạn chọn.Mặt tiền triển khai sau đó vẫn cần một API Selldone hoặc tích hợp dịch vụ được triển khai. MCP giúp trợ lý làm phát triển và thực hiện công việc được phê duyệt trong shop; nó không tự động biến nút checkout của demo thành luồng thanh toán trực tiếp.Với Jelly Bites, điều đó nghĩa là kết nối menu và luồng đơn sang dịch vụ thương mại thực. Với Mockup Studio, nó nghĩa là lưu mẫu của người bán và thiết kế khách chọn một cách đáng tin cậy, rồi bảo tồn thiết kế đó cùng sản phẩm và đơn hàng đúng. Trải nghiệm hướng tới khách hàng có thể giữ được nét đặc trưng trong khi Selldone cung cấp nền tảng thương mại.Có nhiều cách để xây dựng trên nền tảng đó. Một mặt tiền đầy đủ có thể tùy chỉnh thông qua workflow Selldone Layout, trong khi một ứng dụng tùy biến chuyên biệt hơn có thể dùng frontend riêng. Tổng quan Selldone Genesis giải thích những con đường đó. Lựa chọn đúng phụ thuộc vào việc bạn muốn giữ bao nhiêu phần của cửa hàng hiện có và hành trình khách hàng cần khác thường tới mức nào.

Cho AI của bạn một bản tóm tắt khởi đầu tốt hơn

Bạn có thể bắt đầu với yêu cầu sau trong môi trường lập trình. Thay phần trong ngoặc vuông bằng chi tiết doanh nghiệp của bạn.

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [doanh nghiệp của tôi]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [thương hiệu, sản phẩm và yêu cầu của tôi], keeping it usable on mobile.

Khi bạn đã chọn hướng đi, hãy yêu cầu mốc tiếp theo:

Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.

Những prompt đó là khởi đầu cho một cuộc nói chuyện xây dựng. Một agent tốt sẽ kiểm tra dự án, xác định những phần thiếu và làm việc cùng bạn để hoàn thành.Cho một mốc nhà hàng đầu tiên, bạn có thể yêu cầu một đơn hàng hoàn chỉnh: tùy chỉnh một món, thấy giá chính xác, thanh toán trong luồng kiểm thử được hỗ trợ, và xác minh đơn đã tới doanh nghiệp. Với xưởng in, theo dõi một thiết kế từ tải lên, xem trước tới artwork lưu chính xác gắn với đơn hàng.Đây cũng là nơi một mặt tiền tùy chỉnh có thể trở thành dự án tiết kiệm hơn. Code tương tác hiện có và một nền tảng thương mại có thể giảm lượng bạn phải xây từ đầu. Chi phí cuối cùng vẫn phụ thuộc vào thiết kế, tích hợp, tài sản, hosting và kiểm thử doanh nghiệp bạn cần. Giấy phép MIT cho phép tái sử dụng mã mẫu; nó không bao gồm những dịch vụ đó miễn phí.

Tự xây hoặc đưa ý tưởng cho đội ngũ của chúng tôi

Chúng tôi sẽ tiếp tục hoàn thiện các mẫu Modern Shop và phát triển bộ sưu tập. Bạn có thể bắt đầu từ các phiên bản hiện có, điều chỉnh toàn bộ trải nghiệm, hoặc mượn phần giải quyết đúng vấn đề của bạn.Nếu bạn muốn chuyên gia tạo kết quả phù hợp thương hiệu, bạn có thể yêu cầu báo giá thiết lập cửa hàng tùy chỉnh từ đội triển khai và thiết kế chính thức của Selldone. Mang theo demo bạn thích, sản phẩm và trải nghiệm bạn muốn khách có. Chúng tôi có thể cùng bạn ước lượng thiết kế và triển khai trước khi dự án bắt đầu.Có thể cửa hàng của bạn bắt đầu từ một chiếc burger tách từng lớp trên màn hình. Hoặc bắt đầu từ một bản vẽ nhỏ trên cốc. Mở demo, thay đổi thứ gì đó và xem ý tưởng nào hợp với doanh nghiệp bạn.Khám phá Modern Shop trên GitHub · Thử trình tạo đồ ăn 3D · Thử Mockup Studio