Von 3D-Burgern zu maßgeschneidertem Merch: Baue einen Shop mit KI

Das Brötchen hebt sich. Die Gewürzgurken treten ins Blickfeld. Noch eine Scheibe Käse dazu und der Burger verändert sich direkt vor den Augen – zusammen mit der Bestellung auf dem Bildschirm. Andernorts legt ein Kunde eine Illustration auf einen Hoodie, schiebt sie etwas nach oben und dreht dann das Produkt, um zu sehen, wie es wirkt. Hinter dieser einfachen Interaktion hat die Verkäuferin bereits festgelegt, wo das Motiv platziert werden darf und wie groß es sein kann. Das sind zwei sehr unterschiedliche Einkaufserlebnisse. Sie teilen eine nützliche Idee: Ein Shop lässt sich um das Produkt herum gestalten, bis hin zur Art, wie Kundinnen und Kunden es auswählen. Wir haben beide Ausgangspunkte in der Modern Shop collection on GitHub veröffentlicht: , ein 3D-Schnellrestaurant-Frontend, und , ein Produktdesigner für personalisierte Merchandise-Artikel. Der Quellcode steht unter der MIT-Lizenz – du kannst ihn also ansehen, anpassen und weiterentwickeln. Bringe eine Idee mit, deine eigene Marke und ein KI-Codierwerkzeug wie Codex oder Claude Code. Es gibt bereits etwas Interessantes, mit dem sich arbeiten lässt.

Jelly Bites: Kunden ihr Mittagessen bauen lassen

Beginne mit der Jelly Bites Live-Demo. Wähle einen Burger, ziehe, um ihn zu drehen, und probiere, eine Zutat zu ändern. Das Essen reagiert mit einem weichen Wabbeln. Markiere eine Schicht und der Stapel öffnet sich, sodass du sehen kannst, was darin steckt. Das ist spielerisch, doch die Interaktion hat einen praktischen Zweck. Kundinnen und Kunden sehen die Entscheidungen, die sie treffen. Gewürzgurken, Sauce, Käse und Beläge werden zu sichtbaren Teilen einer Bestellung statt zu einer aufzuzählenden Optionsliste, die man sich erst vorstellen muss. Der Pizza-Builder geht dieselbe Idee in eine andere Richtung: Wähle die Größe, den Teig, die Sauce und die Beläge und sieh dabei zu, wie die Pizza Form annimmt. Eine Live-Rechnung macht die Folgen dieser Entscheidungen unmittelbar sichtbar. Die Demo zeigt außerdem Abholung oder Lieferung, Rabattcodes, Checkout und einen Bestell-Tracking-Bildschirm. Ein kleines Detail ist hier wichtig, wenn Leute ihre Meinung ändern: Der Artikel auf der Baufläche ist ein Entwurf, bis die Kundin oder der Kunde Bestellen wählt. Ein Warenkorbartikel kann dann wieder in den 3D-Editor zurückgeholt und erneut bearbeitet werden. Das ist die Art von Interaktion, die ein Imbissbetrieb für sich nutzen kann. Der 3D fast-food storefront Quellcode ist mit Vue, TypeScript und Three.js erstellt. Du musst diese Namen nicht kennen, um die Demo auszuprobieren. Für Entwickler oder einen Codier-Agenten liefern sie einen vertrauten Browser-basierten Projektaufbau, den man untersuchen und erweitern kann. Die Lebensmittelformen werden im Code generiert und geben einen konkreten Ausgangspunkt, um Erscheinungsbild und Verhalten zu verändern. Ein Imbiss in Berlin könnte die Speisekarte an eigene Rezepte und Verpackungen anpassen. Eine Pizzeria in Hamburg könnte ihre Signaturkombinationen zuerst platzieren. Du kannst Farben, Sprache, Texte, Zutatenoptionen und den Bestellablauf verändern, damit alles zur jeweiligen Firma passt. Englische und Persische Layouts sind im Beispiel bereits vertreten. Eine Grenze ist wichtig zu verstehen, bevor du die Demo für echte Bestellungen verwendest: Die aktuelle Demo verwendet Beispieldaten im Katalog, im Browser gespeicherte Bestellungen sowie simulierten Checkout und Tracking. Die Selldone-Anbindung muss noch implementiert werden. Die visuelle Erfahrung lässt sich erkunden; finale Katalog- und Preisprüfungen auf dem Server, Zahlung und Fulfillment brauchen eine echte Commerce-Integration. Die 3D-Erfahrung erfordert einen WebGL 2-fähigen Browser – teste Anpassungen auf den Telefonen und Browsern, die deine Kundschaft nutzt.

Mockup Studio: Ein Erlebnis für den Verkäufer, ein anderes für die Kundschaft

