Ein Onlineshop mit Claude – vom Design bis zum Launch

Diesmal geht es um einen Shop für Tellu Hima, eine Marke für Räucherwerk. Logo, Verpackung und Produktanimationen, der Shop, die Zahlungen und der Launch: Alles davon habe ich mit KI gebaut. Hier ist das Video – oder Sie lesen unten die schriftliche Fassung.

Play video

Spannend ist nicht, einen Shop zum Laufen zu bringen. Spannend ist alles, was zwischen einer funktionierenden Shop-Vorlage und einer Website liegt, die sich wirklich nach Ihrer Marke anfühlt.

Was Sie vor dem Start brauchen

Zuerst einen Markennamen und eine Domain. Meine registriere ich meist bei Hostinger. Dann das Werkzeug:

• GitHub für den Code
• Higgsfield für die Markenassets
• Claude als wichtigsten Coding-Assistenten
• Railway als Hosting für die fertige Website
• Ein PayPal-Geschäftskonto für die Zahlungen

Warum nicht Stripe? Stripe funktioniert gut. Es ist aber nicht überall verfügbar, und ich wollte zeigen, wie es mit PayPal weitergeht, falls Stripe für Sie keine Option ist. Egal, wofür Sie sich entscheiden: Prüfen Sie, ob Ihr Konto die Zahlungen unterstützt, die Sie annehmen müssen, bevor Sie irgendetwas darum herum bauen.

Die Marke: vom Rauch zum S

Ich habe mit der Geschichte und dem Gefühl begonnen, das die Marke haben sollte. Dann ließ ich die KI Referenzbilder und Konzepte erzeugen, um eine Richtung zu finden, bevor ich das Logo überhaupt angefasst habe.

Das Logo entstand aus dem Rauch, der von brennendem Räucherwerk aufsteigt. Ich habe diese Form so lange vereinfacht, bis daraus ein S wurde. Von dort aus kam der Rest: die Hauptfarben und wie sie zusammenspielen, Muster für jede Produktlinie, Verpackungen und Mockups. Zum Schluss 3D-Modelle und Animationen der Schachteln, in den echten Verpackungsmaßen und mit Materialien nah am Original, damit sie auf der Website eingesetzt werden konnten.

Jedes Asset in dieser Phase war KI-generiert. Meine Aufgabe war, die Richtung vorzugeben, das Brauchbare auszuwählen und immer wieder Änderungen anzufordern.

Mehr Bilder zu erzeugen ergibt aber noch keine Marke. Sie müssen sich trotzdem fragen:

• Sehen diese Assets aus, als gehörten sie zusammen?
• Passen Verpackung, Farben und Website zueinander?
• Funktioniert ein Mockup, das großartig aussieht, auch in der echten Größe und im echten Material?

Diese Entscheidungen brauchen nach wie vor Design-Erfahrung. Mit KI sehe ich eine Idee viel früher. Mein Teil ist zu entscheiden, welche Ideen es wert sind, weiterverfolgt zu werden.

Warum ich den Shop vor dem Seitendesign gebaut habe

Normalerweise gestalte ich zuerst die Seiten und baue dann. Diesmal habe ich es umgedreht, weil ich mit dem fertigen E-Commerce-Framework von Payload gestartet bin.

Wenn Sie die Seiten zuerst gestalten oder sogar schon bauen und dann ein bestehendes Shop-Framework darunterschieben wollen, drehen Sie sich im Kreis. Entweder verbiegen Sie die Struktur des Frameworks, um das Design zu retten, oder Sie verbiegen das Design, damit es zum Framework passt.

Also habe ich die KI zuerst einen funktionierenden Payload-Shop aufsetzen und den Grundablauf zum Laufen bringen lassen. Danach konnte das Design um die echte Struktur des Shops herum entstehen – mit viel weniger Nacharbeit.

Das Setup ist einfach:

1. Legen Sie auf Ihrem Rechner einen Projektordner und auf GitHub ein neues Repository an.
2. Öffnen Sie Claude in diesem Ordner und schicken Sie Ihre Anforderungen, mit der Repository-URL am Ende.
3. Seien Sie konkret: auf dem E-Commerce-Framework von Payload aufbauen, das ist die Art von Shop, das sind die Seiten, so sollen Bestellungen und das Backend funktionieren.

Dann lassen Sie es laufen. Der erste Build dauert eine Weile.

Eine Testbestellung, einmal komplett durch

Als die erste Version stand, habe ich mir den Shop angesehen und mich im Backend angemeldet, um zu prüfen, ob die Seiten und die grundlegenden Funktionen laden.

Dass etwas lädt, ist aber nicht der Punkt. Die eigentliche Frage ist, ob eine Bestellung durchgeht. Ich habe die Zugangsdaten der PayPal-Sandbox in die Umgebungsdatei des Projekts eingetragen, den lokalen Server neu gestartet, ein Produkt ausgewählt, zur Kasse gegangen und mit einem Sandbox-Käuferkonto bezahlt. Die Zahlung ging durch, und dieselbe Bestellung tauchte im Backend auf.

Damit ist der Grundablauf belegt (Bestellung, Sandbox-Zahlung, Bestellung im Backend) – aber nur in einer Testumgebung. Bevor Sie echtes Geld annehmen, brauchen Sie noch die Live-Konfiguration und eine weitere Prüfrunde für Zahlungen und Bestellstatus.

Damit es nach der Marke aussieht

