Da burger 3D a merchandise personalizzato: costruisci un negozio con l'AI

Il panino si apre. I cetriolini appaiono. Aggiungi un'altra fetta di formaggio e l'hamburger si trasforma davanti ai tuoi occhi, insieme allo scontrino.Altrove, un cliente trascina un'illustrazione su una felpa, la sposta un po' più in alto e poi gira il prodotto per vedere l'effetto. Dietro a quell'interazione semplice, il venditore ha già deciso dove può andare la grafica e quanto grande può essere.Queste sono due esperienze di acquisto molto diverse. Condividono però un'idea utile: il negozio può essere modellato attorno a ciò che vendi, fino al modo in cui una persona lo sceglie.Abbiamo messo entrambi i punti di partenza nella collezione Modern Shop su GitHub: , una vetrina 3D per fast-food, e , un designer di prodotti per merchandise personalizzato. Il codice sorgente è disponibile con licenza MIT, quindi puoi esplorarlo, adattarlo e costruirci sopra.Porta un'idea, il tuo marchio e uno strumento di coding AI come Codex o Claude Code. C'è già qualcosa di interessante con cui lavorare.

Jelly Bites: lascia che i clienti costruiscano il loro pranzo

Comincia dal demo live di Jelly Bites. Scegli un burger, trascinalo per girarlo e prova a cambiare un ingrediente. Il cibo reagisce con un morbido oscillare. Evidenzia uno strato e l'impilamento si apre per farti vedere cosa c'è dentro.È giocoso, ma l'interazione ha uno scopo pratico. I clienti possono vedere le scelte che stanno facendo. Cetriolini, salse, formaggio e guarnizioni diventano parti visibili di un ordine invece di una lunga lista di opzioni che bisogna immaginare.Il costruttore di pizza porta la stessa idea in una direzione familiare per l'Italia: scegli la dimensione, il tipo di impasto, la salsa e i condimenti, poi guarda la pizza prendere forma. Uno scontrino in tempo reale mostra le conseguenze di quelle decisioni. La demo esplora anche ritiro o consegna, codici promozionali, checkout e una schermata di tracciamento dell'ordine.C'è un piccolo dettaglio qui che conta quando le persone cambiano idea. L'articolo in fase di creazione è una bozza fino a quando il cliente non sceglie . Un elemento del carrello può quindi essere riportato nel builder 3D e modificato. È il tipo di interazione che una hamburgeria o una pizzeria può fare propria.Il sorgente della vetrina 3D per fast-food è costruito con Vue, TypeScript e Three.js. Non è necessario conoscere quei nomi per provare la demo. Per uno sviluppatore o un agente di coding, identificano un progetto browser-based familiare da ispezionare ed estendere. Le forme del cibo sono generate in codice, dandoti un punto di partenza concreto per cambiarne l'aspetto e il comportamento.Un'hamburgeria potrebbe adattare il menu alle proprie ricette e al packaging. Una pizzeria potrebbe mettere in evidenza le sue combinazioni più famose. Puoi cambiare i colori, la lingua, i testi, le opzioni degli ingredienti e il flusso d'ordine per adattarlo all'attività. Nelle demo sono già presenti layout in inglese e persiano come esempi.Un confine da capire prima di usarlo per ordini reali: la demo attuale usa dati di catalogo di esempio, ordini memorizzati nel browser e checkout e tracciamento simulati. La connessione a Selldone deve ancora essere implementata. L'esperienza visiva è lì per essere esplorata; le verifiche finali di catalogo e prezzi sul server, il pagamento e l'evasione richiedono una vera integrazione e-commerce. L'esperienza 3D richiede un browser con WebGL 2, quindi testa un adattamento sui telefoni e browser che usano i tuoi clienti.

Mockup Studio: un'esperienza per il venditore, un'altra per il cliente

Un negozio di T-shirt personalizzate affronta un problema diverso. Il cliente vuole libertà di sperimentare. Il tipografo ha bisogno di un design che rientri nell'area di stampa effettiva.Mockup Studio affronta entrambe le facce del problema. Apri la demo live del product-designer e vedrai due modalità chiaramente segnate: per gli amministratori del negozio e per gli acquirenti.

Il venditore imposta le regole una sola volta

