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

Update: Unser Adventskalender für 2025 ist leider schon vorbei, aber keine Sorge: im Dezember 2026 geht’s wieder los! 🎄✨

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

Wer hat's geschrieben?

Das könnte Dich auch interessieren:
KI News
Magnific (ehemals Freepik): unser KI-Tool der Wahl im Bootcamp

Magnific ist die KI-Kreativplattform, die wir im Bootcamp für Bild-, Video- und Audiogenerierung einsetzen. Dieser Beitrag ordnet ein, warum wir uns dafür entschieden haben, was die Plattform leistet und wo ihre Grenzen liegen. Vom Vektor-Archiv zur KI-Plattform: das Freepik-Rebranding Freepik kannten die meisten als „die Seite mit den kostenlosen Vektoren“. Seit dem 28. April 2026 heißt das Unternehmen aus Málaga offiziell Magnific. Hinter dem neuen Namen steckt vor allem eine inhaltliche Verschiebung: Das heutige Produkt

Weiterlesen »
KI News
Wenn das Lieblingsmodell streikt: Wie weit sind Europas KI-Modelle 2026 wirklich?

Stell dir vor, du startest morgens deinen Marketing-Workflow, und dein KI-Modell ist einfach weg. Nicht „Server überlastet, bitte später wieder versuchen“, sondern: per Regierungsentscheid abgeschaltet. Genau das ist gerade passiert. Anthropic hat am 9. Juni 2026 mit Claude Fable 5 (und dem Schwestermodell Mythos 5) sein bislang stärkstes Modell veröffentlicht, was dahintersteckt, haben wir hier schon eingeordnet. Drei Tage später war es wieder offline. Die US-Regierung ordnete per Exportkontroll-Direktive an, den Zugriff für ausländische Staatsangehörige

Weiterlesen »
Uncategorized
Damit KI nicht nach KI klingt, brauchst du erst Klarheit über deine eigene Stimme

Ich höre fast jeden Tag, dass Texte nach KI klingen. Meistens von Leuten, die sich darüber ärgern. Und fast jedes Mal frage ich zurück, wie sie denn selbst klingen. Dann wird es kurz still. Das fällt wirklich jedem schwer, nicht nur dir, glaub mir. Und genau da liegt die unbequeme Hälfte der Diskussion über „generischen KI-Output“. Alle reden über die Modelle, über bessere Prompts, über das nächste Tool, das endlich „menschlicher“ schreibt. Kaum jemand sagt

Weiterlesen »
KI News
Claude Fable 5 & Mythos 5: Anthropics neue KI-Modelle – was MarketerInnen jetzt wissen müssen

Am 9. Juni 2026 hat Anthropic zwei neue Modelle veröffentlicht: Claude Fable 5 und Claude Mythos 5. Hier ist, was dahintersteckt, und was das konkret für deinen Marketing-Workflow bedeutet. Was sind Claude Fable 5 und Claude Mythos 5? Anthropic hat mit Fable 5 und Mythos 5 eine neue Modellklasse eingeführt: die sogenannte Mythos-Klasse. Sie steht eine Stufe über den bisherigen Opus-Modellen und ist dami, nach eigenen Aussagen, die leistungsstärkste Modellreihe, die Anthropic bisher öffentlich zugänglich gemacht hat. Die

Weiterlesen »
Aktuelles
Bin ich als Marketingprofi bald ersetzbar? Florian und Dr. Vroni über zwei Welten im Marketing

Zwischen Angst und Aufbruch: Ein ehrliches Gespräch über KI Marketing, was sich ändert, was bleibt und wie du dich auf die KI Marketing Zukunft vorbereitest. Inhaltsverzeichnis KI im Marketing: Verändert sich gerade dein Beruf, oder deine ganze Branche? KI im Marketing ist längst kein Zukunftsthema mehr, sondern gehört zum Alltag in vielen Teams. Gleichzeitig fragen sich immer mehr Marketerinnen und Marketer: Wohin geht die Reise? Welche Aufgaben übernimmt künstliche Intelligenz tatsächlich? Was bleibt beim Menschen?

Weiterlesen »
KI im Einsatz
KI-Hackathon: Wie Faserplast AG vom Tool-Einsatz zum Workflow-Denken kam

ERFAHRUNGSBERICHT · HACKATHON Ein Unternehmen aus der Kunststoff-Branche hatte ChatGPT, Claude, Perplexity, Adobe Firefly und Runway längst im Einsatz, und trotzdem hatte das Team das Gefühl, dass die einzelnen Tools nicht so richtig zusammenspielen. Was fehlte, war eine Methode. In diesem Beitrag zeigen wir, wie wir mit Marc Beck und dem Team von Faserplast in einem KI-Hackathon für Unternehmen konkret gearbeitet haben, inklusive fünf Workflows, einer klaren Haltung gegenüber „Fake-KI-Content“ und einem ehrlichen Blick auf

Weiterlesen »

Hey Du. Willst du AI Content Manager werden?

Dann ab ins kostenfreie Info-Webinar am 25.03. um 12:00 Uhr. 

🚀 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.