Diesmal ist es eine Ramen-Marke. Das Katzenlogo, der Markenauftritt, die Website und der Launch: Alles habe ich mit KI umgesetzt. Wer die Website öffnet, sieht als Erstes eine Katze, die Ramen isst. Weiter unten folgen die Speisekarte, die Geschichte des Ladens und der Weg dorthin – auf Japanisch, Chinesisch und Englisch. Hier ist das Video, oder Sie lesen unten die schriftliche Fassung.
Play videoIch möchte zeigen, wie eine einzige Figur das ganze Projekt trägt: wie die Katze aus einem Stapel Entwürfe ausgewählt wurde und dann zu Ladenfront, Verpackung und der nudelessenden Schleife ganz oben auf der Website wurde.
Das Briefing
Die Aufgabe: eine Ramen-Marke rund um eine Katze als Hauptfigur neu gestalten und diese Identität dann auf die Website der Marke übertragen.
Die Website selbst ist schlicht. Gäste sollen ein Gefühl für den Laden bekommen, die Speisekarte durchsehen und Adresse und Öffnungszeiten finden. Und vom ersten Tag an brauchte sie drei Sprachen: Japanisch, Chinesisch und Englisch.
Die Karte hat einige Gerichte (Ramen mit Brühe, Aburasoba ohne Brühe, Toppings, ein Menü), daher bestand ein Teil der Arbeit darin, sie so zu ordnen, dass man sie schnell überblickt.
Damit war die erste Frage die Figur: Wie sollte diese Katze eigentlich aussehen?
Von Referenzen zu einer Katze mit leerem Blick
Ich habe zuerst Katzen-Referenzen in ganz unterschiedlichen Stilen gesammelt, nur um zu sehen, was mir gefällt, bevor ich mich auf eine Richtung festlege.
Dann habe ich meine Auswahl hochgeladen und der KI gesagt: Ich möchte eine Ramen-Marke mit einer Katze als Gesicht; erzeuge aus diesen Referenzen ein paar Logo-Entwürfe.
In dieser Phase halte ich den Prompt bewusst offen. Katze, Ramen, eine grobe Vorstellung vom Stil und Raum zum Ausprobieren. Bringt eine Runde nichts, was mir gefällt, generiere ich neu oder tausche die Referenzen aus. Die Auswahl im Video ist so entstanden, Runde für Runde.
Jede Katze hatte eine etwas andere Silhouette, einen anderen Ausdruck und eine andere Art, mit den Nudeln zu verschmelzen. Bei der Auswahl habe ich mir zwei Fragen gestellt:
- Bleibt diese Katze im Gedächtnis?
- Funktioniert sie auch über das Logo hinaus – auf der Karte, der Verpackung, der Website?
Wir haben uns für diese schwarze Katze entschieden. Sie wirkt ein wenig verpeilt, und genau wegen dieses Ausdrucks wollte ich mit ihr weitermachen.
Aus einer Katze wird eine Marke
Als Nächstes habe ich das Logo zu einem vollständigen Erscheinungsbild ausgebaut.
Ich habe die ganze Katze behalten und zusätzlich ihre Augen als flaches, einfarbiges Zeichen herausgelöst. So hat jedes Medium zwei Optionen: die ganze Katze, wo Platz ist, oder nur die Augen, wo keiner ist – und die Figur ist trotzdem erkennbar.
Rund um diese beiden Elemente habe ich ein Ladenschild, einen Leuchtkasten, die Speisekarte, eine Take-away-Tüte und Geschirr generiert.
Nebeneinandergelegt beantworten sie schnell die eigentliche Frage: Kann diese Katze eine ganze Marke tragen, und wirken all diese Teile wie aus einem Guss? (Zur Klarstellung: Das sind Mockups, die zeigen, wie die Identität angewendet wird – keine Fotos eines fertigen Ladens.)
Erst die Website planen, dann ein Designsystem
Vor jedem Design habe ich die Struktur geplant. Es ist eine One-Page-Website mit vier Teilen, von oben nach unten:
- Hero, damit die Katze das Erste ist, was hängen bleibt
- Speisekarte
- Über uns
- Standort, mit Karte und Öffnungszeiten
Dann das Setup: ein neues Repository auf GitHub, ein lokaler Projektordner und ein neues Design System in Claude Design.
Ich habe das Projekt-Briefing übergeben und die Markenassets hochgeladen: das Logo, die Katze, die Anwendungs-Mockups. Das Briefing beschrieb, was auf die Website gehört, die drei Sprachen und wie die Assets eingesetzt werden sollen. Alles, was bis dahin gestaltet war, wurde zum Input für diesen Schritt.
Zurück kam ein ziemlich vollständiges Designdokument: der Gesamtstil, die wichtigen Details und die Regeln für das Projekt. Von hier an konnte die Entwicklung sich daran halten.
Das Design an Claude Code übergeben
Als die Designdatei fertig war, habe ich auf Teilen geklickt, das Senden an Claude Code gewählt, den lokalen Modus mit den relevanten Dateien ausgewählt und den Übergabe-Prompt kopiert, den es mir gab.
Dann eine neue Sitzung, mit dem lokalen Projekt als Arbeitsverzeichnis. Ich habe den Übergabe-Prompt und die URL des GitHub-Repositorys eingefügt und meine eigenen Entwicklungsnotizen ergänzt: die One-Page-Struktur, die drei Sprachen und wie die Markenassets eingesetzt werden.
Technisch ist es eine Next.js-Website, als reine statische Dateien exportiert, mit GSAP und Lenis für die Scrollanimationen. Jede Sprache hat ihre eigene URL (/ja/, /zh/, /en/), und die gesamte Karte liegt in einer Datei, in der jedes Gericht seinen Namen in allen drei Sprachen hat.
Die erste Version kam dem Gesamtstil nahe, und die Struktur folgte dem Plan. Weiter unten fehlte aber noch einiges: Die Karte war reiner Text, Standort und Öffnungszeiten waren leer. Sie zeigte mir die Form der Website. Jetzt brauchte jeder Abschnitt die echten Inhalte und Markenassets.
Die Katze Ramen essen lassen
Angefangen habe ich mit dem Hero. Ihn sieht jeder zuerst, und hier wollte ich der Katze am meisten Persönlichkeit geben. Sie sollte sich bewegen: eine Katze, die tatsächlich Ramen isst.
Also habe ich den Hero in drei Ebenen aufgeteilt: Text, Hintergrund und die Katze. So getrennt lässt sich die Katze für sich animieren, während Text und Hintergrund völlig ruhig bleiben.
Dann habe ich zwei Bilder der Katze in leicht unterschiedlichen Posen generiert, als erstes und letztes Bild einer Animationsschleife.
Ich habe Claude die Ebenen gegeben, beschrieben, wie sich die Katze bewegen und wo sie auf der Seite landen soll, und es Higgsfield für die Animation aufrufen lassen. Praktisch hieß das zwei kurze Clips: einer von Pose A zu Pose B, einer von B zurück zu A. Hintereinander abgespielt ergeben sie eine Schleife. Beide wurden vor einem flachen blauen Hintergrund generiert, damit sich die Katze sauber freistellen ließ, mit ein paar Frames Überblendung an jeder Naht.
Ein erstes und letztes Bild garantiert aber noch keine gute Schleife. Achten Sie auf die tatsächliche Bewegung, besonders auf den Moment, in dem sie endet und zum Anfang springt. Genau dort wirkt eine Schleife nahtlos – oder kaputt.
Das ist die Version, die auf die Website kam:
Auf der Seite läuft sie mit transparentem Hintergrund über dem Hero, mit einem Standbild als Fallback. Im Vergleich zum ursprünglichen statischen Hero hat die Website plötzlich eine eigene Persönlichkeit. Das ist mein Lieblingsteil des ganzen Projekts: die Figur, die wir ganz am Anfang ausgewählt haben, bewegt sich endlich auf der Website.
Derselbe Trick kam im Footer noch einmal zum Einsatz: eine Katze, die vom unteren Seitenrand hervorlugt – mit einem einzigen Bild als erstem und letztem Frame, damit sich die Schleife von selbst schließt.
Der Rest
Nach dem Hero habe ich die übrigen Abschnitte nacheinander bearbeitet. Es hilft, Anfragen aufzuteilen: erst die Karte, dann der Standort, jedes Mal auf eine bestimmte Stelle zeigen und sagen, was sich ändern soll, und dann auf der Seite nachsehen.
Jede Sprache braucht einen eigenen Durchgang. Dieselbe Überschrift wird in einer anderen Sprache länger oder kürzer, also achten Sie neben den Wörtern auf Zeilenumbrüche, das Layout der Karte, die Buttons und die Navigation.
Und prüfen Sie vor dem Launch Desktop und Smartphone getrennt. Die Karte muss gut lesbar sein, und Praktisches wie Karte und Öffnungszeiten muss leicht zu finden sein. Genau das nutzen Gäste tatsächlich.
Deployment auf Railway
Als Hosting habe ich Railway gewählt, weil der Einstieg dort leicht ist. Ich habe Claude die URL der Deployment-Anleitung von Railway gegeben und es gebeten, das Projekt danach zu deployen. Die Schritte, die Sie selbst erledigen müssen – Projekt auswählen, Konto autorisieren, Einstellungen ausfüllen –, habe ich übernommen, sobald sie auftauchten.
Ist die Website live, öffnen Sie die echte URL und gehen alles noch einmal durch. Prüfen Sie, ob Seiten und Bilder laden, die Animation läuft und Sprachwechsel und wichtigste Links funktionieren. Eine Website, die lokal funktioniert, ist kein Beweis, dass es die deployte auch tut.
Was alles verbindet
Im Rückblick, von den ersten Katzen-Referenzen über Logo und Markenteile bis zur Website, die man jetzt besuchen kann: Es hat funktioniert, weil die Schritte miteinander verbunden blieben.
- Früh breit erkunden. Lassen Sie die KI in der Konzeptphase viele Richtungen ausprobieren.
- Sich auf eine Figur festlegen. Nachdem die Katze feststand, wurde jedes Asset um genau diese eine gebaut.
- Assets mit klarem Briefing übergeben. Designsystem und Entwicklung bauten beide auf dem Vorherigen auf.
- Das echte Ergebnis prüfen, Abschnitt für Abschnitt, bis es stimmt.
Mehr von der fertigen Marke und die vollständige Startseite sehen Sie auf der Projektseite von Neko Ramen.
KI war an jeder Phase dieses Projekts beteiligt. Meine Hauptarbeit war, die Richtung zu wählen, die Anforderungen zu formulieren und zu beurteilen, ob jedes Ergebnis zur Marke passt.
Welchen Teil soll ich vertiefen: das Markendesign, den Bau der Website oder die Katzenanimation? Schreiben Sie es mir in die YouTube-Kommentare, und abonnieren Sie unten, um den nächsten Beitrag zu bekommen.