Ein Shop für personalisierte T-Shirts hat ein anderes Problem. Die Kundin will Freiraum zum Experimentieren. Die Druckerei braucht ein Design, das in die tatsächliche Druckfläche passt. Mockup Studio geht beide Seiten dieses Problems an. Öffne die Live-Produktdesigner-Demo und du siehst zwei klar gekennzeichnete Modi: Seller für Shop-Admins und Shopper für Kundinnen und Kunden.

Der Verkäufer legt die Regeln einmal fest

Im Template-Editor wählt die Verkäuferin das Produkt, fügt Produktansichten hinzu und definiert die druckbare Fläche. Diese Abmessungen werden in Millimetern gespeichert, inklusive Einstellungen für Auflösung und Beschnittzugabe (bleed) – die zusätzliche Grafik über die Schnittkante hinaus. Der Verkäufer bestimmt dann, was die Kundin verändern darf: etwa Verschieben, Skalieren oder Drehen des Motivs. Ein Brustdruck kann eigene Grenzen haben, während ein Ärmelbereich wieder andere Regeln bekommt. Die Vorlage lässt sich aus Sicht der Kundin testen, bevor sie in die Host-Anwendung übergeben wird. Diese Trennung macht die Idee über ein einzelnes T-Shirt hinaus nützlich. Die Beispielgalerie enthält ein T‑Shirt, Hoodie, Sweater, Cap, Tasse, Kissen und Anhänger. Vorbereitete 3D-Assets können im unterstützten Modellformat ebenfalls genutzt werden. Für andere Produktformen sollte das Modell und dessen Mapping der Druckfläche vorbereitet werden. Das Studio kann aus einem konfigurierten 3D-Modell auch erste Produktfotos erzeugen. Das gibt dem Verkäufer eine zusätzliche Möglichkeit, Ansichten für den Editor vorzubereiten, während das Produktangebot entwickelt wird.

Die Kundin bekommt Spielraum

Der Editor für Shopper ist fokussierter. Bild hochladen, positionieren, Größe anpassen und das Ergebnis am Produkt ansehen. Die Regeln des Händlers bleiben dabei bestehen, während die Kundin experimentiert. Es gibt fotobasierte 2D-Ansichten und eine optionale 3D-Ansicht, die drehbar ist. Änderungen am Motiv werden am Modell sichtbar. Bei geeigneten, weichen Produkten erlaubt ein Pull-Tool sogar, den Stoff anzuheben und zu sehen, wie er sich wieder legt. Das ist ein Vorschau-Effekt; die Grafik für den Druck wird dadurch nicht gedehnt. Ein klarer Unterschied zieht sich durch das Projekt: Die eine Ansicht zeigt der Kundin, wie das Produkt aussehen könnte. Die andere liefert eine transparente PNG für die Druckfläche, basierend auf den konfigurierten physischen Abmessungen und der Auflösung. Ein Indikator für Druckqualität erklärt, wie die Pixelzahl des Quellbilds zur gewählten Größe passt. Für einen echten Produktionsablauf muss die Druckerei weiterhin Maße, Farben und Dateianforderungen absegnen. Der aktuelle Export ist ein im Browser gerendertes RGB-PNG, ohne druckerspezifische CMYK- oder Farbprofilkonvertierung. Die erzeugten Produktformen sind Illustrationen und keine vermessenen Replikate jedes einzelnen Kleidungsstücks, das du verkaufen könntest. Die Demo speichert Vorlagen und Designs lokal. Sie so einem Geschäft zuzuordnen, das genaue Design an einer Bestellung zu befestigen, Bezahlung abzuwickeln und den Job in die Produktion zu schicken sind Integrationsschritte für einen produktiven Shop. Text-/Schriftwerkzeuge, Produktvarianten und direktes Artwork-Draggen auf die 3D‑Oberfläche stehen noch auf der Roadmap.

Ein Ausgangspunkt verändert die Konversation mit der KI

„Bau mir einen Shop“ lässt der KI‑Assistenz viel zu raten. „Nimm diesen Produkteditor, nutze unsere Marke und passe den Kundenfluss an unsere Druckerei an“ gibt ihr etwas Konkretes. Deshalb teilen wir den Quellcode. Du kannst die Interaktion sehen, sie ausprobieren und die Teile benennen, die du ändern willst. Ein Screenshot wird zur Gesprächsgrundlage. Eine Demo wird zur Arbeitsreferenz. Der Code gibt deinem Entwickler oder Codier‑Agenten einen Startpunkt. Nutze ChatGPT, um die Geschäftsidee durchzuarbeiten: Wer kauft? Welche Optionen sind relevant? Wo zögern Kundinnen? Welche Informationen müssen in die Küche oder zur Druckerei? Dann übergib dieses Briefing an Codex, Claude Code oder eine andere KI‑Entwicklungsumgebung, die das Projekt inspizieren und editieren kann. KI‑Werkzeuge können Komponenten anpassen, das Design überarbeiten, Services verbinden, Tests schreiben und unbekannten Code erklären. Ein gutes Ergebnis hängt weiterhin von einem klaren Briefing und einer Prüfung der tatsächlichen Erfahrung ab. Gib der Assistenz je Meilenstein nur eine sinnvolle Aufgabe und lass dir zeigen, was funktioniert.

