Från 3D-hamburgare till egen merch: Bygg en butik med AI

Bullen lyfts. Inlagd gurka kommer i blickfånget. Lägg på en skiva ost till och burgaren förändras framför dig — liksom kvittot.Någon annanstans släpper en kund en illustration på en hoodie, flyttar den en aning uppåt och vrider sedan plagget för att känna efter. Bakom den enkla interaktionen har säljaren redan bestämt var motivet får sitta och hur stort det kan vara.Det här är två väldigt olika köpupplevelser. De delar en viktig idé: en butik kan formas runt det du säljer, ända ner till hur någon väljer produkten.Vi har lagt båda startpunkterna i Modern Shop-samlingen på GitHub: Jelly Bites, en 3D-snabbmatsbutik, och Mockup Studio, en produktdesigner för personliga trycksaker. Källkoden finns under MIT-licensen, så du kan utforska den, anpassa och bygga vidare.Ta med en idé, ditt eget varumärke och ett AI-kodverktyg som Codex eller Claude Code. Det finns redan något intressant att börja med.

Smakbyggaren: låt kunderna komponera sin lunch

Börja med Jelly Bites live-demo. Välj en burgare, dra för att vrida den och prova att byta ingrediens. Maten svarar med ett mjukt flaxande. Markera ett lager så öppnar stapeln upp sig så du ser vad som finns inuti.Det är lekfullt, men interaktionen har ett praktiskt syfte. Kunder ser de val de gör. Inlagd gurka, sås, ost och pålägg blir synliga delar av beställningen istället för en rad alternativ kunden måste föreställa sig.Pizzabyggaren tar samma idé i en annan riktning: välj storlek, botten, sås och toppingar — och se pizzan växa fram. Ett livekvitto visar konsekvenserna av valen. Demon utforskar även leverans eller upphämtning, kampanjkoder, kassa och en orderspåningsskärm.En liten detalj här som spelar roll när kunder ändrar sig: objektet på byggscenen är ett utkast tills kunden väljer att lägga till det i kundvagnen. Ett varukorgsobjekt kan sedan tas tillbaka in i 3D-byggaren och redigeras. Det är den typen av interaktion en restaurang kan göra till sin egen.Källkoden för 3D-snabbmatsbutiken är byggd med Vue, TypeScript och Three.js. Du behöver inte kunna de namnen för att prova demon. För en utvecklare eller kodande AI-agent identifierar de ett välbekant webbläsarbaserat projekt att inspektera och utöka. Matformerna genereras i kod, vilket ger en konkret utgångspunkt för att förändra utseende och beteende.En hamburgerrestaurang i Sverige kan anpassa menyn efter egna recept och förpackningar. En lokal pizzeria kan lyfta fram sina signaturkombinationer först. Du kan ändra färger, språk, texter, ingrediensalternativ och beställningsflöde för att passa verksamheten. Exempel i engelska och persiska finns redan i provkoden.En gräns är viktig att förstå innan du använder demon för verkliga beställningar: nuvarande demo använder provkatalogdata, beställningar sparade i webbläsaren och simulerad kassa och spårning. Dess Selldone-anslutning behöver fortfarande implementeras. Den visuella upplevelsen finns att utforska; slutlig katalog- och prisverifiering på servern, betalning och fullgörelse kräver en riktig e-handelsintegration. 3D-upplevelsen kräver en WebGL 2-kompatibel webbläsare, så testa en anpassning på de telefoner och webbläsare dina kunder använder.

Mockup Studio: en upplevelse för säljaren, en annan för kunden

En specialtshirtbutik har ett annat problem. Kunden vill ha frihet att experimentera. Tryckeriet behöver en design som passar den faktiska tryckyta som finns.Mockup Studio tar itu med båda sidor av det problemet. Öppna live-demo för produktdesignern och du ser två tydligt markerade lägen: mallbyggare för butiksadministratörer och kundläge för shoppers.

Säljaren sätter reglerna en gång

