Vibecoding für Kreative - wie ich eigene Webtools & Apps mit meinen Illustrationen gebaut habe!

Ich bin Kommunikationsdesignerin, keine Entwicklerin. Im Studium habe ich mal eine eigene Website mit HTML & CSS gebaut und kenne so ein paar Grundlagen, aber ganz ehrlich: Code hat mich immer ein bisschen eingeschüchtert.

Seit es Studio Umi gibt, hatte ich aber immer schon kleine hilfreiche Tools im Kopf. Ich wollte zum Beispiel einen einfachen Zufallsgenerator für meine Website selbst machen und habe damals sogar Entwickler angefragt. Am Ende war mir das alles zu teuer. Was mich dabei richtig gewurmt hat, war dieses Gefühl: Da existiert eine ganz andere Welt, zu der ich irgendwie keinen Zugang habe.

Und wer mich kennt weiß: Ich liebe es, mich in Dinge reinzufuchsen und Sachen wirklich zu verstehen. Und genau das nicht zu können…das hat mich ziemlich lang ziemlich frustriert. Kennst du das? Eine Idee im Kopf, und es will einfach nicht klappen. Nervig!

Dann kam KI. Und ich habe angefangen, einfach mal ChatGPT zu fragen. Ohne Plan, ohne Vorkenntnisse, nur mit einer Idee im Kopf und dem Mut, draufzutippen.

Das Ergebnis? Vor zwei Jahren habe ich mir meinen eigenen Patterntester gebaut. Dann einen Farbpaletten-Generator. Und noch ein paar kleine Tools & Apps, die meinen kreativen Alltag wirklich erleichtern.

In diesem Artikel zeige ich dir, wie das funktioniert hat und warum du das auch kannst, auch wenn du noch nie eine einzige Zeile Code geschrieben hast.

Wichtiger Hinweis vorab: KI macht Fehler. Für alles, was wirklich live und professionell gehen soll, empfehle ich im Zweifel immer, einen Entwickler mit dazu zu nehmen. Aber das soll dir keine Angst machen selbst zu experimentieren - fang einfach mutig mit kleinen eigenen Ideen an. Du musst am Ende ja nichts veröffentlichen!

Aber jetzt: Starten wir rein! 🎉

Was ist Vibecoding eigentlich?

"Vibecoding"…das klingt vielleicht erstmal nach Techie-Slang. Aber das Konzept ist eigentlich ziemlich simpel: Du beschreibst einer KI in normaler Sprache, was du haben möchtest. Die KI schreibt den Code. Du testest, gibst Feedback, die KI verbessert. Repeat.

Kein Studium. Keine Programmierkurse. Nur ein Gespräch, wie mit einem sehr geduldigen Entwickler, der dir nie sagt "Das geht nicht" oder "Das ist zu kompliziert".

Ich nenne es gerne: die kreative Abkürzung ins Digitale.

Wichtig: KI ist dabei immer ein Werkzeug! Kein Ersatz für deine Kreativität. Die Idee kommt von dir. Die Entscheidungen kommen von dir. Die KI setzt nur um, was du ihr sagst. Das ist ein riesiger Unterschied.

Meine drei eigenen Tools - entstanden aus echten Alltagsproblemen

Tool 1: Der Patterntester

Wer Muster in Procreate erstellt, kennt das Problem: Du hast eine wunderschöne Kachel gebaut – aber wie sieht das Muster eigentlich als Gesamtbild aus? In Procreate kannst du das schlecht testen, ohne extra Schritte zu machen.

Meine Lösung: Ich habe ChatGPT gefragt, ob es ein kleines Tool gibt, in das ich mein Musterbild hochladen und es als Kachelmuster sehen kann – direkt im Browser, ohne extra App.

Meine "Anfrage" an ChatGPT war ungefähr so: "Ich möchte ein einfaches Webtool, in das ich ein Bild hochladen kann und es dann als Kachelmuster auf einer Fläche sehe. Kann du das für mich bauen?"

Ein paar Gesprächsrunden später hatte ich genau das: meinen eigenen Patterntester. Und der läuft heute auf studio-umi.de/patterntester – kostenlos für alle.

Tool 2: Der Farbpaletten-Generator

Farben sind meine große Leidenschaft und gleichzeitig der Bereich, in dem ich mir manchmal selbst im Weg stehe. Zu viele Möglichkeiten, zu viele Entscheidungen.

