So erstellst du einen Online-Shop mit KI

Ein kleiner Shop funktioniert am besten, wenn du zuerst die Grundlagen festlegst. KI kann den Code schnell erstellen, braucht dafür aber trotzdem ein klares Briefing.

Notiere dir:

• was du verkaufst
• wie viele Produkte du in Version 1 haben willst
• ob Kunden direkt kaufen oder nur eine Anfrage senden können
• welche Seiten du brauchst
• welche Informationen jedes Produkt enthalten soll

Für einen einfachen Shop braucht die erste Version meist:

• eine Startseite
• eine Shop- oder Katalogseite
• eine Produktdetailseite
• eine Warenkorbseite oder einen Checkout-Button
• eine Über-uns- oder Kontaktseite

Entscheide außerdem, wie Produktdaten verwaltet werden. Wenn du nur wenige Produkte hast, kannst du mit hart codierten Produktinhalten auf der Website starten. Wenn du später Produkte, Kundenkonten oder Bestelldaten verwalten willst, wird eine Datenbank relevant.

Halte den ersten Build bewusst klein. Drei bis sechs Produkte reichen völlig, um den Ablauf zu testen.

In Moremade beschreibst du die Website in natürlicher Sprache, und der KI-Agent schreibt den React- und Tailwind-Code. Danach erhältst du eine Live-Vorschau und kannst die Seite per Chat weiter anpassen.

Dein erster Prompt sollte Struktur, Stil und die wichtigsten Interaktionen abdecken. Sei konkret bei dem, was auf der Seite vorhanden sein soll, aber versuche nicht, jedes Pixel festzulegen.

Ein hilfreicher erster Prompt enthält:

• die Art des Shops
• die zu erstellenden Seiten
• die anzuzeigenden Produktfelder
• den Layout-Stil
• das Checkout-Verhalten
• Tonalität oder Marken-Vorgaben für Inhalte

Beispiel:

Erstelle einen kleinen Online-Shop für eine Marke für handgemachte Kerzen. Lege eine Startseite, eine Shop-Seite, eine Produktdetailseite, eine Warenkorbseite und eine Kontaktseite an. Verwende ein klares, minimalistisches Layout mit warmen neutralen Farben und gut lesbaren Produktkarten. Füge sechs Beispielprodukte mit Name, Preis, kurzer Beschreibung, Duftnoten und Platzhalter-Bildern hinzu. Die Produktseite soll Bilder, Beschreibung, Inhaltsstoffe und einen In-den-Warenkorb-Button zeigen. Der Warenkorb soll das Ändern der Menge und die Anzeige des Zwischensums ermöglichen. Gestalte die Website responsiv und auf dem Handy leicht bedienbar.

Nach dem ersten Build nutzt du die Live-Vorschau als Bearbeitungstool. Starte nicht von vorne, außer die Struktur ist völlig falsch. Meist ist es besser, kleine, direkte Anpassungen zu machen.

In Moremade kannst du Änderungen im Chat ansprechen, mit dem visuellen Inspektor auf ein Element zeigen und es bearbeiten und bei Bedarf im Code-View nachsehen, was sich geändert hat.

Gute Folge-Prompts sind konkret und lokal. Bitte immer nur um eine Verbesserung nach der anderen.

Beispiele:

• "Ändere das Produktgrid auf dem Desktop auf 3 Spalten und auf dem Tablet auf 2. Sorge dafür, dass alle Produktkarten gleich hoch sind und der In-den-Warenkorb-Button unten bleibt."
• "Verschiebe auf der Produktseite die Duftnoten über die Inhaltsstoffe, füge unter dem In-den-Warenkorb-Button einen kleinen Hinweis zum Versand hinzu und mach das Hauptbild auf dem Desktop größer."
• "Vereinfache den Hero-Bereich der Startseite. Verwende eine kürzere Überschrift, einen unterstützenden Satz und einen primären Button, der zur Shop-Seite führt."

In dieser Phase entsteht der größte Teil der Qualität. Achte auf Abstände, Produkt-Hierarchie, Button-Beschriftungen, Empty States und darauf, ob der Warenkorb-Ablauf verständlich ist.

Nicht jede erste Version braucht ein vollständiges Backend.

