Vibecoding: Wie wir 24 Web-Apps bauten, ohne programmieren zu können (und was du daraus lernst)

Wir sind Marketer. Wir sind Konzepter. Wir sind keine Software-Entwickler. Trotzdem haben wir dieses Jahr einen voll funktionsfähigen, interaktiven Online-Adventskalender gelauncht, der statt Schoki echte Browser-Apps, Spiele und allerhand anderes enthält.
 

Wie das geht? Mit einer Methode, die „Vibecoding“ genannt wird. Hier ist unser Werkstattbericht und warum dieses Experiment mehr ist als nur eine Spielerei.

 
 
Wenn wir im KI Marketing Bootcamp über die Zukunft der Arbeit sprechen, fallen oft Begriffe wie „AI Literacy“ (KI-Kompetenz) oder der Wandel vom „Prompt Engineer“ zum „Context Engineer“. Aber Theorie ist grau. Um wirklich zu verstehen, wie sich unsere Arbeit verändert, muss man sich die Hände schmutzig machen.

Inhaltsverzeichnis

Der didaktische Ansatz: Warum „Machen“ besser ist als „Prompten“

 

Warum tun wir uns den Stress an, 24 kleine Software-Produkte zu bauen?
Die Antwort liegt in der Didaktik. Viele KI-Schulungen bleiben an der Oberfläche: „Hier ist ein Prompt für einen Blogpost.“ Das ist nützlich, aber es erzeugt kein tiefes Verständnis für die Technologie.
  
Vroni – die alte Pädagogin unter uns – spricht dabei vom Konstruktivismus (Lernen durch Erschaffen). Viele Menschen haben diffuse Berührungsängste vor Begriffen wie Code, API, Frontend oder Deployment. Diese Begriffe wirken wie magische Barrieren, die nur „Techies“ überschreiten dürfen.
Vibecoding reißt diese Barriere ein. Indem wir zeigen, dass man mit natürlicher Sprache (Deutsch/Englisch) und logischem Denken funktionierende Apps bauen kann, passiert etwas in den Köpfen:
 
  • Entmystifizierung: Code ist keine Magie, sondern Logik.
  • Selbstwirksamkeit: „Ich habe das gebaut“ ist ein massiver Motivations-Boost.
  • Systemverständnis: Wer einmal versucht hat, einer KI zu erklären, wie ein „Nein-Sagen-Trainer“ funktionieren soll, lernt präzises Denken (Computational Thinking) viel schneller als durch Folien.

Was zur Hölle ist „Vibecoding“?

 

 

In unserem Manifest an Tag 24 definieren wir es so:

Vibecoding ist das Prototyping von Software durch Nicht-Programmierer mithilfe von Generativer KI. Wir schreiben die Syntax nicht selbst – wir steuern die Logik und den „Vibe“ (UX/UI).

 

Früher brauchtest du Jahre, um Programmieren zu lernen. Heute brauchst du:
 
  1. Ein Verständnis für das Problem (Was soll passieren?).
  2. Die Fähigkeit, präzise Anweisungen zu geben.
  3. Die Geduld, Fehler im Dialog mit der KI zu beheben.

Pssst…

 

Du willst Vibecoding selbst ausprobieren und hast eine coole Idee für eine App oder ein Adventskalender-Türchen?

 

Dann melde dich bei uns! Für unseren Adventskalender haben wir noch Plätze frei, die wir gerne mit deiner Idee füllen möchten. Werde Teil unseres Experiments und lass uns gemeinsam zeigen, wie einfach und kreativ Vibecoding sein kann.


Der Adventskalender hat bereits gestartet, aber keine Sorge, du kannst dich jederzeit melden!

 

Schreib uns einfach eine E-Mail oder kontaktiere uns direkt bei LinkedIn: Vroni oder Kathi. Wir freuen uns auf deine Ideen und darauf, gemeinsam spannende Apps zu kreieren.

"Vibecoding ist perfekt für dich, wenn du Ideen schnell visualisieren möchtest! Ich LIEBE es!
Mein Vorwissen: Ein HTML-Kurs 2001, in der siebten Klasse..."
Vroni Hackl
Co-Founder des KI Marketing Bootcamps

Behind the Code: Vier Beispiele aus dem Kalender

 

Wir glauben an „Building in Public“. Deshalb hat jedes Türchen einen „Behind the Scenes“-Button, der die Wahrheit enthüllt. Hier sind drei Highlights:

 

Türchen 1: AI Persona Engine

 


