So ist mein Projekt entstanden

Hinter den Kulissen

Von der ersten Idee bis zur veröffentlichten Website – mit KI, Tools, Workflows und eigener Verantwortung.

Diese Seite zeigt transparent, wie ich dieses mehrseitige Projekt entwickelt habe, welche Werkzeuge ich tatsächlich eingesetzt habe und wie menschliche Expertise, KI-Unterstützung, Automatisierung und überprüfbare Umsetzung zusammenspielen.

01 · Vorgehen

Wie ich dieses Projekt aufgebaut habe

Fünf Schritte von der fachlichen Idee bis zur veröffentlichten Website.

Ziel klären

Ziel, Zielgruppen, Nachhaltigkeit, KI und Anforderungen definieren.

Inhalte recherchieren & strukturieren

Themen recherchieren, Quellen prüfen, Inhalte ordnen und Seitenstruktur entwickeln.

Prompts & Entwürfe entwickeln

Mit KI Ideen, Texte, Varianten, Visualisierungskonzepte und Seiteninhalte entwickeln.

Technisch umsetzen

HTML, CSS und JavaScript mit VS Code bearbeiten und die einzelnen Projektseiten integrieren.

Prüfen & veröffentlichen

Inhalte, Links, Layout, mobile Darstellung und Funktion prüfen und anschließend über GitHub Pages veröffentlichen.

Mein Beitrag

Anforderungen formulieren
Varianten beurteilen
Inhalte prüfen
Änderungen freigeben
Veröffentlichung steuern

02 · Werkzeugkasten

Welche KIs und Werkzeuge ich eingesetzt habe

Nur tatsächlich eingesetzte Werkzeuge – für jedes kurz erklärt: was und wofür.

ChatGPT

Brainstorming
Strukturierung
Textentwürfe
Formulierungen
Überarbeitung
Seitenkonzepte
Promptentwicklung
Bildgenerierung und Bildbearbeitung

Claude

Unterstützung bei Konzepten
Code-/HTML-/CSS-Unterstützung
Analyse und Strukturierung
Unterstützung beim n8n-Workflow
Dokumentation/Anleitung

Google Gemini

Innerhalb des n8n-Workflows
Thematische Relevanzprüfung von Nachrichten

VS Code

HTML, CSS und JavaScript bearbeiten
Neue Seiten einfügen
Vorhandene Seiten ändern
Projektdateien verwalten

HTML / CSS / JavaScript

Technische Grundlage der Website

GitHub / GitHub Pages

Dateien verwalten
Website veröffentlichen
Änderungen online bereitstellen

n8n

Workflow Automation
Tagesschau-Nachrichtenworkflow

RSS

Nachrichtenquelle des Tagesschau-Workflows

Gmail

Versand der automatisch erstellten Themenübersicht

Miro

Ideen und Inhalte visualisieren und strukturieren

Notion

Wissensbasis, Ablage und Strukturierung

Slack

Austausch und Kommunikation im Kurs während der Projekterstellung

OpenArt

Eingesetzt für KI-generierte Bilder und Videos innerhalb des Projekts.

Bildmotive „Arbeitsalltag“
Musikvideo „Neon Quiet Through The Night“
Sprechvideo „Arbeitsproben & Vision in Bewegung“
Einsatz: Bildgenerierung · Videoanimation · Avatar-/Sprechvideo · visuelle Inszenierung

Illustration: Annette Adler umgeben von den Logos der eingesetzten Werkzeuge – ChatGPT, Claude, Google Gemini, VS Code, HTML/CSS/JavaScript, GitHub, n8n, RSS, OpenArt, Slack, Notion, Miro und Gmail.

Infografik: Übersicht aller eingesetzten KIs und Werkzeuge mit Logos und Kurzbeschreibung – ChatGPT, Claude, Google Gemini, VS Code, HTML/CSS/JavaScript, GitHub/GitHub Pages, n8n, RSS, Gmail, Miro, Notion, Slack und OpenArt.

Übersicht als Infografik

03 · Automatisierung im Detail

Mein n8n-Workflow im Detail

Tagesschau Themenübersicht – Nachhaltigkeit & Klima

Original-Screenshot aus n8n · unverändert

Start

Täglich um 12 Uhr automatisch ausgelöst.

RSS laden

Neue Meldungen aus dem Tagesschau-Feed technisch aufbereiten.

Duplikate prüfen

Bereits verarbeitete Meldungen erkennen.

Relevanz prüfen

Google Gemini bewertet Nachhaltigkeit, Umweltschutz, Klimawandel und Regulatorik.

Digest & Versand

Themenübersicht zusammenführen und per Gmail senden.

Protokoll

Gesendete Artikel speichern, damit der Prozess beim nächsten Lauf nachvollziehbar fortgesetzt wird.

Zur Anleitung des Workflows ↗

Mein Tour-Guide Chatbot

Auf jeder Projektseite begleitet ein schwebender Chat-Assistent die Besucher:innen – der „Tour-Guide". Er stellt sich vor, erklärt bei Bedarf, was auf der jeweiligen Seite zu finden ist, und beantwortet Fragen zum Projekt.

