Fra 3D-burgere til personligt merch: Byg en butik med AI

Bollen løftes. Pickles dukker frem. Læg endnu en skive ost på, og burgeren forandrer sig foran dig – sammen med kvitteringen.Et andet sted trækker en kunde en illustration ind på en hættetrøje, flytter den lidt opad og vender så produktet for at se, hvordan det ser ud. Bag denne simple handling har sælgeren allerede besluttet, hvor motivet kan placeres, og hvor stort det må være.Det er to meget forskellige shoppingoplevelser. De deler en nyttig idé: en butik kan formes omkring det, du sælger, helt ned til måden, nogen vælger det på.Vi har lagt begge udgangspunkter i Modern Shop-samlingen på GitHub: en 3D-fastfood-vitrine og en produktdesigner til personligt merch. Kildekoden er tilgængelig under MIT-licensen, så du kan udforske, tilpasse og bygge videre på den.Tag en idé, dit eget brand og et AI-kodeværktøj som Codex eller Claude Code med. Der er allerede noget interessant at arbejde videre med.

Jelly Bites: lad kunderne bygge deres frokost

Start med Jelly Bites live-demoen. Vælg en burger, træk for at dreje den, og prøv at skifte en ingrediens. Maden reagerer med en blød vippende bevægelse. Fremhæv et lag, og stakken åbner sig, så du kan se, hvad der er indeni.Det er legende, men interaktionen har et praktisk formål. Kunderne kan se de valg, de træffer. Pickles, sauce, ost og toppings bliver synlige dele af en bestilling i stedet for en række valgmuligheder, de skal forestille sig.Pizza-byggeren tager den samme idé i en anden retning: vælg størrelse, bundtype, sauce og toppings, og se pizzaen tage form. En live-kvittering gør konsekvenserne af valgene synlige. Demoen viser også levering eller afhentning, kampagnekoder, checkout og en ordre-tracking-skærm.Der er en lille detalje her, som betyder noget, når folk ombestemmer sig. Varen på bygge-scenen er et udkast, indtil kunden vælger. Et varelinje kan derefter hentes tilbage ind i 3D-byggeren og redigeres. Det er den slags interaktion, en lokal burgerbar eller en takeaway-restaurant kan gøre til sin egen.3D fast-food-vitrinens kildekode er bygget med Vue, TypeScript og Three.js. Du behøver ikke at kende de navne for at prøve demoen. For en udvikler eller en kodeagent identificerer de et genkendeligt browserprojekt, som kan inspiceres og udvides. Madens former genereres i kode, hvilket giver et konkret udgangspunkt for at ændre udseende og opførsel.En lokal burgerbar kan tilpasse menuen til sine egne opskrifter og emballage. En københavnsk pizzakæde kan fremhæve sine signaturkombinationer. Du kan ændre farver, sprog, tekst, ingrediensvalg og bestillingsflow, så det passer til virksomheden. Eksemplet indeholder allerede engelske og persiske layouts.Én grænse er værd at forstå, før du bruger demoen til rigtige ordrer: den nuværende demo bruger eksempeldata til kataloget, ordrer lagret i browseren og simuleret checkout og tracking. Dens Selldone-forbindelse mangler stadig at blive implementeret. Den visuelle oplevelse kan udforskes; endelige katalog- og prischecks på serveren, betaling og opfyldelse kræver en reel commerce-integration. 3D-oplevelsen kræver en WebGL 2-kompatibel browser, så test en tilpasning på de telefoner og browsere, dine kunder bruger.

Mockup Studio: én oplevelse for sælgeren, en anden for køberen

En butik, der sælger personlige T-shirts, står over for et andet problem. Kunden vil have frihed til at eksperimentere. Trykkeriet har brug for et design, der passer præcist til trykområdet.Mockup Studio tager fat i begge sider af den problemstilling. Åbn live produkt-designer-demoen, og du vil se to klart markerede tilstande: en til butiksejere og en til kunder.

Sælgeren sætter reglerne én gang

