Aus einem Blogartikel wurde ein Spiel: Wie wir die KI-Ostersuche gebaut haben

Der Blogartikel war fertig. Gut recherchiert, mit Praxisbezug, mit Substanz. Aber eben: ein Blogartikel. Scrollbar. Lesbar. Vergessbar. Die Frage war nicht „Wie kriegen wir mehr Reichweite?“, sondern: Gibt es ein Format, das die Nudges erlebbar macht, statt sie nur aufzuzählen?

Von der Idee zum Konzept: 15 Minuten

Aus dem Brainstorming kamen vier Vorschläge: Quiz („Welches KI-Ei bist du?“), Bingo, Prompt-Roulette, Eiersuche. Die Eiersuche hat sofort gepasst. Nicht weil sie technisch am aufregendsten war, sondern weil sie den Artikel nicht ersetzt, sondern ergänzt. Ein spielerischer Einstieg, der neugierig macht. Wer alle zwölf Eier findet, bekommt den Link zum vollständigen Artikel.

15 Minuten vom ersten „Ostern steht vor der Tür“ bis zum fertigen Konzept: zwölf Eier auf einer illustrierten Wiese, jedes Ei enthält einen gekürzten Nudge, Progress-Anzeige oben, Completion-Screen am Ende.

Was die KI gebaut hat

Die komplette technische Umsetzung. Eine HTML-Datei, kein React, kein WordPress-Plugin, keine Dependencies. Eine Datei, die du im Browser öffnest und die funktioniert.

Das klingt nach wenig. Drin steckt mehr, als man sieht:

Zwei verschiedene Interfaces für ein Stück Content. Auf dem Desktop siehst du die Wiese mit klickbaren Eiern – ein Wimmelbild, auf dem du suchst. Auf dem Smartphone bekommst du stattdessen Karten zum Durchtippen. Gleicher Inhalt, andere UX. Dazu gleich mehr, weil genau hier das interessanteste Problem lag.

Gamification ohne Cringe. Ein Zähler („4 von 12 gefunden“), eine Progress Bar, ein Abschluss-Screen. Kein Konfetti, keine Sounds, keine Punkte. Erwachsene Kommunikationsprofis brauchen keine Belohnungsmechanismen. Sie brauchen das Gefühl, dass es weitergeht.

Persistenz. Seite schließen, wiederkommen, Eier sind noch da. Drei Zeilen LocalStorage-Code. Aber genau solche Details machen den Unterschied zwischen „nette Spielerei“ und „funktioniert im Alltag“.

Barrierefreiheit. ARIA-Labels auf allen Eiern, Escape schließt das Modal, Farbkontraste geprüft. Nicht perfekt.

Eine Konversation. Keine Templates angepasst, kein Code aus Tutorials kopiert. Ich habe gesagt, was ich will. Claude Code hat gebaut. Ich habe geschaut, ob es funktioniert.

Was die KI nicht gemacht hat

Die Inhalte. Keinen einzigen Nudge hat Claude geschrieben. Die zwölf Nudges stammen aus unserer Seminarpraxis. Aus echten Situationen, echten Teilnehmer-Reaktionen, echten Fehlern. Der Blogartikel dahinter referenziert Forschung, die ich gelesen und eingeordnet habe. Der Nudge mit der Drei-Sekunden-Regel funktioniert, weil ein Teilnehmer einen Monat lang erfundene Statistiken in Pressemitteilungen veröffentlicht hat. Das steht in keinem Trainingsdatensatz.

Die Idee. „Nimm die Nudges, versteck sie in Ostereiern“ ist keine Prompt-Engineering-Leistung. Das ist ein kreativer Einfall, der aus „Ostern“ plus „wir haben zwölf Dinge“ entsteht. KI hat die Idee weiterentwickelt, konkretisiert, den technischen Rahmen vorgeschlagen. Aber der Funke kam von uns.

Die Designentscheidungen. Welches Orange? Das aus unserem Logo. Welche Schrift? DM Sans, weil sie zum Brand passt. Zwei getrennte UX-Modi statt ein fauler Kompromiss? Das war eine Entscheidung, die unseren Kontext brauchte. KI kennt Best Practices. Wir kennen unsere Nutzer.

Die Illustration. Die Wiese entsteht separat – als Bild-KI-Generierung nach einem Briefing, das wir geschrieben haben. Flacher Stil, Draufsicht, Brand-Farben, genug Abstand zwischen den Eiern für Touch-Targets auf dem Handy. Der Unterschied: Ein Briefing weiß, warum jedes Detail so sein muss.

Was schiefging

