KI-Kompass #09 – für Mediation, Coaching und Beratung
(fand am DI, 23.09.2025, 12-13 Uhr statt)

Eigene KI-Webanwendungen bauen – Artefakte von Claude

Zusammenfassung

Worum ging es am 23.09.2025?

• Wir bauen eine kleine Web-App mit KI – konkret ein Quiz zum Thema Mediation.

• Statt selbst zu programmieren, lassen wir Claude (eine KI) den Code schreiben.

• Ziel: Eine App, die Kund:innen, Teilnehmende oder Website-Besucher:innen nutzen können.

• Einsatz: Ausbildung, Lernkontrolle, Marketing (mehr Traffic auf die Website), Newsletter & LinkedIn.

Warum Apps statt nur Chat?

• Chat = Frage–Antwort in Text. Schnell, aber eingeschränkt.

• App = Buttons, Eingabefelder, Auswertung, Ansicht – also interaktiv.

• Mit KI bauen wir „dumme“ Apps (ohne KI-Logik in der App), die aber nützlich sind.

• Später möglich: Apps mit KI drin (z. B. freie Antworten automatisch bewerten).

Unser Beispiel: Ein Mediation-Quiz

• Inhalt: Fragen aus der Mediationsausbildung.

• Level: Anfänger, Mittel, Pro.

• Frageform: Multiple Choice (leicht auszuwerten).

• Ergebnis: Punktzahl am Ende (Feedback zum Schluss, nicht nach jeder Frage).

• Zielgruppe:

  • Vor der Ausbildung (Orientierung)

  • In der Ausbildung (Übung)

  • Nach der Ausbildung (Auffrischung)

So promptest du Claude für deine App

• Start-Prompt (einfach formuliert):

  • „Baue mir ein interaktives Quiz zum Thema Mediation.“

  • „Am Ende soll eine Auswertung mit Punktzahl erscheinen.“

  • „Bitte frage vorher 5 Ja/Nein-Fragen, um das Quiz zu präzisieren (Level, Anzahl Fragen, Feedback am Ende usw.).“

  • „Die App soll ich auf meiner Website einbetten können.“

• Warum so?

  • Die 5 Rückfragen sorgen dafür, dass die App passt.

  • Klein starten (z. B. 5 Fragen). Danach schrittweise verbessern.

Was Claude produziert

• Code (meist React/JavaScript) und ein Artefakt (fertig lauffähige Mini-App in einem Fenster).

• Du kannst die App sofort testen: Level wählen → Fragen klicken → Ergebnis sehen.

• Du kannst die Code-Ansicht ansehen und Versionen zurückspringen (Versionierung).

Teilen & Einbetten (Publish & Embed)

• Per Link teilen:

  • Publish klicken → Link kopieren → verschicken.

  • Nur die App ist sichtbar, nicht der Chatverlauf.

• In Website einbetten:

  • Einbettungscode (Embed Code) kopieren → in WordPress (oder anderes CMS) als Code-Block einfügen.

  • Domain freischalten (Sicherheitsfunktion): Die App läuft nur auf freigegebenen Domains.

• Unpublish: Link wieder deaktivieren, wenn du die App nicht mehr öffentlich willst.

• Hinweis: Veröffentlichen/Link kann bei kostenlosen Accounts eingeschränkt sein. Bauen geht oft auch gratis, das Teilen manchmal nur bezahlt.

Typische Verbesserungen (Iterativ bauen)

• E-Mail-Funktion:

  • Idee: Ergebnisse am Ende per E-Mail versenden.

  • In der Praxis: Mail-Versand braucht Konfiguration (Absender, Server).

  • Notlösung: Mailto-Link (öffnet nur das eigene Mailprogramm).

  • Lerneffekt: „Perfekt“ in der KI-Antwort heißt nicht „fertig & fehlerfrei“. Testen!

• Auflösung der Fragen:

  • Nach dem Ergebnis richtige Antworten anzeigen – erhöht den Lerneffekt.