Nell'editor dei template, il venditore sceglie il prodotto, aggiunge le viste prodotto e definisce l'area stampabile. Quelle dimensioni sono salvate in millimetri, con impostazioni per risoluzione e bleed, l'area extra attorno al bordo di taglio.Il venditore poi decide cosa il cliente può modificare: spostare, ridimensionare o ruotare la grafica, ad esempio. Una stampa sul petto può avere i propri limiti, mentre una manica usa un'altra area. Il template può essere testato dal punto di vista del cliente prima di essere consegnato all'applicazione ospitante.Quella separazione rende l'idea utile oltre alla singola T-shirt. La galleria di esempio include una T-shirt, una felpa con cappuccio, un maglione, un cappellino, una tazza, un cuscino e un'etichetta appendibile. Asset 3D preparati possono anche essere usati nei formati modello supportati. Per una forma di prodotto diversa, prevedi di preparare il modello e la sua mappatura dell'area di stampa.Lo studio può creare anche foto iniziali del prodotto a partire da un modello 3D configurato. Questo dà al venditore un altro modo per preparare le viste per l'editor durante lo sviluppo dell'esperienza prodotto.

Il cliente ha spazio per giocare

L'editor per lo shopper è più focalizzato. Carica un'immagine, posizionala, aggiusta la dimensione e visualizzala in anteprima sul prodotto. Le regole del merchant restano in vigore mentre il cliente sperimenta.Ci sono viste 2D basate su foto e una vista 3D opzionale che può essere ruotata. Le modifiche alla grafica appaiono sul modello. Su prodotti morbidi supportati, uno strumento di pull ti permette persino di sollevare il tessuto e guardarlo assestarsi. È un effetto di anteprima; non allunga la grafica inviata alla stampa.Una distinzione chiara attraversa il progetto: Una mostra al cliente come potrebbe apparire l'articolo. L'altra è un PNG trasparente per la superficie di stampa, usando le dimensioni fisiche e la risoluzione configurata. Un indicatore di qualità di stampa aiuta a spiegare come i pixel dell'immagine sorgente si rapportano alla dimensione scelta.Per un flusso di produzione reale, il tipografo deve ancora approvare dimensioni, colori e requisiti di file. L'export attuale è un PNG RGB renderizzato dal browser, senza conversione CMYK o profili colore specifici per la stampa. Le forme prodotto generate sono illustrazioni più che repliche misurate di ogni capo che potresti vendere.La demo conserva anche template e design localmente. Salvarli su un'attività, allegare il design esatto a un ordine, incassare il pagamento e inviare il lavoro in produzione sono passi di integrazione per il negozio terminato. Strumenti di testo/font, varianti di prodotto e trascinamento diretto della grafica sulla superficie 3D sono tra le funzionalità ancora previste nella roadmap del progetto.

Un punto di partenza cambia la conversazione con l'AI

“Costruiscimi un negozio” lascia molto all'immaginazione di un assistente AI. “Prendi questo editor di prodotto, usa il nostro brand e rendi il flusso cliente adatto alla nostra tipografia/stamperia” gli dà qualcosa di concreto.Per questo stiamo condividendo il codice sorgente. Puoi vedere l'interazione, provarla e indicare le parti che vuoi cambiare. Uno screenshot diventa un punto di discussione. Una demo diventa un riferimento funzionante. Il codice dà al tuo sviluppatore o agente di coding AI un posto da cui partire.Usa ChatGPT per lavorare sull'idea di business: chi compra? Quali opzioni contano? Dove i clienti esitano? Quali informazioni devono arrivare in cucina o al reparto stampa? Poi porta quel brief in Codex, Claude Code o un altro ambiente di sviluppo AI che possa ispezionare e modificare il progetto.Gli strumenti AI possono aiutare ad adattare componenti, rivedere il design, connettere servizi, scrivere test e spiegare codice non familiare. Un buon risultato dipende comunque da un brief chiaro e dalla verifica dell'esperienza reale. Dai all'assistente un traguardo utile alla volta e chiedigli di mostrare ciò che funziona.

Dove si inserisce Selldone MCP