Das Mobile-Problem. Die erste Idee war naheliegend: gleiches Bild, kleinere Eier. Das wäre Schrott geworden. Eier auf einem Wimmelbild, das auf 375 Pixel Breite geschrumpft ist, sind zu kleine Tipp-Ziele. Nutzer müssten reinzoomen, und ein gezoomtes Wimmelbild verliert genau das, was es reizvoll macht: den Überblick.

Die Lösung: zwei komplett getrennte Modi. Desktop bekommt die Wiese mit Hotspots. Mobile bekommt Karten. Aufwändiger, aber richtig. Hätten wir mit dem Bild angefangen statt mit der Frage „Was funktioniert auf welchem Gerät?“, wären wir in eine Sackgasse gelaufen. Die Reihenfolge war entscheidend: erst UX-Frage, dann Technik.

Die Textlänge. Im Blogartikel hat jeder Nudge einen ganzen Absatz mit Kontext, Beispiel, Begründung. In einem Ei-Modal wirken schon drei Sätze lang. Wir mussten jeden Nudge auf seinen Kern eindampfen, ohne ihn zu verstümmeln. Das klingt trivial. Ist es nicht. Für jeden Nudge mussten wir entscheiden: Welcher Satz trägt den Gedanken, welcher schmückt nur? Das ist Redaktionsarbeit, nicht KI-Arbeit.

Drei Dinge, die du daraus mitnehmen kannst

Die technische Hürde ist weg. Du brauchst keine Agentur, kein Dev-Team, kein Budget für interaktiven Content. Du brauchst eine Idee, ein KI-Coding-Tool und zwei Stunden. Was bleibt, ist die inhaltliche Hürde. Und die war schon immer die eigentliche.

Erst Inhalt, dann Vehikel. Wir hätten die Eiersuche nicht bauen können, wenn die zwölf Nudges nicht fertig gewesen wären. Ein interaktives Format ohne Substanz ist ein leeres Spiel. Ein Gamification-Layer über generischem Content macht den Content nicht besser, sondern die Enttäuschung interaktiv. Erst der Inhalt. Dann das Format. Diese Reihenfolge ist nicht verhandelbar.

Dokumentier den Prozess. Dieser Artikel ist selbst Content. Aus einem Blogartikel wurden zwei Pieces und ein interaktives Tool. Das ist kein „Content Repurposing“ im Sinne von „mach aus einem Post fünf Karussells“. Das ist: Nimm eine Idee ernst genug, um sie in verschiedenen Formaten durchzudenken. Jedes Format erzählt eine andere Geschichte. Der Nudges-Artikel erklärt. Die Eiersuche lässt erleben. Dieser Beitrag zeigt, wie beides entstand.

Praxis-Take-Away: Dein eigenes interaktives Stück in drei Schritten

Du hast einen Artikel, ein Listicle, ein Framework? Dann hast du alles, was du brauchst.

Schritt 1: Zähl die Einheiten. Hast du 5, 7, 10, 12 einzelne Punkte? Einzelne Einheiten lassen sich in interaktive Formate übersetzen: Karten, Felder, Stationen, Eier. Ein Fließtext nicht.

Schritt 2: Kürz jeden Punkt auf drei Sätze. Wenn du den Kern nicht in drei Sätzen sagen kannst, ist er noch nicht klar genug. Diese Übung verbessert auch den Originalartikel.

Schritt 3: Bau mit KI-Coding. Beschreib, was du willst. Nicht wie. „Ich will 12 versteckte Elemente, die man anklicken kann, mit einem Zähler und einem Abschluss-Screen.“ Den Rest macht das Tool. Teste auf Desktop und Mobile. Deploye über Netlify Drop – Datei hochziehen, fertig.

Der ganze Prozess hat keinen halben Tag gekostet. Das teuerste daran: die Nudges selbst zu entwickeln. Und das war monatelange Seminararbeit, kein KI-Nachmittag.


Die Eiersuche findest du hier: https://kimarketingbootcampvroniostern.netlify.app

Und falls du jetzt den vollständigen Artikel mit allen zwölf Nudges lesen willst: 12 KI-Nudges für deinen Schreibtisch. Einen davon anwenden – den ersten Satz löschen – habe ich übrigens auch bei diesem Artikel gemacht. Dreimal.

Wer hat's geschrieben?

Das könnte Dich auch interessieren:
KI im Einsatz
Aus einem Blogartikel wurde ein Spiel: Wie wir die KI-Ostersuche gebaut haben