• Mehr Inhalte:

  • Weitere Fragen, neue Level, Bilder, Erklärtexte.

• Datenerfassung (mit Vorsicht):

  • Name, E-Mail, Punktzahl speichern – nur mit Datenschutz & Einwilligung.

Was ist beim Einbetten in WordPress zu beachten?

• Einbettungscode in einen Code-Block (nicht „normaler“ Textblock).

• React-Rohcode nicht einfach in WordPress kopieren – das ergibt Fehler.

• Nutze den Embed-Code von Claude oder hoste die fertig gebaute React-App auf deinem Server(fortgeschritten).

• Änderungen an der App? Embed-Code ggf. aktualisieren und Seite neu laden.

Sicherheit, Datenschutz & Grenzen

• Datenschutz:

  • Sag Nutzer:innen, was die App speichert (oft nichts) und wo.

  • Wenn du Daten sammelst (z. B. Punktzahl + E-Mail), brauchst du Rechtsgrundlage und Hinweise.

• Sicherheit:

  • Frontends (wie unser Quiz) sind relativ harmlos.

  • Komplexere Apps brauchen Security-Know-how (Login, Rollen, Server, Datenbanken).

• Stabilität:

  • Einbettungen sind meist robust.

  • Externe Dienste können sich ändern – daher regelmäßig testen.

• Lizenzen & Inhalte:

  • Bei Open-Source-Bausteinen die Lizenzen beachten.

  • Eigene Inhalte (Fragen/Logos) sind dein Thema.

Konkrete Einsatzideen für Mediation, Coaching & Beratung

• Ausbildung: Quiz zur Lernkontrolle, Selbsttests vor Modulen, Abschluss-Check.

• Website-Marketing: „Wie mediationsfit bist du?“ – Lead-Magnet mit E-Mail-Ergebnis.

• Kundenvorbereitung: „Bin ich bereit für Mediation?“ – Erwartungen klären.

• Organisationskonflikte: Themenspezifische Quizzes (z. B. Shuttle-Mediation, Phasenmodell).

• Events: Live-Quiz für Interaktion und Datenpunkte (nur DSGVO-konform!).

Schritt-für-Schritt: Deine erste App

1. Idee festlegen: Thema, Ziel, Zielgruppe.

2. Prompt schreiben: App-Typ (Quiz), Level, Anzahl Fragen, Feedback, Einbettung.

3. KI-Rückfragen beantworten: Klar & kurz.

4. Testen: Alle Level durchklicken, Ergebnis prüfen.

5. Teilen: Link oder Einbettungscode nutzen.

6. Iterieren: Auflösung, Design, E-Mail, Datenschutz-Hinweis ergänzen.

7. Beobachten: Nutzung anschauen, Fragen verbessern.

Fazit – die wichtigsten Punkte

• KI baut dir schnell eine funktionierende Mini-App.

• Klein starten, testen, nachbessern – so wird’s gut.

• Einbettung in die Website ist einfach und praktisch.

• Datenschutz & Sicherheit mitdenken, besonders bei E-Mails und Speicherung.

• Lern- und Marketing-Potenzial ist groß – gerade für Mediation, Coaching, Beratung.

Checkliste – bevor du veröffentlichst

• Ziel der App klar (Lernen? Marketing? Spaß?).

• Prompt sauber (Thema, Level, Anzahl Fragen, Ergebnis am Ende).

• Fragen geprüft (Fachlichkeit, Schwierigkeit, Fehler).

• Auswertung verständlich (Punktzahl, ggf. Auflösung)

• Einbettungscode korrekt eingefügt (Domain freigeschaltet).

• Datenschutzhinweis vorhanden (was wird gespeichert?).

• E-Mail-Funktion getestet (oder deaktiviert, wenn nicht nötig).

• Mobilansicht geprüft (Smartphone-Nutzung!).

• Version dokumentiert (bei Änderungen nachhalten).

• Feedback-Kanal verlinkt (z. B. Kontakt oder Formular).

Glossar – Fachbegriffe kurz & einfach