Ich wollte ein Tool, das mir eine harmonische Farbpalette vorschlägt - passend für meine Illustrationen. Etwas Einfaches, Übersichtliches, ohne den Overhead großer Designprogramme.

Ich habe Claude gefragt. Iteriert. Angepasst. Farben nachjustiert. Das Ganze wurde ein bisschen komplexer als der Patterntester.

Heute ist mein Farbpaletten-Generator unter studio-umi.de/farbpaletten-generator für alle verfügbar. Ein Tool, das aus meiner eigenen Frustration entstanden ist und das ich jetzt jeden Tag selbst nutze.

Tool 3: Meine eigene Einkaufs-App – mit selbst gemalten Illustrationen

Einmal angefangen, wollte ich mehr. Ich habe mir kleine Helferlein gebaut, die sonst niemand von der Stange anbietet. Eine App, die Einkaufszettel auswertet und dir ausspuckt, wo du sparen könntest und ein Tool, dass Eltern die Betreuungstage ausrechnet.

Keine Idee wäre entstanden, wenn ich auf "jemanden finden" gewartet hätte, der das für mich umsetzt. Vibecoding hat mir die Unabhängigkeit gegeben, einfach mal zu machen.

Wie ich konkret vorgegangen bin – mein Prozess

Damit du dir das besser vorstellen kannst, hier mein Ablauf ganz ehrlich und ohne Schönreden:

•       Ich starte immer mit einer konkreten Frustration. Nicht "ich will was bauen", sondern "ich will dieses eine Problem lösen". Ich erstelle dann ein Dokument nach der Jobs-to-be-Done (JTBD)-Methode. (Siehe unten)

•       Dann schreibe ich ChatGPT, Claude oder direkt in Reptil eine möglichst klare Beschreibung - fast wie eine Aufgabe an eine Assistenz. Was soll das Tool können? Wer benutzt es? Wie soll es aussehen?

•       Die KI liefert Code. Ich schaue dann Funktioniert es? Was fehlt noch?

•       Dann folgen Feedback-Runden. "Das Bild ist zu klein, mach es größer." "Die Farbe passt nicht zu meiner Marke, bitte ändere sie auf #2B3210." – ganz normaler Dialog.

•       Irgendwann bin ich zufrieden. Und dann geht das Tool online.

Wie lange hat das gedauert? Der Patterntester war an einem Nachmittag fertig. Der Farbgenerator über mehrere Sessions verteilt – vielleicht 4–5 Stunden insgesamt. Keine Nachtschichten, kein Frust.

Was ist die Jobs to be Done Methode?

Stell dir vor, du kaufst einen Bohrer. Brauchst du wirklich einen Bohrer? Wahrscheinlich nicht - du willst ein Loch in der Wand. Und eigentlich willst du das Bild aufhängen. Und eigentlich willst du, dass dein Zuhause sich endlich wie du anfühlt.

Genau darum geht es bei der Jobs to be Done Methode (kurz: JTBD). Sie stammt aus der Produktentwicklung und fragt nicht "Was kaufen Menschen?" – sondern "Warum kaufen sie es wirklich?"

Die Idee dahinter: Wir "heuern" Produkte und Tools an, um einen bestimmten Job zu erledigen. Einen Fortschritt in unserem Leben zu machen. Und dieser Job hat immer drei Ebenen: eine praktische (Was soll funktionieren?), eine emotionale (Wie will ich mich dabei fühlen?) und eine soziale (Wie will ich wahrgenommen werden?).

Für Vibecoding - also das Bauen eigener kleiner Apps und Tools mit KI-Unterstützung – ist das Gold wert. Denn bevor du den ersten Prompt schreibst, lohnt sich eine ehrliche Frage: Welchen Job soll dieses Tool für mich eigentlich erledigen? Nicht welche Features es haben soll. Sondern was sich in deinem Alltag wirklich verändern soll, wenn es funktioniert.

Das klingt simpel, aber es ist der Unterschied zwischen einem Tool, die du drei Tage später nie wieder öffnest, und einer, die du wirklich nutzt.

Nehmen wir zum Beispiel meinen Patterntester. Der oberflächliche Job wäre "Ich will sehen, ob mein Muster nahtlos wiederholt." Aber mit JTBD gedacht steckt da viel mehr drin.