Wenn du nur einen Shop als Broschüre oder eine klickbare Demo möchtest, kannst du die Produkte im Frontend-Code belassen und dort aufhören. Wenn Kunden bezahlen sollen, füge Stripe hinzu. Wenn du Anmeldung, gespeicherte Nutzerdaten oder gespeicherte Produktdatensätze brauchst, füge Supabase hinzu.

Moremade hat dafür integrierte Anbindungen.

Nutze Stripe, wenn du brauchst:

• Checkout mit echten von dir festgelegten Preisen
• einen einfachen Zahlungsweg für einen kleinen Katalog

Nutze Supabase, wenn du brauchst:

• Kunden-Login
• eine Datenbank für Produkte oder Bestellungen
• Dateispeicherung

Für viele kleine Shops ist Stripe die erste echte Integration. Ein sinnvoller Folge-Prompt wäre:

• "Verbinde den Checkout mit Stripe anhand der auf der Website angezeigten Produktpreise. Behalte die Warenkorbseite bei, zeige vor dem Checkout eine Bestellübersicht und mach die Checkout-Buttons auf dem Handy klar erkennbar."

Wenn du später Kundenkonten oder inventarbezogene Daten brauchst, ist das ein sinnvoller Zeitpunkt, Supabase einzubinden, statt es in Version 1 zu erzwingen.

Die meisten kleinen Shops werden zuerst auf dem Handy beurteilt, auch wenn du auf dem Desktop gestaltet hast.

Prüfe diese Punkte sorgfältig:

• Höhe des Hero-Bereichs und Sichtbarkeit der Buttons
• Lesbarkeit der Produktkarten
• Bildausschnitte auf Produktseiten
• Mengenregler im Warenkorb
• Position des Checkout-Buttons
• Formularfelder und Touch-Ziele

Bitte in einfacher Sprache um Korrekturen. Zum Beispiel:

• "Mach das mobile Menü einfacher, mit größeren Touch-Zielen, und lass das Warenkorb-Symbol in der Kopfzeile sichtbar."
• "Staple auf Smartphones das Produktbild über die Produktdetails und reduziere das Seitenpadding etwas."

Wenn etwas nicht ganz stimmig wirkt, du es aber nicht gut beschreiben kannst, nutze zuerst den visuellen Inspektor, zeige auf das Element und bitte danach um die Änderung.

Wenn die Website richtig aussieht, veröffentliche sie.

Moremade kann mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. In bezahlten Tarifen kannst du eine eigene Domain verbinden. Domains kannst du auch direkt in Moremade kaufen.

Ein einfacher Veröffentlichungsablauf ist:

• auf die kostenlose Subdomain veröffentlichen, um zu prüfen
• Links, Warenkorbablauf und Checkout testen
• die echte Domain verbinden, wenn der Shop bereit ist

Wenn du eine Kopie außerhalb der Plattform behalten willst, kannst du den vollständigen Quellcode jederzeit als ZIP exportieren oder zu GitHub pushen. Die Websites bestehen aus echtem React- und Tailwind-Code, du bist also nicht an ein proprietäres Format gebunden.

Der größte Fehler ist, die KI zu früh mit zu viel zu beauftragen.

Vermeide diese Fehler:

• mit 20 Funktionen statt mit einem einfachen Katalog und Checkout zu starten
• einen vagen Prompt wie „mach mir einen Online-Shop“ ohne Produkt- oder Seitendetails zu schreiben
• Anmeldung hinzuzufügen, bevor klar ist, warum Kunden Konten brauchen
• mehrere Designrichtungen in einer Anfrage zu mischen
• Mobile-Tests bis ganz zum Schluss aufzuschieben
• Struktur und Styling im selben Prompt zu ändern, wenn du ein Problem debuggen willst

Ein besseres Muster ist, schrittweise zu bauen:

1. Erstelle die grundlegende Shop-Struktur.
2. Korrigiere Layout und Inhalte.
3. Füge Stripe hinzu, wenn Kunden jetzt bezahlen sollen.
4. Füge Supabase nur hinzu, wenn du gespeicherte Daten oder Login brauchst.
5. Veröffentlichen, testen und dann weiter verbessern.

So bleibt das Projekt verständlich und du vermeidest es, unnötig Build Units für vermeidbare Neuschreibungen zu verbrauchen.