Stand April 2026
Vibe Coding mit kostenlosen KI-Tools – was ich als Designerin dabei gelernt habe
Webseiten bauen kenne ich. Mit Elementor, mit Page-Buildern, mit Templates. Aber mit HTML, CSS und Java coden? Nicht wirklich, auch wenn ich Basic Wissen dazu habe und Code grob lesen kann.
Als ich mich dazu entschieden habe, die Projektseite für den POSMOMAA Media Art Award selbst zu bauen – per Vibe Coding, mit kostenlosen KI-Tools – war ich gespannt, welche Überraschungen auf mich zukommen werden. Klar war: es muss so entstehen, wie auch die Studierenden ihre Einreichungen erstellt haben.
Was ist POSMOMAA?
POSMOMAA steht für Public Open Source Modern Online Media Art Award – ein experimenteller Medienkunst-Award, der im Rahmen eines Workshops von RandomLikeU an der Hochschule Rhine-Waal University of Applied Sciences entstanden ist.
8 Studierende haben insgesamt 17 interaktive HTML-Onepager eingereicht – erstellt per Vibe Coding, also per KI-Prompting, mit minimalem bis keinem Coding-Hintergrund. Jede Einreichung musste einen vollständigen Chatverlauf enthalten, um den Entstehungsprozess transparent zu machen. Bewertet wurden die Projekte von einer interdisziplinären Jury aus Kunst, Design und Wissenschaft nach Design, Interaktion und Konzept.
Die Besonderheit des Media Art Awards: Everyone will win. Das Preisgeld von 150€ wurde unter allen gültigen Einreichungen aufgeteilt. Kein Ausschluss, keine einzelne Gewinnerin – sondern kollektive Partizipation als Prinzip.
Warum die Projektseite POSMOMAA per Vibe Coding entstehen musste
Da die Studierenden ihre Einreichungen per Vibe Coding erstellt haben, war für mich konzeptionell klar: die Projektseite muss genauso entstehen. Für mich als Designerin gilt: Medium und Inhalt müssen eine Einheit bilden.
In Abstimmung mit RandomLikeU entstand so per Vibe Coding die Projektseite für POSMOMAA 2026.
Ein Prompt, drei KI-Tools, drei unterschiedliche Designs
Bevor ich anfing, wollte ich sehen, was unterschiedliche KI-Tools aus demselben Prompt machen. Also habe ich denselben Startprompt in Gemini, Claude und ChatGPT eingegeben – und drei komplett unterschiedliche Designs bekommen.
Schnell haben wir uns für das Claude-Design entschieden. Die Farbwahl – ein tiefes Schwarz mit Acid-Grün als Akzent – und die bold Typografie haben den innovativen Charakter des Awards aus unserer Sicht am stärksten visuell auf den Punkt gebracht.
Wie weit komme ich mit kostenloser KI – und wo liegen die Grenzen?
Da wir uns für das Claude-Design entschieden hatten, wollte ich direkt in Claude weiterarbeiten.
Das Problem: Claude Free hat nach wenigen Iterationen sein Limit erreicht – ich hätte sehr lange warten müssen, um weiterzumachen.
Also habe ich die HTML-Datei heruntergeladen und in ChatGPT geladen. Auch ChatGPT Free war schnell am Ende.
Dann habe ich Gemini getestet – und hier bin ich mit dem Free Modus nicht an die Grenzen gekommen. Die HTML-Datei ließ sich problemlos laden und im Canvas Modus weiterbearbeiten.
Am Anfang lief das richtig gut: Abschnitte einfügen, Menü-Ankerlinks setzen – das hat Gemini sauber umgesetzt. Aber: Je feiner die Iterationen wurden, desto schwieriger wurde es.
Was funktionierte, was nicht und was überraschte mich:
Überrascht hat mich, dass die KI Vorschaubilder für alle 17 Projekte einfach selbst als Code generiert hat – ich hätte gedacht, ich muss sie alle einzeln hinterlegen.
Was auch unerwartet gut lief: das Favicon. Ich hatte erwartet, dass ich da nochmal extra in Dateien, Formate und Pfade abtauchen muss – aber die KI hat das direkt sauber umgesetzt.
Was die KI gar nicht umsetzen wollte: das Vorschaubild fürs Teilen der Webseite (Open Graph). Also das Bild, das z.B. auf LinkedIn oder WhatsApp auftaucht, wenn jemand den Link teilt. Ich habe das Bild selbst gelayoutet, in den richtigen Ordner gelegt und es dann im HTML an der passenden Stelle verknüpft (mit Code, den ich mir von der KI geben ließ). Erst danach sah das Teilen der Seite wirklich so aus, wie ich es wollte.
In minimalsten Iterationen denken – meine wichtigste Erkenntnis
Was mich am meisten weitergebracht hat: in kleinsten Iterationen zu denken. Jede kleinste Änderung direkt überprüfen, bevor die nächste kommt. Klingt simpel – aber am Anfang hatte ich noch den Impuls, mehrere Dinge auf einmal anzupassen. Das hat fast immer zu mehr Chaos geführt.
Vibe Coding aus Entwickler-Perspektive
Ich bin Lars, freiberuflicher Web Developer aus Köln und arbeite hin und wieder mit Jennifer gemeinsam an Projekten.
Vibe Coding habe ich erst relativ spät für mich entdeckt, da ich lange am „klassischen“ Weg festgehalten habe.
Meine Sicht darauf hat sich inzwischen verändert: KI-Tools betrachte ich mittlerweile als hilfreiche Werkzeuge. Mehr sollten sie meiner Meinung nach aber auch nicht sein – einfach, um souverän genug zu bleiben, jederzeit eingreifen und Code gezielt anpassen zu können. Sich vollständig auf generierten Code zu verlassen, bringt oft seine Tücken mit sich. Um dem gewünschten Ergebnis wirklich näherzukommen, sind ein kritischer Blick und menschliche Kontrolle in vielen Fällen nach wie vor notwendig.
Modelle wie Claude, Gemini oder GitHub Copilot liefern bereits gute Ergebnisse, die sich mit weiteren Prompts und etwas Nacharbeit noch optimieren lassen.
Auch Tools mit starkem Fokus auf den Coding-Workflow wie Biela, Cursor oder GitHub Copilot machen gute Vorschläge. Meine bisherige Erfahrung zeigt jedoch: Die perfekte All-in-one-Ready-to-go-Lösung entsteht selten direkt auf Anhieb. Es braucht in der Regel einen entsprechend präzisen Prompt – und manchmal eben auch Nacharbeit.
Je größer und komplexer der Code wird, desto mehr muss eingegriffen, kontrolliert und optimiert werden. Gleichzeitig lässt sich genau das auch als Lerneffekt verstehen – also durchaus als Win-win-Situation für beide Seiten.
Dennoch werden die Modelle und ihre Fähigkeiten immer besser: Für den Alltag sind sie eine sinnvolle Ergänzung und helfen dabei, Arbeitsabläufe zu beschleunigen.
Das Beispiel der POSMOMAA-Website zeigt, dass Aufbau, Typografie und Farbwelt sich durchaus sehen lassen können und gut zusammen funktionieren. Claude hat zwar die Eigenart, Textfarben für Meta-Informationen mitunter zu zurückhaltend und kontrastarm zu wählen, was dem Gesamtergebnis jedoch keinen wirklichen Abbruch tut – zumal man auch hier selbst eingreifen kann.
Das Ergebnis ist eine moderne, ansprechende One-Pager-Seite mit schöner Typografie, die ihre Inhalte gelungen transportiert und sich definitiv sehen lassen kann.
Du benötigst spezifisches Web Development?
Kontaktiere Lars Ortlepp
FAQ – Häufige Fragen zu Vibe Coding
Was ist Vibe Coding?
Vibe Coding bedeutet, eine Webseite oder ein digitales Produkt per KI-Prompting zu erstellen – ohne klassisches Coding. Man beschreibt der KI was man möchte, und sie generiert den Code. Den Begriff geprägt hat Andrej Karpathy – OpenAI-Mitgründer und ehemaliger KI-Leiter bei Tesla – im Februar 2025. Interessant: Inzwischen bezeichnet er KI-generierten Code selbst als „aufgebläht“ und „brüchig“ – und betont, dass menschliche Aufsicht nach wie vor nötig ist. Eine Einschätzung, die ich aus eigener Erfahrung gut nachvollziehen kann.
Kann ich als Designerin ohne Coding-Erfahrung eine Webseite per Vibe Coding bauen?
Ja – mit Einschränkungen. Einfache Strukturen, Animationen und Inhalte lassen sich gut umsetzen. Je feiner und spezifischer die Anforderungen werden, desto mehr Geduld und Iterationen braucht es. Komplexere Themen wie Cookies, Shop-Anbindungen, Meta Pixel oder Google Tags könnten herausfordernder sein – hier vermute ich, dass kostenpflichtige Tools im Vorteil sind. Ich bin gespannt, wie sich das weiterentwickelt.
Sobald ich weitere Vibe Coding Tools teste, findest du es hier auf dem Blog. Schreib mir gerne, wenn ich ein bestimmtes Tool testen soll – oder registriere dich für meinen Newsletter, wenn du es als Erstes erfahren möchtest.
Welches kostenlose KI-Tool eignet sich am besten für Vibe Coding?
Das hängt vom Projekt ab. Claude liefert starke Designs im ersten Output, stößt im Free Modus aber schnell an Limits. Gemini Free hat im Canvas Modus länger durchgehalten – vor allem für grobe Strukturanpassungen.
Was sind die größten Stolpersteine beim Vibe Coding?
Mobile Anpassungen, ungewollte Textüberschreibungen und das Limit bei kostenlosen Tools. Der wichtigste Tipp: in kleinsten Iterationen denken – jede Änderung einzeln prüfen, bevor die nächste kommt.
Lohnt sich Vibe Coding für echte Projekte?
Ja – wenn das Konzept dahinter stimmt und man bereit ist, auch mal händisch einzugreifen. Es ist kein Einmal-Klick-Wunder, aber ein mächtiges Werkzeug für alle, die eine klare Idee davon haben, was sie wollen.
Was mich besonders überzeugt: Vibe Coding demokratisiert die Umsetzung erster Ideen in Prototypen. Ein Prototyp muss nicht perfekt sein – er muss zeigen, ob etwas funktioniert oder nicht. Genau das lässt sich mit Vibe Coding schnell und kostengünstig herausfinden. Und wenn die Idee trägt, kann man im nächsten Schritt mit sauberem Code, Förderungen oder Geldgebern weitermachen.
Fazit – Beim Vibe Coding bleibt die Idee das Wichtigste
Vibe Coding löst nicht alle Probleme – wichtig sind vor allem Konzept und Idee.
Für mich war dieses Projekt eine wertvolle Erfahrung – als Designerin, die konzeptionell denkt und gestaltet, aber nicht codet. Ich habe gelernt, wann ich der KI vertrauen kann, wann ich sie korrigieren muss – und wann ich einfach selbst Hand anlegen sollte.
POSMOMAA war der perfekte Rahmen dafür: ein Projekt, das Experiment ausdrücklich erlaubt. Ich bin gespannt, wohin sich Vibe Coding noch entwickelt – und werde es hier auf dem Blog weiter dokumentieren.