I skabelonbyggeren vælger sælgeren produktet, tilføjer produktvisninger og definerer det trykbare område. Dimensionerne gemmes i millimeter med indstillinger for opløsning og bleed, det ekstra motivområde omkring en beskæringskant.Sælgeren beslutter derefter, hvad kunden må ændre: flytte, skalere eller rotere motivet, for eksempel. Et brysttryk kan have sine egne grænser, mens en ærme bruger et andet område. Skabelonen kan testes fra kundens synsvinkel, før den afleveres til den hostede applikation.Den adskillelse gør idéen nyttig ud over en enkelt T-shirt. Eksempelsamlingen indeholder en T-shirt, hættetrøje, sweater, kasket, krus, pude og hang tag. Forberedte 3D-assets kan også bruges i det understøttede modelformat. For et produkt med en anden form skal du forvente at forberede modellen og dens kortlægning af trykområdet.Studiet kan også skabe indledende produktfotos ud fra en konfigureret 3D-model. Det giver sælgeren endnu en måde at forberede visninger til editoren, mens produktoplevelsen udvikles.

Kunden får plads til at lege

Kundens editor er mere fokuseret. Upload et billede, placer det, juster størrelsen, og forhåndsvis det på produktet. Forhandlerens regler forbliver gældende, mens kunden eksperimenterer.Der er fotobaserede 2D-visninger og en valgfri 3D-visning, der kan roteres. Ændringer i motivet vises på modellen. På understøttede bløde materialer lader et træk-værktøj dig endda løfte stoffet og se det falde tilbage. Det er en preview-effekt; den strækker ikke motivet, der sendes til tryk.En klar skelnen går gennem projektet: den ene viser kunden, hvordan varen kunne se ud. Den anden er en transparent PNG til en trykflade, baseret på de konfigurerede fysiske dimensioner og opløsning. En indikator for trykkvalitet hjælper med at forklare, hvordan kildebilledets pixels relaterer til den valgte størrelse.Til en egentlig produktionsworkflow skal trykkeriet stadig godkende dimensioner, farver og filkrav. Den nuværende eksport er browser-renderet RGB PNG, uden printer-specifik CMYK eller farveprofils-konvertering. De genererede produktformer er illustrationer frem for præcise målespecifikationer for hvert stykke beklædning, du måtte sælge.Demoen gemmer også skabeloner og designs lokalt. At gemme dem til en virksomhed, knytte det præcise design til en ordre, tage betaling og sende jobbet til produktion er integrationsarbejde for den færdige butik. Tekst-/font-værktøjer, produktvarianter og direkte træk af artwork på en 3D-overflade er nogle af de funktioner, der stadig står på projektets roadmap.

Et udgangspunkt ændrer samtalen med AI

”Byg mig en butik” efterlader meget for en AI-assistent at gætte. ”Tag denne produkteditor, brug vores brand, og få kunderejsen til at fungere for vores trykkeri” giver den noget konkret at arbejde med.Derfor deler vi koden. Du kan se interaktionen, prøve den og pege på de dele, du vil ændre. Et screenshot bliver en diskussion. En demo bliver en arbejdende reference. Koden giver din udvikler eller en AI-kodeagent et sted at begynde.Brug ChatGPT til at arbejde igennem forretningsideen: Hvem køber? Hvilke valgmuligheder betyder noget? Hvor tøver kunder? Hvilke informationer skal nå køkkenet eller trykkeriet? Tag så briefet ind i Codex, Claude Code eller et andet AI-udviklingsmiljø, der kan inspicere og redigere projektet.AI-værktøjer kan hjælpe med at tilpasse komponenter, revidere design, forbinde services, skrive tests og forklare ukendt kode. Et godt resultat afhænger stadig af et klart brief og af at tjekke selve oplevelsen. Giv assistenten et nyttigt milepæl ad gangen, og bed den vise, hvad der virker.

Hvor Selldone MCP passer ind

