Best Practice · KI-Nuggets × Claude Code

Von der Idee zur KI-Lernplattform

Wie textil+mode eine vollständige Lernplattform mit 20 Video-Skripten, Selbsttest, Glossar und KI-Chatbot realisierte – komplett mit Claude Code, ohne Entwicklerteam und ohne Programmierkenntnisse.

20 Video-
Skripte

6 Interaktive
Seiten

0 Programmier-
kenntnisse

🎓

KI·Nuggets

Lernplattform für KI-Grundbildung

🌟 Komplett mit Claude Code erstellt

Das Problem

KI-Wissen vermitteln – aber wie?

Mitgliedsverbände brauchten einen strukturierten, praxisnahen Einstieg in das Thema Künstliche Intelligenz – doch die Hürden waren hoch.

📚

Kein zentrales Lernangebot

Es gab keine einheitliche Ressource, die KI-Grundwissen speziell für Verbände der Textil- und Modebranche bündelte – praxisnah, kompakt und verständlich.

💰

Hohe Kosten für Eigenentwicklung

Eine professionelle Lernplattform mit Videos, Quiz, Glossar und Chatbot würde typischerweise ein Entwicklerteam und ein fünfstelliges Budget erfordern.

⏰

Zeitdruck & Komplexität

20 Video-Skripte, 4 Lernpfade, ein Selbsttest, ein Glossar mit 39 Begriffen und ein KI-Chatbot – der Umfang erschien ohne technisches Team kaum realisierbar.

Das Werkzeug

Was ist Claude Code?

Claude Code ist ein KI-gestütztes Entwicklungswerkzeug von Anthropic. Es arbeitet direkt im Terminal, liest und schreibt Code eigenständig – und setzt dabei Anforderungen um, die in normaler Alltagssprache beschrieben werden.

Man erklärt ihm ein Problem wie einem Kollegen: Was soll entstehen? Was ist vorhanden? Was ist das Ziel? Den Rest erledigt Claude Code selbstständig im Hintergrund.

Kein Programmieren nötig Normale Sprache Arbeitet eigenständig Korrigiert sich selbst Ergebnis sofort einsatzbereit

🤖

Vom Konzept zur fertigen Plattform.

Claude Code hat aus einem Markdown-Konzeptdokument eine vollständige, interaktive Lernplattform generiert – inklusive aller Inhalte, Navigation, Responsive Design und interaktiver Features.

Schritt für Schritt

Die Umsetzung in 8 Schritten

Von der ersten Idee bis zur fertigen Plattform – Claude Code übernahm die technische Umsetzung vollständig. Klick auf einen Schritt für Details.

📝 Konzept & Struktur definiert

Zunächst wurde ein Konzeptdokument erstellt: 4 Lernpfade, 5 Videos pro Pfad, Zielgruppen und Lernziele. Dieses Dokument diente Claude Code als „Briefing“ für die gesamte Plattform.

✓ Klare Struktur als Grundlage für alles Weitere

🎨 Plattform-Design & Navigation

Claude Code erstellte das komplette Frontend: Startseite mit Lernpfad-Karten, responsive Navigation, Farbschema mit 4 Pfadfarben und ein modernes, barrierefreies Design – alles in reinem HTML, CSS und JavaScript.

✓ Professionelles Design ohne Designer

🎥 20 Video-Skripte geschrieben

Für alle 20 Videos (je 2–3 Minuten) wurden vollständige Skripte in Markdown erstellt – fachlich fundiert, verständlich formuliert und auf die jeweilige Zielgruppe zugeschnitten. Dazu passende Folienvorschauen für jedes Video.

✓ 20 Skripte + 20 Folienvorschauen generiert

📋 Selbsttest mit Pfadempfehlung

Ein interaktiver 3-Fragen-Quiz wurde entwickelt, der Nutzern anhand ihrer Antworten den passenden Lernpfad empfiehlt – mit sofortigem Feedback und direktem Link zum empfohlenen Pfad.

✓ Personalisierter Einstieg für jeden Nutzer

📖 Glossar mit 39 KI-Begriffen

Ein durchsuchbares Glossar mit 39 KI-Fachbegriffen wurde erstellt – mit Schwierigkeitsfilter (Einsteiger/Fortgeschritten/Profi), Suchfunktion und verständlichen Erklärungen für Nicht-Techniker.