La parte frontale di un negozio è quella che i clienti toccano. Dietro ci sono prodotti, scorte, pagamenti, spedizioni e gli ordini che qualcuno deve evadere.Selldone MCP fornisce a un assistente AI connesso un accesso strutturato a un negozio Selldone autorizzato. Durante una build, questo può aiutare l'agente a lavorare con il catalogo, i contenuti e la configurazione supportata del negozio invece di indovinare su un set separato di dati demo. L'accesso resta all'interno del negozio e dei permessi che scegli.La vetrina distribuita ha poi bisogno di una propria implementazione dell'API Selldone o di un'integrazione di servizio. MCP aiuta l'assistente a fare lo sviluppo e le operazioni approvate sul negozio; non trasforma automaticamente il pulsante di checkout di una demo in un flusso di pagamento live.Per Jelly Bites, questo significa collegare il menu e il flusso d'ordine a servizi di commercio reali. Per Mockup Studio, significa memorizzare in modo affidabile il template del venditore e il design scelto dal cliente, quindi preservare quel design con il prodotto e l'ordine corretti. L'esperienza verso il cliente può restare distintiva mentre Selldone fornisce le fondamenta commerciali.Ci sono modi diversi per costruire su questa base. Una vetrina completa può essere personalizzata tramite il workflow Selldone Layout, mentre un'applicazione personalizzata più specializzata può usare un frontend separato. La panoramica Selldone Genesis spiega questi percorsi. La scelta giusta dipende da quanto vuoi mantenere dello store esistente e quanto particolare deve essere il percorso cliente.

Fornisci all'AI un brief iniziale migliore

Puoi iniziare con la seguente richiesta in un ambiente di coding. Sostituisci le parti tra parentesi con i dettagli della tua attività.

Ispeziona i due progetti su https://github.com/Modern-Shop e raccomanda il punto di partenza migliore per [la mia attività]. Leggi la documentazione, poi clona il progetto scelto in una nuova cartella. Mostra quali funzionalità funzionano oggi e quali necessitano integrazione. Adatta il percorso cliente a [il mio brand, prodotti e requisiti], mantenendo l'usabilità su mobile.

Una volta scelta una direzione, chiedi il passo successivo:

Collega il negozio Selldone previsto tramite MCP con i permessi necessari per questo task. Pianifica e implementa il catalogo reale, l'archiviazione dei design quando rilevante, carrello, checkout e integrazione ordini usando i servizi Selldone supportati. Sostituisci le ipotesi demo con i dati reali del negozio. Testa il flusso completo e mostra un'anteprima per la revisione prima della distribuzione.

Questi prompt sono l'inizio di una conversazione di sviluppo. Un buon agente ispezionerà il progetto, identificherà le parti mancanti e le affronterà insieme a te.Per un primo traguardo per un ristorante, potresti chiedere un ordine completo: personalizza un articolo, vedi il prezzo corretto, paga nel flusso di test supportato e verifica che l'attività abbia ricevuto l'ordine. Per una tipografia/stamperia, segui un design dall'upload all'anteprima fino al file esatto salvato e allegato all'ordine.Qui è anche dove una vetrina personalizzata può diventare un progetto più economico. Il codice di interazione esistente e una piattaforma e-commerce possono ridurre la parte da costruire da zero. Il costo finale dipende comunque dal design, dalle integrazioni, dagli asset, dall'hosting e dai test di cui la tua attività ha bisogno. La licenza MIT rende il sorgente riutilizzabile; non include però quei servizi gratuitamente.

Costruiscilo da solo o porta l'idea al nostro team

Continueremo a perfezionare i sample di Modern Shop e a sviluppare la collezione. Puoi partire dalle versioni disponibili ora, adattare un'intera esperienza o prendere solo la parte che risolve il tuo problema specifico.Se preferisci che dei specialisti modellino il risultato attorno al tuo marchio, puoi richiedere una stima per una vetrina su misura dal team ufficiale di setup e design di Selldone. Porta la demo che ti piace, i tuoi prodotti e l'esperienza che vuoi offrire ai clienti. Possiamo definire insieme design e implementazione prima che il progetto inizi.Forse il tuo negozio inizia con un burger che si smonta sullo schermo. Forse inizia con una piccola illustrazione su una tazza. Apri le demo, cambia qualcosa e vedi quale idea si avvicina di più alla tua attività.Esplora Modern Shop su GitHub · Prova il builder 3D per il cibo · Prova Mockup Studio