Forsiden af en butik er den del, kunderne rører ved. Bagved ligger produkter, lager, betalinger, forsendelse og de ordrer, nogen skal håndtere.Selldone MCP giver en forbundet AI-assistent struktureret adgang til en autoriseret Selldone-butik. Under et build kan det hjælpe agenten med at arbejde med butikkens katalog, indhold og understøttede konfiguration i stedet for at gætte på separate demo-data. Adgangen forbliver inden for den butik og de tilladelser, du vælger.Den deployede frontend skal derefter have sin egen implementerede Selldone API- eller service-integration. MCP hjælper assistenten med at udføre udvikling og godkendt butiksarbejde; det forvandler ikke automatisk en demos checkout-knap til en live betalingsflow.For Jelly Bites betyder det at forbinde menuen og ordreflowet til rigtige commerce-services. For Mockup Studio betyder det at gemme sælgerens skabelon og kundens valgte design pålideligt og derefter bevare det rette design sammen med det korrekte produkt og den korrekte ordre. Den kundevendte oplevelse kan forblive unik, mens Selldone leverer commerce-grundlaget.Der er forskellige måder at bygge videre på det fundament. En fuld butik kan tilpasses gennem Selldone Layout-workflowet, mens en mere specialiseret custom-applikation kan bruge et separat frontend. Selldone Genesis-oversigten forklarer de veje. Det rigtige valg afhænger af, hvor meget af den eksisterende butik du vil bevare, og hvor usædvanlig kunderejsen skal være.

Giv din AI et bedre første brief

Du kan begynde med følgende anmodning i et kode-miljø. Erstat de indsatte parenteser med dine egne forretningsdetaljer.

Undersøg de to projekter på https://github.com/Modern-Shop og anbefal det bedste udgangspunkt for [min virksomhed]. Læs dokumentationen, og clone derefter det valgte projekt til en ny mappe. Vis hvilke funktioner der virker i dag, og hvilke der kræver integration. Tilpas kunderejsen til [mit brand, mine produkter og krav], så den forbliver brugbar på mobil.

Når du har valgt en retning, bed om næste milepæl:

Forbind den tiltænkte Selldone-butik gennem MCP med de tilladelser, denne opgave kræver. Planlæg og implementer det rigtige katalog, design-lagring hvor relevant, kurv, checkout og ordre-integration ved hjælp af understøttede Selldone-services. Erstat demo-antagelser med faktiske butiksdata. Test hele flowet og vis en preview til gennemgang inden deployment.

De prompts er begyndelsen på en bygge-samtale. En god agent vil inspicere projektet, identificere manglende dele og arbejde sig igennem dem sammen med dig.For en første restaurant-milepæl kan du bede om én komplet ordre: tilpas ét element, se den korrekte pris, betal i det understøttede testflow, og verificer at ordren er modtaget af virksomheden. For et trykkeri, følg ét design fra upload til preview til den præcise gemte artwork knyttet til ordren.Her kan en custom-frontend også blive et mere økonomisk projekt. Eksisterende interaktionskode og en commerce-platform kan reducere, hvor meget du skal bygge fra bunden. Den endelige pris afhænger stadig af design, integrationer, assets, hosting og test, som din virksomhed har brug for. MIT-licensen gør eksempelkoden genanvendelig; den inkluderer ikke de nævnte services gratis.

Byg det selv, eller tag idéen videre til vores team

Vi vil fortsætte med at forfine Modern Shop-eksemplerne og udvikle samlingen. Du kan starte fra de tilgængelige versioner nu, tilpasse en hel oplevelse eller låne det stykke, der løser dit specifikke problem.Hvis du foretrækker, at specialister former resultatet omkring dit brand, kan du anmode om et skræddersyet butikstilbud fra Selldones officielle setup- og designteam. Medbring den demo, du kan lide, dine produkter og den oplevelse, du ønsker, at kunderne skal have. Vi kan scope design og implementering sammen med dig, før projektet starter.Måske starter din butik med en burger, der går fra hinanden på skærmen. Måske starter den med en lille illustration på et krus. Åbn demoerne, ændr noget og se, hvilken idé der føles som din virksomhed.Udforsk Modern Shop på GitHub · Prøv 3D-madbyggeren · Prøv Mockup Studio