I mallbyggaren väljer säljaren produkt, lägger till produktvyer och definierar tryckyta. Dimensionerna sparas i millimeter, med inställningar för upplösning och bleed — den extra konsten utanför trimkanten.Säljaren bestämmer sedan vad kunden får ändra: flytta, ändra storlek eller rotera konstverk, exempelvis. Ett brösttryck kan ha egna gränser medan en ärm använder ett annat område. Mallen kan testas ur kundens perspektiv innan den lämnas över till kundapplikationen.Den separationen gör idén användbar bortom en enda T‑shirt. Exempelsamlingen innehåller T‑shirt, hoodie, tröja, keps, mugg, kudde och hangtag. Förberedda 3D‑resurser kan också användas inom det stödda modellformatet. För en annan produktform planera för att förbereda modellen och dess mappning för tryckyta.Studiot kan även skapa initiala produktbilder från en konfigurerad 3D‑modell. Det ger säljaren ytterligare ett sätt att förbereda vyer för editorn när produkten utvecklas.

Kunden får utrymme att leka

Kundens editor är mer fokuserad. Ladda upp en bild, placera den, justera storlek och förhandsgranska på produkten. Handelsreglerna ligger kvar medan kunden experimenterar.Det finns fotobaserade 2D‑vyer och en valfri 3D‑vy som kan roteras. Ändringar i konstverket syns på modellen. På stödda mjuka produkter låter ett dragverktyg dig till och med lyfta tyget och se hur det faller tillbaka. Det är en förhandsgranskningseffekt; det töjer inte konstverket som skickas till tryck.En tydlig skillnad går genom projektet: en vy visar kunden hur varan kan se ut. Den andra är en transparent PNG för tryckyta, med konfigurerade fysiska mått och upplösning. En indikator för tryckkvalitet förklarar hur källbildens pixlar förhåller sig till vald storlek.För ett produktionsflöde behöver tryckeriet fortfarande godkänna mått, färger och filkrav. Nuvarande export är webbläsarrenderad RGB‑PNG, utan tryckspecifik CMYK‑ eller färgprofilkonvertering. De genererade produktformerna är illustrationer snarare än millimeterexakta avbildningar av varje plagg du kan sälja.Demon håller också mallar och designer lokalt. Att spara dem till en verksamhet, fästa exakt design vid en order, ta betalt och skicka jobbet till produktion är integrationssteg för en färdig butik. Text/typsnittverktyg, produktvarianter och direkt drag‑och‑släpp av konstverk på 3D‑ytan är funktioner som fortfarande finns på projektets roadmap.

En startpunkt förändrar samtalet med AI

”Bygg mig en butik” lämnar mycket åt en AI‑assistent att gissa. ”Ta den här produkteditorn, använd vårt varumärke och gör kundflödet fungerande för vårt tryckeri” ger den något konkret att börja med.Därför delar vi källkoden. Du kan se interaktionen, prova den och peka på de delar du vill ändra. En skärmdump blir en diskussion. En demo blir en fungerande referens. Koden ger din utvecklare eller AI‑kodagent en plats att börja.Använd ChatGPT för att arbeta igenom affärsidén: Vem köper? Vilka val är viktiga? Var tvekar kunder? Vilken information ska nå köket eller tryckeriet? Ta sedan den briefen in i Codex, Claude Code eller en annan AI‑utvecklingsmiljö som kan inspektera och redigera projektet.AI‑verktyg kan hjälpa till att anpassa komponenter, ändra design, koppla tjänster, skriva tester och förklara okänd kod. Ett bra resultat bygger fortfarande på en klar brief och att kontrollera den faktiska upplevelsen. Ge assistenten ett användbart mål i taget och be den visa vad som fungerar.

Var Selldone MCP passar in