Zwölf Nudges, zwölf Ostereier, eine Wiese. Das war die ganze Idee. Kein Konzeptpapier, kein Briefing-Marathon. Eine Frage an Claude Code: „Ostern steht vor der Tür. Was machen wir mit den 12 KI-Nudges?“ Der Blogartikel war fertig. Gut recherchiert, mit Praxisbezug, mit Substanz. Aber eben: ein Blogartikel. Scrollbar. Lesbar. Vergessbar. Die Frage war nicht „Wie kriegen wir mehr Reichweite?“, sondern: Gibt es ein Format, das die Nudges erlebbar macht, statt sie nur aufzuzählen? Von der Idee zum

Weiterlesen »
Aktuelles
Nudging und KI: Warum sanfte Stupser beim Lernen mit KI nicht reichen

Nudging ist eines dieser Konzepte, die so elegant klingen, dass man sie sofort auf alles anwenden will. Ein kleiner Stupser in die richtige Richtung, eine geschickte Voreinstellung, eine kaum merkliche Veränderung der Umgebung, und schon verhalten sich Menschen besser. Funktioniert in Kantinen, beim Organspende-Register, bei Cookie-Bannern. Warum nicht auch beim Lernen mit KI? Ich höre die Idee regelmäßig in Seminaren, besonders von Führungskräften: „Können wir nicht einfach ein paar Nudges einbauen? Ein Pop-up, das fragt:

Weiterlesen »
KI im Einsatz
12 KI-Nudges: Kleine Stupser für mehr KI-Praxis

KI-Nudges, um besser in die Praxis zu kommen! Doch was ist das überhaupt? Nudges sind kleine Schubser für dein Verhalten. Man kennt sie zum Beispiel aus der Kantine: Wenn statt dem Schnitzel der Salat vorne steht, kann das ein geplanter Schubser sein, damit du zur gesünderen Wahl greifst. Ich habe mir überlegt, mit welchen Nudges man die praktische Nutzung von KI verbessern kann. Im Nudging-Artikel habe ich beschrieben, warum klassisches Nudging beim Lernen mit KI

Weiterlesen »
KI im Einsatz
Vibecoding im Marketing: Warum Marketer jetzt programmieren lernen, ohne programmieren zu lernen

Vor drei Monaten hätte ich nicht geglaubt, dass ich das schreibe: Ich baue gerade eine Browser Extension. Sie erfasst, wie Menschen KI generierte Texte editieren. Ein Forschungstool für meine Arbeit. Ich kann nicht programmieren. Ich habe nicht programmieren gelernt. Und trotzdem funktioniert das Ding. Der Grund hat einen Namen, der gerade durch die Tech Welt geistert: Agent Coding. Oder, wie Andrej Karpathy es Anfang 2025 nannte: Vibecoding. Die Idee ist simpel und radikal zugleich. Du

Weiterlesen »
Aktuelles
„Was euch nicht gehört, könnt ihr nicht verkaufen“ – Was drei Urteile für deinen KI-Einsatz bedeuten

Drei deutsche Gerichte haben innerhalb weniger Monate die Spielregeln für generative KI neu geschrieben. Die These ist unbequem, aber belastbar: Wer KI-Output als eigene kreative Leistung verkauft, ohne den menschlichen Gestaltungsbeitrag nachweisen zu können, steht rechtlich mit leeren Händen da. Und haftet trotzdem für alles, was rauskommt. Das betrifft nicht irgendwelche Tech-Konzerne in Kalifornien. Das betrifft jede Agentur, die nächste Woche ein KI-generiertes Logo an einen Kunden liefert. INPUT: Was die KI frisst – und

Weiterlesen »
ixel-Art-Illustration eines Detektivs im Trenchcoat und mit Sonnenbrille. Er hält ein leuchtend grünes Dokument mit der Aufschrift 'skills.md' in der Hand. Rechts daneben ist ein aufsteigender Aktienchart mit der Überschrift 'STONKS' zu sehen, sowie kleine Symbole für ein Gehirn, ein Zahnrad und eine Tastatur. Der Detektiv hat eine Sprechblase: 'SKILLS.MD: MUCH WOW, VERY AGENT.'
KI im Einsatz
Agent Skills schreiben: Anleitung mit Marketing-Beispielen

Im Analyse-Artikel über Skills Engineering habe ich beschrieben, warum strukturiertes Prozesswissen die nächste Stufe der KI-Nutzung ist. Dieser Beitrag ist die praktische Seite: Wie schreibt man einen Agent Skill? Was gehört rein, was nicht? Und wie sieht das für typische Marketing-Aufgaben aus? Was ein Agent Skill technisch ist Ein Agent Skill ist auf seine allereinfachste Weise einfach eine Textdatei namens SKILL.md. Nicht mehr, also nicht verrückt machen lassen, nur weil das fancy klingt. Absolut machbar

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.

Abonniere unseren Newsletter 🥳