Die Idee: Ein Baukasten, mit dem du dir deine perfekte KI-Persona zusammenklicken kannst – inklusive Rolle, Expertise-Level und Reglern für Kreativität, Härtegrad, Autonomie und Emoji-Dichte. Der Vibe: Sieht nach „High-End-AI-Lab“ aus, fühlt sich aber eher an wie ein Charakter-Editor in einem Videospiel – nur eben für deine KI.
Die technische Wahrheit: Unter der Haube steckt im Kern ein simples Konfig-Formular, das aus deinen Slider- und Button-Optionen einen strukturierten Systemprompt zusammenbaut. Statt komplizierter Logik werden die Werte als Textbausteine kombiniert, sodass du den fertigen Prompt nur noch kopieren musst – kein Backend, keine Datenbank, nur clevere Frontend-Orchestrierung.
Lektion: Oft reicht es, abstrakte Einstellungen (wie „mehr kreativ, weniger streng“) nur sauber in Worte zu übersetzen. So wird aus ein paar Slidern ein „Magic Tool“, ohne dass im Hintergrund komplexe KI-Logik laufen muss.

 

 


Türchen 2: Der adventliche Meeting Checkout-Generator 

 


Die Idee: Ein Generator für smarte Check-out-Fragen, mit denen du Meetings nicht einfach versanden lässt, sondern bewusst und menschlich beendest. Der Vibe: Moderationskarte für digitale Meetings – freundlich, leicht ironisch und ideal, um Teams aus dem Autopiloten zu holen.
Die technische Wahrheit: Die App arbeitet mit einem kuratierten Pool aus Check-out-Fragen, kategorisiert nach Stimmung (reflektierend, witzig, tiefgehend). Ein einfacher Button triggert die zufällige Auswahl einer Frage, optional gefiltert nach Kategorie; technisch läuft alles im Frontend, ohne Nutzer-Daten zu speichern.
Lektion: Gute Facilitation braucht oft eher gute Fragen als gute KI. Ein sauber gepflegter Fragenpool plus Random-Logik kann Meeting-Kultur messbar aufwerten – ganz ohne komplexes System im Hintergrund.

 

Türchen 3: Prompt-Roulette 

 


Die Idee: Ein Roulette-Rad für KI-Prompts, das dir per Klick absurde Kombinationen aus Aufgaben, Stilen und Themen ausspuckt – perfekt gegen kreative Funkstille. Der Vibe: Spielerisch, ein bisschen chaotisch, und genau richtig, um aus der eigenen Content-Comfort-Zone geschubst zu werden.
Die technische Wahrheit: Im Kern arbeitet die App mit ein paar Arrays (z.B. Aufgaben, Genres, Tonalitäten), aus denen pro Spin jeweils ein Element zufällig gezogen und zu einem Prompt zusammengefügt wird. Kein komplexes Zufallssystem, kein Machine Learning – nur klassisches Randomizing, das im Frontend läuft und direkt ein Textfeld befüllt, das du in ChatGPT & Co. kopieren kannst.
Lektion: Kreativitätstools müssen nicht „intelligent“ sein – sie müssen nur genügend unerwartete Kombinationen liefern. Ein gutes Random-System plus freche Textbausteine bringen oft mehr als ein überkomplizierter Algorithmus.

 


Türchen 4: Agency Chronicles – AI Literacy Quest

 


Die Idee: Ein Mini-Game, in dem du in Agentur-Szenarien wie „Der LinkedIn-Post“ oder „SEO-Massenproduktion“ landest und spielerisch deine KI-Kompetenz testest. Der Vibe: Gamifizierte Lernreise mit Leveln und Szenarien statt trockener E-Learning-Folien – eher „Karriere-Quest“ als Schulung.
Die technische Wahrheit: Die App kombiniert ein paar vorgefertigte Szenarien mit Entscheidungsbäumen, die im Frontend ausgewertet werden und dein Kompetenzprofil als Radar-Chart visualisieren. Die Antworten werden nicht per KI bewertet, sondern über simple Scoring-Logik in Kategorien wie Technikverständnis, Ethik oder gesellschaftliche Wirkung gemappt.
Lektion: „AI Literacy“ muss nicht KI-gestützt sein, um stark zu wirken. Szenariobasiertes Storytelling plus visuelles Feedback motiviert Nutzer deutlich mehr als eine weitere trockene Checkliste.

Tech-Stack & Datenschutz: Die „No-Stack“-Strategie

 

 