Jetzt funktionierte der Shop, sah aber aus wie eine Vorlage. Um das zu ändern, habe ich mit den Design-Werkzeugen von Claude Gestaltungsrichtlinien für die Website erstellt.

Ich habe das Projekt-Briefing zusammen mit Logo, Farben, Produktbildern, Verpackung und den übrigen Markenassets übergeben. Je genauer das Briefing, desto besser werden sie eingesetzt: welche Bilder vorangehen, wie Produkte präsentiert werden, was von Seite zu Seite gleich bleibt. Zurück kam ein Designdokument mit Seitenreferenzen und Richtlinien.

Das habe ich an Claude Code übergeben, auf das lokale Projekt mit den relevanten Dateien verwiesen, im selben Verzeichnis einen neuen Chat gestartet, die Übergabe eingefügt und meine eigenen Notizen ergänzt, was als Nächstes geändert werden soll.

Logo, Produktassets und Bildsprache waren jetzt in den Seiten, und die Website hatte nichts mehr mit der Vorlage gemein, von der sie ausgegangen war.

Vom schönen Schaufenster zum Shop, den man betreiben kann

Zwei Aufgaben blieben: die Seiten verfeinern und das ergänzen, was man braucht, um einen Shop tatsächlich zu betreiben. Die zweite Liste unterschätzt man leicht:

• Lieferländer. Das Framework brachte eine allgemeine Länderliste mit. Ich habe sie auf die Länder gekürzt, in die wir wirklich liefern können, damit niemand etwas bestellt, das wir nicht zustellen können.
• E-Mail. Die erste Version hatte überhaupt keinen E-Mail-Dienst – also keine Bestellbenachrichtigungen und keine E-Mails zum Zurücksetzen des Passworts. Dafür habe ich Resend angebunden.
• Anmeldung mit Google, damit das Einloggen leichter fällt.
• SEO und Google Analytics, dazu Cookie-Einstellungen, damit Besucher ihre Präferenzen verwalten können.
• Die Teile, die niemand sieht: Bot-Schutz und ein abgesicherter Zugang zum Admin-Bereich.

Nichts davon ist aufregend, aber wer von einer lokalen Demo zu einem Live-Shop kommen will, muss all das durchdenken.

Beim Design bin ich die Website Seite für Seite durchgegangen. Die Richtlinien gaben die Richtung vor, aber auf echten Seiten mussten Texte, Bilder und Layout noch nachjustiert werden. Also habe ich immer wieder geprüft und die KI um Änderungen gebeten, bis alles für den Launch so war, wie ich es wollte.

Die Startseite wurde zu einer einzigen bildschirmfüllenden Ansicht mit überarbeiteter Eröffnungsanimation; die Abschnitte darunter habe ich entfernt. Die meiste Aufmerksamkeit bekam die Über-uns-Seite: mehr KI-generierte Bilder in der Stimmung der Marke sowie neu geschriebene Inhalte und ein neues Layout, damit Geschichte, Produkte und Bilder zusammenpassen.

Auch beim Testen des kompletten Bestellablaufs hat mir die KI geholfen. Eine Bestellbestätigung kam in einem echten Postfach an, und die passende Bestellung lag im Backend. Seiten, Bestellungen und E-Mails waren endlich verbunden.

Deployment auf Railway

Railway hat eine Deployment-Anleitung, die für Claude geschrieben ist. Ich habe sie geöffnet, einen neuen Chat gestartet, Claude die URL gegeben und es gebeten, der Anleitung für dieses Projekt zu folgen.

Wenn es anhält und Sie etwas fragt, lesen Sie genau, worum es bei der Entscheidung wirklich geht: welches Projekt, welche Konfiguration, was Sie selbst ausfüllen müssen. Die Empfehlung der KI ist ein guter Ausgangspunkt, muss aber trotzdem zu Ihrem Projekt passen.

Nach dem Deployment erhalten Sie eine Live-URL. Gehen Sie dort die wichtigsten Seiten und den Bestellablauf noch einmal durch – dass es lokal funktioniert, heißt nicht, dass auch die Konfiguration im Deployment stimmt. Bevor Sie echte Zahlungen annehmen, stellen Sie PayPal auf den Live-Modus um und prüfen Zahlung, Bestellung im Backend und E-Mail-Benachrichtigung.

Letzter Schritt: Verbinden Sie die Domain, die Sie am Anfang registriert haben, und richten Sie das DNS so ein, wie Railway es vorgibt. Sobald Domain und HTTPS aktiv sind, öffnen Sie die Website unter Ihrer eigenen Domain und prüfen sie ein letztes Mal.

Was ich Ihnen mitgeben würde

Die Reihenfolge, die für mich funktioniert hat:

1. Die Markenrichtung festlegen.
2. Shop und Zahlungsablauf zum Laufen bringen.
3. Das Design verfeinern und die Funktionen ergänzen.
4. Deployen und dann alles noch einmal prüfen.

KI kann in jeder Phase viel Arbeit übernehmen. Aber sehen Sie sich nach jeder Phase das tatsächliche Ergebnis an. Passt das Design zusammen? Gehen Bestellungen durch? Kommen die E-Mails an? Funktioniert die Live-Website?

Welchen Teil soll ich vertiefen: das Markendesign, den Bau des Shops oder PayPal und das Deployment? Schreiben Sie es mir in die YouTube-Kommentare, und abonnieren Sie unten, um den nächsten Beitrag zu bekommen.