Screenshot des Tour-Guide-Chatfensters mit Gesprächsverlauf und Eingabefeld auf Annettes Portfolio-Website

Original-Screenshot des n8n-Workflows „Portfolio-Tour-Chatbot“: Chat Webhook, Tour-Guide Agent mit Google Gemini Flash Lite und Chat Memory, Respond to Webhook.

Original-Screenshot aus n8n · unverändert

Wie er arbeitet

Rendert sich als eigenständiges Widget (Shadow DOM) auf jeder Seite, unabhängig vom restlichen Seiten-Layout.
Merkt sich die Sitzung im Browser, damit ein Gespräch zusammenhängend bleibt.
Sendet Nachricht, Sitzungs-ID und aktuelle Seite an einen n8n-Webhook.
Ein „Tour-Guide Agent" verarbeitet die Anfrage mit Google Gemini Flash Lite als Sprachmodell und einem Chat-Memory-Baustein für den Gesprächsverlauf.
Die Antwort geht über „Respond to Webhook" zurück und erscheint als Chat-Nachricht.

Welche Inhalte er anbietet

Allgemeine Vorstellung und Orientierung auf der Website.
Seitenspezifischen Kontext – er erkennt, auf welcher Unterseite man sich befindet, und erklärt kurz, worum es dort geht.
Antworten auf allgemeine Fragen rund um das Projekt.

So ist er technisch aufgebaut

Frontend-Widget: ein eigenständiges JavaScript, das sich per Shadow DOM in jede Seite einbindet, ohne deren CSS zu beeinflussen.
Seiten-Kontext-Übersicht: pro Unterseite ein kurzer Titel und eine Kurzbeschreibung, damit der Bot weiß, worüber die aktuelle Seite handelt.
n8n Chat-Webhook: nimmt die Nachricht samt Sitzungs-ID und Seite entgegen.
Tour-Guide Agent: KI-Agent-Baustein mit Google Gemini Flash Lite als Modell und Chat Memory für den Gesprächsverlauf je Sitzung.
Antwort zurück ans Frontend über „Respond to Webhook", dort als Chat-Nachricht angezeigt.

04 · Klare Abgrenzung

Agenten, Workflows und Automatisierungen

Wichtig: Nicht die gesamte Website ist autonom durch einen Agenten entstanden.

Rechercheworkflow

n8n automatisiert definierte Schritte zur Nachrichtenauswahl und Aufbereitung.

KI innerhalb des Workflows

Gemini übernimmt einen abgegrenzten Bewertungsschritt.

Agentische Unterstützung

KI hilft bei Auswahl, Strukturierung und Verarbeitung, arbeitet aber nicht ohne definierte Regeln und Grenzen.

Menschliche Steuerung

Ich bestimme Ziel, Kriterien, Inhalte, Qualitätsanforderungen und Freigabe.

05 · Auswahl statt Vielzahl

Die passenden Werkzeuge auswählen

Illustration: Annette Adler wählt aus einem Regal mit beschrifteten Boxen (Prompts, Data, Workflows, Agents, ChatGPT, Claude, Gemini, n8n u.a.) die passenden Werkzeuge für die richtige Aufgabe aus.

Die passenden Werkzeuge für die richtige Aufgabe

Nicht jedes Tool ist für jede Aufgabe geeignet. Aus der Vielzahl der Möglichkeiten wähle ich die Werkzeuge aus, die für Ziel, Aufgabe und gewünschte Wirkung sinnvoll sind. Entscheidend ist nicht die Menge der eingesetzten KI-Systeme, sondern ihr kontrolliertes Zusammenspiel.

06 · Bildnachweis

Wie die beiden Bilder entstanden sind

Bild 1 – Hero-Motiv

Erstellt mit ChatGPT Bildgenerierung. Visualisiert den gesamten Projektprozess von Idee und Struktur bis zur Website.

Kleine Vorschau des Werkzeugauswahl-Motivs

Bild 2 – Werkzeugauswahl

Erstellt mit ChatGPT Bildgenerierung. Visualisiert die Auswahl und Kombination geeigneter KI-Systeme, Tools, Workflows und Methoden.

07 · Abgrenzung

Im Kurs kennengelernt oder erprobt

Perplexity NotebookLM Gamma Lovable Base44 weitere im Kurs behandelte Modelle und Tools

Diese Werkzeuge gehören zu meinem Lern- und Erprobungskontext. Ihre Nennung bedeutet nicht automatisch, dass sie für die Erstellung dieser Website produktiv eingesetzt wurden.

08 · Qualität & Kontrolle

Qualität und Human-in-the-Loop

Anforderungen und Ziele definiere ich
Inhalte prüfe ich
Quellen und Aussagen werden kontrolliert
Varianten werden von mir bewertet
Änderungen werden bewusst übernommen
Veröffentlichung erfolgt erst nach Prüfung

Daten Quellen Regulatorik Plausibilität Fachliche Freigabe Finale Freigabe

Annette Adler

KI-Übersetzerin für verantwortliche Umsetzung

Consultant für verantwortliche KI & Nachhaltigkeit

„Ich übersetze zwischen Technologie, Menschen und Verantwortung.“

Verstehen. Gemeinsam gestalten. Verantwortlich verbessern.