Ein häufiger Angstgegner bei Tech-Projekten ist die Einrichtung der Umgebung („Environment“). Terminal-Befehle, npm install, Server-Konfigurationen, da steigen die meisten Marketer aus.
 
 
Wir haben uns in den meisten Fällen dagegen entschieden. Unser Ansatz für den Kalender war „Local First & Single File“. Keine Installationen: Alles läuft direkt im Browser. Keine Software nötig außer einem Text-Editor… Single File HTML: Fast jede App (jedes Türchen) ist größtenteils eine einzige Datei. Das reduziert die Komplexität enorm. Wenn mal ein API-Key notwendig war, dann haben wir den natürlich nicht in den Code eingebacken, sondern über ein anderes Tool deployed und dort hinterlegt. Schriften haben wir lokal abgelegt, statt sie von Google-Servern zu laden. Das Ergebnis: Eine schlanke, datenschutzfreundliche Seite ohne Tracking-Wahnsinn.

Was wir gelernt haben (und du auch lernen kannst)

 

Nach 24 Tagen Vibecoding haben wir unsere Blueprint-Regeln aufgestellt, die wir auch in unseren Schulungen weitergeben:
 
  1. Verlange bei so einfachen Micro-Apps wie den unseren am besten erst mal EINE Datei: Wenn die KI anfängt, CSS und JS auszulagern, stopp sie. Für Prototypen und Anfänger ist die Übersicht in einer Datei Gold wert.
  2. Kopiere den Fehler, nicht den Code: Wenn etwas nicht geht, versuche nicht, den Code selbst zu fixen. Kopiere die Fehlermeldung aus der Browser-Konsole und sag der KI: „Analysiere die Logik, warum das passiert.“
  3. Prompting ist Logik-Design: Die KI schreibt den Code, aber du musst die Logik definieren. Wenn du nicht erklären kannst, wie das Spiel funktionieren soll, kann die KI es nicht bauen.
 
 

AI Literacy beginnt beim Machen

 

Unternehmen brauchen nicht nur Tools, sondern Wissen.
Dieser Adventskalender ist der Beweis: Die Grenze zwischen „Idee haben“ und „Software bauen“ existiert kaum noch. Ist der Code perfekt? Sicher nicht. Ein Senior Developer würde die Hände über dem Kopf zusammenschlagen. Aber es funktioniert. Es macht Spaß. Und es hat uns mehr über Software-Architektur gelehrt als jedes Buch.
 
 
Vibecoding ist nicht der Weg, um Hochsicherheits-Software für Banken zu schreiben. Aber es ist der beste Weg für Marketer, Kreative und Gründer, um ihre Ideen aus dem Kopf in den Browser zu bekommen, und dabei die Angst vor der „Black Box“ KI zu verlieren.
 
 
Bist du bereit, deine Berührungsängste abzulegen? Schau dir an, was möglich ist, oder starte direkt mit unserem AI Literacy Quest an Tag 5.
 
 
Frohes Vibecoding! 🎄🤖

Du willst auch so coole Sachen mit KI machen?

 

Klar, neue Tools kommen ständig raus – und irgendwann verliert man den Überblick. Wir helfen dir dabei, dass du weißt, was du machst.

 

Unsere Weiterbildungen:

AI Content Creator (11h Live): Lerne, wie du KI für Texte, Bilder und Social Media nutzt. Vormittags, entspannt, und du kannst alles direkt ausprobieren.

 

AI Content Manager mit IHK-Zertifikat (20h Live): Mehr Tiefe gefällig? Hier gehts um richtige Content-Strategien und Kampagnen – plus ein IHK-Zertifikat, das was wert ist.

 

Visual AI Engineer (40h Live): Du stehst auf Bilder und Videos? Lerne ComfyUI, Workflows und wie du das alles automatisierst. Ziemlich gefragtes Zeug.

 

Was uns ausmacht: Wir machen KI seit 2022 und wissen, was funktioniert und was nur heiße Luft ist. Du lernst das, was du wirklich brauchst.

 

Für Teams: Dein ganzes Team soll mitkommen? Können wir machen – einfach melden.

Vroni kümmert sich um Text-KI, Georg trainiert seit 2022 Bild-KI Modelle

Über den Author

Das könnte Dich auch interessieren:
KI im Einsatz
Der große Bild-KI-Vergleich 2026: Nano Banana Pro 4K, Flux.2, Midjourney V7, Adobe Firefly Image 5, Google Imagen 4, Seedream 4.5 4K, Qwen Image Edit, OpenAI Image-1.5, Reve, Z-Image uvm.