Wo Selldone MCP ins Spiel kommt

Die Schauseite eines Shops ist der Teil, den Kundinnen und Kunden anfassen. Dahinter stehen Produkte, Lagerbestand, Zahlungen, Versand und die Bestellungen, die jemand abwickeln muss. Selldone MCP gibt einer vernetzten KI‑Assistenz strukturierten Zugang zu einem autorisierten Selldone‑Shop. Während eines Builds hilft das der Assistenz, mit dem tatsächlichen Katalog, Content und der unterstützten Konfiguration des Shops zu arbeiten, anstatt mit einem getrennten Satz Demo‑Daten zu raten. Der Zugriff bleibt innerhalb des Shops und der von dir gewählten Berechtigungen. Das deployte Frontend benötigt dann eine implementierte Selldone‑API oder Service‑Integration. MCP hilft der Assistenz bei Entwicklung und genehmigten Shop‑Aufgaben; es macht aus der Demo‑Checkout‑Schaltfläche nicht automatisch einen Live‑Zahlungsfluss. Für Jelly Bites bedeutet das, Menü und Bestellablauf an reale Commerce‑Dienste anzubinden. Für Mockup Studio heißt es, die Vorlage des Verkäufers und das gewählte Design der Kundin zuverlässig zu speichern und dieses Design mit dem richtigen Produkt und der Bestellung zu verknüpfen. Die Kundenerfahrung kann unverwechselbar bleiben, während Selldone die Commerce‑Basis stellt. Es gibt verschiedene Wege, darauf aufzubauen. Ein komplettes Storefront kann über den Selldone Layout‑Workflow angepasst werden, während eine spezialisiertere Anwendung ein separates Frontend nutzen kann. Die Selldone Genesis Übersicht erklärt diese Wege. Die richtige Wahl hängt davon ab, wie viel des bestehenden Shops du behalten möchtest und wie ungewöhnlich die Customer Journey sein muss.

Gib deiner KI ein besseres erstes Briefing

Du kannst mit folgender Anfrage in einer Codierumgebung beginnen. Ersetze die eckigen Klammern durch deine eigenen Geschäftsdaten.

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [mein Unternehmen]. 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 [meine Marke, Produkte und Anforderungen], keeping it usable on mobile.

Sobald du eine Richtung gewählt hast, bitte um den nächsten Meilenstein:

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.

Diese Prompts sind der Beginn eines Build‑Dialogs. Ein guter Agent wird das Projekt inspizieren, fehlende Teile identifizieren und sie mit dir durchgehen. Für einen ersten Restaurant‑Meilenstein könntest du um eine komplette Bestellung bitten: Ein Element anpassen, den korrekten Preis sehen, in einem unterstützten Test‑Zahlungsfluss bezahlen und die vom Geschäft empfangene Bestellung verifizieren. Für eine Druckerei verfolgst du ein Design vom Upload über die Vorschau bis zur exakt gespeicherten Artwork‑Datei, die an die Bestellung gehängt wird. Hier kann ein kundenspezifisches Storefront auch wirtschaftlicher werden. Bestehender Interaktionscode und eine Commerce‑Plattform reduzieren den Umfang dessen, was du neu bauen musst. Die endgültigen Kosten hängen weiter vom Design, den Integrationen, Assets, Hosting und Tests ab, die dein Geschäft braucht. Die MIT‑Lizenz macht den Beispiel‑Quellcode wiederverwendbar; sie umfasst nicht diese zusätzlichen Dienste gratis.

Bau es selbst oder bring die Idee zu unserem Team

Wir werden die Modern Shop‑Beispiele weiter verfeinern und die Sammlung ausbauen. Du kannst mit den jetzt verfügbaren Versionen starten, ein komplettes Erlebnis anpassen oder genau den Teil übernehmen, der dein Problem löst. Wenn du lieber Spezialisten das Ergebnis an deine Marke anpassen lassen willst, kannst du ein Angebot für ein maßgeschneidertes Storefront vom offiziellen Setup‑ und Designteam von Selldone anfordern. Bring die Demo, die dir gefällt, deine Produkte und die gewünschte Kundenerfahrung mit. Wir können Design und Umsetzung gemeinsam vor Projektbeginn abstecken. Vielleicht beginnt dein Shop mit einem Burger, der sich auf dem Bildschirm auseinandernehmen lässt. Vielleicht beginnt er mit einer kleinen Illustration auf einer Tasse. Öffne die Demos, verändere etwas und sieh, welche Idee sich wie dein Geschäft anfühlt. Explore Modern Shop on GitHub · Try the 3D food builder · Try Mockup Studio