✓ Fachbegriffe verständlich erklärt

🦊 KI-Chatbot „KI-Fuchs“

Ein KI-gestützter Chatbot wurde integriert, der Fragen zur Plattform und zu KI-Themen beantwortet. Er greift auf eine Wissensdatenbank und FAQ-Sammlung zurück und nutzt die OpenAI-API für komplexere Anfragen.

✓ Intelligenter Lernbegleiter auf jeder Seite

♿ Barrierefreiheit & Zugänglichkeit

Eine Accessibility-Toolbar wurde eingebaut: Text-to-Speech (Vorlese-Funktion), einstellbare Schriftgröße und Hochkontrast-Modus – damit die Plattform für alle Nutzer zugänglich ist.

✓ Barrierefreier Zugang für alle

🛠 Admin-System & Analytics

Ein passwortgeschütztes Admin-System zum Inline-Bearbeiten aller Texte sowie ein Analytics-Dashboard zur Auswertung von Seitenaufrufen wurden integriert – ohne externe Dienste oder Datenbanken.

✓ Vollständige Verwaltung & Auswertung integriert

Das Resultat

Eine vollständige KI-Lernplattform

Das Ergebnis ist eine professionelle, interaktive Lernplattform – responsive, barrierefrei und sofort einsatzbereit für alle Mitgliedsverbände.

🎓

4 Lernpfade mit 20 Videos

Strukturierte Lernpfade von Einsteiger bis Fortgeschritten, mit je 5 kurzen Video-Einheiten.

📋

Interaktiver Selbsttest

3-Fragen-Quiz mit automatischer Pfadempfehlung für den optimalen Einstieg.

📖

Durchsuchbares Glossar

39 KI-Fachbegriffe mit Schwierigkeitsfilter und Volltextsuche.

🦊

KI-Chatbot „KI-Fuchs“

Intelligenter Lernbegleiter mit FAQ-Wissen und OpenAI-Anbindung.

♿

Barrierefreiheit

Vorlesefunktion, Schriftgrößenanpassung und Hochkontrast-Modus.

🛠

Admin-System & Analytics

Inline-Textbearbeitung und Seitenaufruf-Tracking – ohne externe Tools.

Vorher vs. Nachher

Was sich verändert hat

Ein direkter Vergleich zeigt, was durch den Einsatz von Claude Code in kurzer Zeit möglich wurde.

Aspekt	✖ Klassisch	✓ Mit Claude Code
Entwicklungszeit	Monate mit Entwicklerteam	Wenige Tage Aufwand
Budget	Fünfstellig für Agentur/Entwickler	Nur Claude Code Lizenzkosten
Inhaltserstellung	Autoren, Redakteure, Lektoren	KI-generiert mit fachlicher Prüfung
Design	UI/UX-Designer erforderlich	Professionelles Design von Claude Code
Chatbot-Integration	Separate Entwicklung & API-Anbindung	Komplett integriert mit Wissensdatenbank
Barrierefreiheit	Zusätzlicher Aufwand & Audit	Von Anfang an mitgedacht
Änderungen	Ticket an Entwickler, Wartezeit	Sofort per Admin-System oder Claude Code

Für eigene Projekte

5 Empfehlungen für den Einstieg

Was macht den Unterschied, wenn man Claude Code für ein eigenes Plattform-Projekt einsetzen möchte?

Konzept zuerst

Ein klares Konzeptdokument mit Struktur, Zielgruppen und Lernzielen ist die beste Grundlage für Claude Code.

Iterativ vorgehen

Nicht alles auf einmal: Erst die Grundstruktur, dann Features einzeln ergänzen. So behält man die Kontrolle.

Inhalte liefern

Je mehr fachlichen Input man gibt, desto besser das Ergebnis. Claude Code ist Werkzeug, nicht Fachexperte.

Testen & Feedback

Regelmäßig prüfen, ob das Ergebnis den Erwartungen entspricht. Korrekturen sind jederzeit möglich.

Mutig sein

Auch ambitionierte Ideen wie Chatbots oder Barrierefreiheit sind mit Claude Code realisierbar – einfach ausprobieren.