Butikens framsida är den del kunderna rör vid. Bakom den finns produkter, lager, betalningar, frakt och de beställningar någon måste hantera.Selldone MCP ger en ansluten AI‑assistent strukturerad åtkomst till en auktoriserad Selldone‑butik. Under ett bygge kan det hjälpa agenten att arbeta med butikens katalog, innehåll och konfigurationsmöjligheter i stället för att gissa utifrån separata demodata. Åtkomst hålls inom butiken och de behörigheter du väljer.Den deployade butiksfronten behöver sedan sin egen implementerade Selldone‑API eller serviceintegration. MCP hjälper assistenten att göra utvecklingen och godkända butiksåtgärder; det förvandlar inte automatiskt en demos kassaknapp till verklig betalningsflöde.För Jelly Bites innebär det att koppla meny och orderflöde till riktiga e‑handels­tjänster. För Mockup Studio innebär det att lagra säljarens mall och kundens valda design på ett tillförlitligt sätt, och sedan bevara den designen med rätt produkt och order. Kundupplevelsen kan förbli distinkt samtidigt som Selldone tillhandahåller e‑handelsgrunden.Det finns olika sätt att bygga vidare på den grunden. En fullständig butik kan anpassas genom Selldone Layout‑arbetsflödet, medan en mer specialiserad applikation kan använda ett separat frontend. Selldone Genesis‑översikten förklarar de vägarna. Rätt val beror på hur mycket av den befintliga butiken du vill behålla och hur ovanlig kundresan måste vara.

Ge din AI en bättre första brief

Du kan börja med följande begäran i en kodmiljö. Byt ut de hakade delarna mot dina affärsdetaljer.

Inspektera de två projekten på https://github.com/Modern-Shop och rekommendera den bästa startpunkten för [min verksamhet]. Läs dokumentationen och klona sedan det valda projektet till en ny mapp. Visa vilka funktioner som fungerar idag och vilka som behöver integration. Anpassa kundresan till [mitt varumärke, produkter och krav], och gör den användbar på mobil.

När du valt riktning, be om nästa milstolpe:

Koppla den avsedda Selldone‑butiken via MCP med de behörigheter som denna uppgift behöver. Planera och implementera den verkliga katalogen, lagring av designer där det är relevant, kundvagn, kassa och orderintegration med stöd för Selldone‑tjänster. Ersätt demoantaganden med faktisk butikdata. Testa hela flödet och visa en förhandsvisning för granskning innan driftsättning.

Dessa prompts är början på en byggkonversation. En bra agent kommer att inspektera projektet, identifiera saknade delar och arbeta igenom dem med dig.För en första restaurangmilstolpe kan du be om en komplett order: anpassa ett objekt, se korrekt pris, betala genom ett stödjat testflöde och verifiera att ordern togs emot av verksamheten. För ett tryckeri, följ en design från uppladdning till förhandsgranskning till exakt sparad konst som är bilagd ordern.Här kan en specialbyggd butik också bli ett mer kostnadseffektivt projekt. Befintlig interaktionskod och en e‑handelsplattform kan minska mängden du behöver bygga från grunden. Slutkostnaden beror fortfarande på design, integrationer, resurser, hosting och test som din verksamhet behöver. MIT‑licensen gör provkoden återanvändbar; den inkluderar inte dessa tjänster gratis.

Bygg själv eller anlita vårt team

Vi kommer att fortsätta förfina Modern Shop‑exemplen och utveckla samlingen. Du kan börja från de versioner som finns nu, anpassa en hel upplevelse eller återanvända den del som löser just ditt problem.Om du föredrar att specialister formar resultatet runt ditt varumärke kan du begära en offerförfrågan för en skräddarsydd butik från Selldone:s officiella setup‑ och designtjänst. Ta med demon du gillar, dina produkter och den upplevelse du vill att kunderna ska ha. Vi kan scope:a design och implementation tillsammans innan projektet startar.Kanske börjar din butik med en burgare som kan plockas isär på skärmen. Kanske börjar den med en liten illustration på en mugg. Öppna demona, ändra något och se vilken idé som känns som din verksamhet.Utforska Modern Shop på GitHub · Prova 3D‑maten · Prova Mockup Studio