Funktional will ich schnell und ohne Umwege prüfen, ob mein Procreate Pattern wirklich funktioniert - bevor ich es hochlade, drucke oder an einen Kunden schicke.

Emotional will ich dieses nervige Zittern loswerden, das entsteht wenn man ein Muster stundenlang gezeichnet hat und dann nicht sicher ist, ob die Kanten passen.

Und sozial - ich will Muster hochladen können, die professionell wirken. Keine sichtbaren Nähte, kein "Oops"-Moment vor dem Kunden.

Der Job ist also nicht "Pattern anzeigen" - der Job ist Sicherheit vor dem Anwenden auf Produkten.

Und genau das macht ein gut gebautes Tool spürbar.

Ein Missverständnis, das ich gerne ausräumen möchte

KI macht dich nicht kreativer. Das klingt vielleicht seltsam in einem Artikel über KI-Tools – aber ich meine es ernst.

Kreativität kommt von dir. Dein Gespür für Farben, dein Stil, deine Ideen, dein Auge – das kann keine KI ersetzen und das soll sie auch nicht.

Was KI kann: den technischen Umweg abkürzen. Den Moment überbrücken zwischen "ich habe eine Idee" und "es existiert". Das ist schon eine Menge – aber es ist Unterstützung, keine Übernahme.

Ich nutze KI wie ein gutes Werkzeug. So wie ich Procreate nutze, um Ideen aus meinem Kopf aufs iPad zu bringen – nicht um mir das Zeichnen abzunehmen. Der Pinsel macht das Bild nicht. Ich mache das Bild.

Womit du anfangen kannst – ganz konkret

Du brauchst keinen Account bei Replit, um loszulegen. Fang einfach mit einem Gespräch an:

•       Gehe auf chat.openai.com (ChatGPT) oder claude.ai (Claude) – beides kostenlos nutzbar.

•       Schreibe, welches kleine Tool oder welche Hilfe du dir wünschst. So konkret wie möglich.

•       Sieh, was passiert. Frage nach, passe an, spiel herum.

Meine Empfehlung für den Einstieg: Frag die KI nicht sofort nach Code. Fang mit Ideen an. "Ich möchte mehr Struktur in meinen Content-Workflow bringen – hast du Vorschläge?" oder "Ich suche einen einfachen Weg, meine Muster-Farbpaletten zu dokumentieren." Die Gespräche, die daraus entstehen, zeigen dir oft schon den Weg.

Dein KI-Setup für kreatives Arbeiten – gemeinsam, live, auf dich zugeschnitten

Du merkst: Vibecoding ist kein Hexenwerk. Aber es hilft enorm, einmal live dabei zu sein – zu sehen, wie das in der Praxis aussieht, Fragen stellen zu können und direkt auszuprobieren.

Genau dafür habe ich meine Vibecoding-Sprechstunde ins Leben gerufen.

In der Vibecoding-Sprechstunde bauen wir gemeinsam live dein persönliches KI-Setup – zugeschnitten auf deinen kreativen Alltag.

Was heißt das konkret?

•       Wir schauen gemeinsam, wo KI in deinem Workflow wirklich Sinn ergibt – und wo nicht.

•       Wir richten passende Tools ein: von einfachen ChatGPT-Prompts bis hin zu kleinen Helfern wie meinem Patterntester.

•       Du lernst, wie du KI als kreative Assistenz nutzt, ohne dich von ihr abhängig zu machen.

•       Am Ende der Session hast du ein konkretes Setup, das du sofort nutzen kannst.

Für wen ist das? Für kreative Menschen, die neugierig auf Vibecoding und KI sind - aber bisher nicht wussten, wo sie anfangen sollen. Keine Vorkenntnisse nötig. Nur Offenheit und eine Idee, was du dir wünschst.

Interesse? Dann melde dich gerne direkt bei mir – ich freue mich auf dich.

Wenn du Lust hast, mehr zu sehen: Schau dir meinen Patterntester und den Farbpaletten-Generator auf studio-umi.de an – beide kostenlos. Und wenn du Fragen hast oder mir zeigen möchtest, was du gebaut hast: Ich bin auf Instagram @studio_umi immer für dich da.

Alles Liebe,

deine Sophia