Artefakt (Artifact): Von der KI erzeugtes Ergebnis, hier die fertig lauffähige App in einem eigenen Fenster.

Backend: Teil im Hintergrund (Server), den Nutzende nicht sehen.

Branding: Außenauftritt deiner Marke (Logo, Stil, Ton).

CMS (Content Management System): System wie WordPress zum Bauen von Websites.

Claude: KI-Plattform (ähnlich ChatGPT), mit der man Apps bauen kann.

CRM (Customer Relationship Management): System zur Kundenverwaltung.

Datenschutz (Privacy / Data Protection): Schutz von personenbezogenen Daten.

Debugging: Fehler finden und reparieren.

Domain: Adresse deiner Website (z. B. meine-seite.de).

E-Mail-Versand (Email Sending): Automatisches Senden von Ergebnissen per E-Mail.

Einbettungscode (Embed Code): Code-Schnipsel, um die App in die Website einzubauen.

Frontend: Teil, den Nutzende sehen (Browser).

JavaScript: Programmiersprache, mit der Web-Apps laufen.

KI (Künstliche Intelligenz / Artificial Intelligence): Computer, die mitdenken und Texte/Code erzeugen.

mailto-Link: Öffnet das eigene Mailprogramm mit vorausgefüllter E-Mail.

Multiplayer: Mehrere Personen nutzen eine App gleichzeitig.

Multiple Choice: Frageformat mit vorgegebenen Antworten.

Open Source: Freie Software, aber mit Lizenzen, die man beachten muss.

PDF-Export: Inhalte als PDF ausgeben.

Prompt: Anweisung an die KI.

Quiz: Fragen mit Antwortmöglichkeiten, meist Multiple Choice.

React: JavaScript-Bibliothek zum Bauen von Web-Apps.

Sicherheit (Security): Schutz vor Angriffen, Fehlern und Datenlecks.

Testen (Testing): Prüfen, ob alles richtig funktioniert.

TypeScript: JavaScript mit zusätzlichen Regeln (hilft gegen Fehler).

Veröffentlichen / Zurücknehmen (Publish / Unpublish): Link freigeben oder deaktivieren.

Versionierung (Versioning): Änderungen am Code als Versionen speichern.

Web-App (Web Application / Webanwendung): Kleine Software im Browser.

Workflow: Ablauf von Arbeitsschritten.

KI-Kompass für Mediation, Coaching und Beratung?

• Mediation, Coaching und Beratung finden heute in einem anderen Kontext statt als noch vor 10 Jahren.
• Wir und unsere Klient*innen nutzen Tools, die vor fünf Jahren noch undenkbar waren. Unsere Ausbildungen, mentalen Konzepte und praktischen Interventionen werden sich darauf einstellen (müssen).
• Aber nicht nur unser beraterisches Umfeld, auch unser geschäftliches Umfeld hat sich bereits erheblich gewandelt: Wer heute erfolgreich und zufrieden als Mediator*in, Coach*in oder Berater*in arbeitet, darf sich sicher sein, dass Umstände und Zustände dafür mitgewirkt haben, die heute nicht mehr existieren.
• Die Auswirkungen dieses Wandels für die Ausbildung in Mediation, Coaching und Beratung (von Menschen) sind zum jetzigen Zeitpunkt nicht abzuschätzen.
• Unsere Routinen in Ausbildung und Beratung dienen mehr unserem seelischen Wohlbefinden („Ausblenden“), keineswegs aber dem klugen Zurechtkommen in diesem unbekannten Gelände, das zu erkunden sich heute kaum zu lohnen scheint, weil es sich Morgen bereits völlig anders darzustellen droht.

Der KI-Kompass will dennoch Schritte ermöglichen.

Denn wer heute im Unbekannten sich zu bewegen lernt,

ist für Morgen in guter Übung.

Du willst mehr zu Mediation und Konfliktmanagement hier bei INKOVEMA erfahren? Dann abonniere unser redaktionelles Monatsmailing!