Wie schon im letzten Jahr starten wir auch diesmal mit einem Klassiker: unserem großen Bild‑KI‑Vergleich. Dafür haben wir uns die aktuellsten Tools geschnappt und sie in echten Praxis‑Szenarien gegeneinander antreten lassen. Egal ob für ob Profi‑Designer, Marketer oder KI‑Neuling – wir zeigen euch, welche Anbieter/KI-Modelle 2026 vorne liegen und wo es noch hakt. Viel Spaß beim Anschauen und Vergleichen! Inhaltsverzeichnis Wie wir die Bild-KI-Tools getestet haben Für den Vergleich der verschiedenen Bild-KI-Tools haben wir jedem

Weiterlesen »
KI im Einsatz
Kinderbuch mit KI erstellen – so einfach gehts 2026

Alle Jahre wieder… kommt nicht nur das Christkind, sondern auch ein neues Mathilda-Buch. Was als kleines Experiment begann, ist mittlerweile eine feste Tradition im Hause Neumann geworden. Doch während die Hauptdarstellerin – meine Tochter Mathilda – einfach nur wächst, hat die Technologie im Hintergrund Quantensprünge gemacht. Wer diesen Blog verfolgt, weiß: Ich nutze dieses jährliche Projekt nicht nur, um Kinderaugen zum Leuchten zu bringen, sondern auch als ultimativen Härtetest für den aktuellen Stand der KI-Bildgenerierung.

Weiterlesen »
Aktuelles
Vibecoding: Wie wir 24 Web-Apps bauten, ohne programmieren zu können (und was du daraus lernst)

Wir sind Marketer. Wir sind Konzepter. Wir sind keine Software-Entwickler. Trotzdem haben wir dieses Jahr einen voll funktionsfähigen, interaktiven Online-Adventskalender gelauncht, der statt Schoki echte Browser-Apps, Spiele und allerhand anderes enthält.   Wie das geht? Mit einer Methode, die „Vibecoding“ genannt wird. Hier ist unser Werkstattbericht und warum dieses Experiment mehr ist als nur eine Spielerei.     Wenn wir im KI Marketing Bootcamp über die Zukunft der Arbeit sprechen, fallen oft Begriffe wie „AI Literacy“

Weiterlesen »
Aktuelles
Happy Neural New Year 2025! ChatGPT feiert Geburtstag

Wir haben es einfach mal getan: Einen neuen Feiertag ins Leben gerufen.   30. November: Happy Neural New Year.   Vor genau drei Jahren wurde ChatGPT gelauncht. Nach zwei Monaten hatte das Tool schon die Schallmauer von 100 Millionen Nutzer:innen durchbrochen. Und so manchen User verblüfft, oder mindestens ordentlich ins Grübeln gebracht.   Und ja, jetzt stehen wir hier. Wir nutzen KI alltäglich, als hätte es nie etwas anderes gegeben.  Inhaltsverzeichnis Was war eigentlich dein

Weiterlesen »
Aktuelles
Das große Nano Banana Pro Update: Höhere Auflösung, mehr Details, bessere Kontrolle & Konsistenz

Ok, mittlerweile hat wahrscheinlich schon jeder von Nano Banana gehört. Zumindest alle, die bei unseren KI Schulungen dabei waren. Jetzt gibt es ein aufregendes Update: Nano Banana Pro! Inhaltsverzeichnis Technische Details und Neuerungen von Nano Banana Pro   Wir vom KI Marketing Bootcamp nutzen Nano Banana Pro schon in unseren KI Weiterbildungen. Das macht es möglich, den Teilnehmenden praxisnah zu zeigen, wie moderne KI-Bildgenerierung funktioniert und wie sie solche Tools effektiv in ihren eigenen Arbeitsalltag

Weiterlesen »
Aktuelles
Warum KI Weiterbildung jetzt? Skepsis als gesunder Kompass

Stell Dir vor, es ist 2019, und jemand sagt Dir, dass in fünf Jahren die Hälfte aller Marketingprofis täglich mit Künstlicher Intelligenz arbeitet. Hättest Du das geglaubt? Wahrscheinlich nicht. Doch genau das ist heute Realität: KI-Tools wie ChatGPT, Microsoft Copilot und viele mehr prägen unseren Arbeitsalltag zunehmend.   Dabei schwanken viele von uns zwischen Begeisterung und Überforderung: Wie nutze ich KI sinnvoll? Wie positioniere ich mich und mein Team im digitalen Wandel? Genau hier setzt

Weiterlesen »

🚀 Exklusive Back-to-School-Aktion 🚀

Spare 880 € beim KI-Marketing-Bootcamp!

Bring eine Kolleg*in mit und erhalte 50% Rabatt für deine Begleitung.

Nur für kurze Zeit und solange Kontingent reicht! Aktion endet am 16. September 2024.

Abonniere unseren Newsletter 🥳