Daniel sein Blog

über KI, Arbeit & IT

UseCase #02 - Vom Tab-Chaos zum 10-Minuten-Blog mit eigenem KI-Agentensystem

Was früher eine Stunde dauerte, schaffe ich jetzt in zehn Minuten. Statt Tab-Chaos sorgt ein eigenes System mit spezialisierten KI-Agenten für klare Abläufe und konsistente Texte. Du erfährst, wie ein schlankes Frontend und JSON-Dateien den Alltag erleichtern und warum präzise Prompts den Ausschlag geben. Klare Kontrollpunkte verhindern sterile KI-Prosa und bewahren die persönliche Note. Konkrete Beispiele von Opus 4.1 über GPT 5 bis DALL-E 3 zeigen, wie es funktioniert.

Wer kennt das nicht? Du sitzt vor ChatGPT, schreibst einen längeren Text, kopierst ihn heraus, öffnest ein neues Fenster für die Überarbeitung, kopierst wieder, wechselst zu einem anderen GPT für die Struktur, und dann noch zu einem weiteren für die Meta-Beschreibung. Nach einer Stunde hast du zwölf Browser-Tabs offen und weißt nicht mehr, welche Version nun die aktuelle ist. Das mag für gelegentliche Texte funktionieren, aber für regelmäßige Blogbeiträge ist das der pure Wahnsinn.

Genau diese Erfahrung machte ich bei meinem ersten Blogartikel. Jeder Arbeitsschritt bedeutete einen neuen Chat, jede Überarbeitung ein erneutes Kopieren und Einfügen. Die verschiedenen GPTs, die ich für unterschiedliche Aufgaben nutzte, kannten den Kontext der anderen nicht. Ein GPT für die Struktur, einer für den Schreibstil, noch einer für SEO-Aspekte. Das Chaos war perfekt. Dabei ging nicht nur Zeit verloren, sondern auch die Konsistenz litt. Jeder GPT hatte seine eigene Herangehensweise, und am Ende musste ich doch wieder alles manuell zusammenführen und angleichen.

Die vergebliche Suche nach der perfekten Blog-Software

Nach dieser frustrierenden Erfahrung machte ich mich auf die Suche nach einer besseren Lösung. WordPress? Klar, der Klassiker. Aber wer schon einmal versucht hat, WordPress schlank und wartungsarm zu halten, weiß, dass das einem Kampf gegen Windmühlen gleicht. Plugins wollen aktualisiert werden, Sicherheitslücken müssen geschlossen werden, und die Performance leidet unter dem ganzen Ballast, den man eigentlich gar nicht braucht. Für einen einfachen Blog ist WordPress wie mit Kanonen auf Spatzen schießen.

Die anderen Alternativen? Ghost ist schick, aber teuer im Hosting. Medium nimmt dir die Kontrolle über deine Inhalte. Substack ist prima für Newsletter, aber als Blog-Platform eingeschränkt. Und bei allen fehlt das Entscheidende: eine vernünftige, direkte Anbindung an KI-Systeme, die über simple Textvorschläge hinausgeht. Ich wollte nicht nur Rechtschreibkorrektur oder automatische Übersetzungen. Ich wollte einen echten KI-Workflow, der meinen gesamten Schreibprozess unterstützt und dabei meine persönliche Note bewahrt.

Die Geburt einer maßgeschneiderten Lösung

Nach ausgiebiger Recherche und vielen "Gesprächen" mit ChatGPT (DeepRessarch) wurde mir klar, was ich brauche, gibt es nicht von der Stange. Also beschloss ich, selbst Hand anzulegen. Nicht aus Größenwahn, sondern aus der simplen Erkenntnis heraus, dass meine Anforderungen so speziell waren, dass nur eine maßgeschneiderte Lösung sie erfüllen konnte.

Mit Cursor als KI-gestützter Entwicklungsumgebung ging ich das Projekt an. Der Clou dabei war die schrittweise Herangehensweise. Zuerst definierte ich genau, was das System können muss. Artikel schreiben, strukturieren, Meta-Daten generieren, Bilder erstellen, alles in einem Workflow. Dann teilte ich diese Anforderungen in kleine, überschaubare Aufgaben auf. Cursor versteht nicht nur Code, sondern auch Konzepte. Ich konnte meine Vorstellungen in natürlicher Sprache formulieren und bekam funktionierenden Code zurück. Aber nicht in einem Rutsch. Die LinkedIn-Propheten, die behaupten, man könne mit einem einzigen Prompt eine komplette Anwendung vibe-coden, verkaufen Illusionen. Gute Software entsteht iterativ, in kleinen, durchdachten Schritten.

Frontend first: Die Bühne für die Inhalte

Der erste Schritt war das Frontend. Warum? Weil das Interface der Ort ist, an dem ich täglich arbeite. Es musste stimmen, es musste sich gut anfühlen. So ging ich vor: Zuerst skizzierte ich auf Papier, wie die Oberfläche aussehen sollte. Dann beschrieb ich Cursor diese Vision. Schlank, aufgeräumt, ohne Schnickschnack, aber mit allem, was ich brauche. Die Farben sollten angenehm für die Augen sein, auch nach stundenlanger Arbeit. Die Bedienelemente sollten dort sein, wo man sie erwartet, ohne aufdringlich zu wirken.

Das Schöne an der Arbeit mit Cursor war der direkte Feedback-Loop. Eine Idee beschreiben, Code generieren lassen, im Browser anschauen, anpassen, verfeinern. Konkret sah das so aus: Ich startete mit einem einfachen HTML-Grundgerüst, fügte dann Schritt für Schritt die Funktionalitäten hinzu. Erst das Haupttextfeld, dann die Sidebar mit den Meta-Daten, schließlich die Buttons für die verschiedenen KI-Funktionen. Jeder Schritt wurde getestet, bevor der nächste kam.

Die Struktur hielt ich bewusst einfach. Ein großes Textfeld für den Hauptinhalt, kleinere Felder für Metadaten, eine klare visuelle Trennung zwischen den verschiedenen Bereichen. Nichts, was ablenkt, alles, was hilft. Jedes Element hatte seinen Zweck und seinen festen Platz.

Die Datenhaltung: Einfachheit siegt

Dann kam die Frage der Datenspeicherung. Eine Datenbank aufsetzen? MySQL installieren, konfigurieren, absichern? Für einen Blog, der vielleicht 50 Beiträge im Jahr produziert? Nach Rücksprache mit der KI kristallisierte sich eine viel elegantere Lösung heraus: JSON-Dateien.

Eine einzige JSON-Datei speichert alle Blogbeiträge als Array von Objekten. Jeder Beitrag ist ein Objekt mit Feldern für Titel, Inhalt, Datum, Kategorie, Tags und so weiter. Beim Speichern eines neuen Beitrags wird einfach ein neues Objekt ans Array gehängt und die Datei überschrieben. Beim Laden werden alle Beiträge eingelesen und im Frontend angezeigt. Fertig.

"posts": [
    {
      "id": "1734796800001",
      "title": "Willkommen auf meinem Blog",
      "slug": "willkommen-auf-meinem-blog",
      "excerpt": "Ein erster Beitrag um das neue Blog-System zu testen und die Funktionalität zu demonstrieren.",
      "content": "# Willkommen auf meinem neuen Blog!\n\nDies ist der erste Beitrag auf meinem selbst entwickelten Blog-System. Das System ist bewusst minimal und clean gehalten - genau so, wie ich es mag.\n\n## Was erwartet dich hier?\n\nIn diesem Blog werde ich über verschiedene Themen schreiben:\n\n- Web-Entwicklung und neue Technologien\n- Persönliche Projekte und Erkenntnisse\n- Tipps und Tricks aus dem Entwickleralltag\n\n## Das System dahinter\n\nDieses Blog läuft komplett ohne CMS oder Framework. Stattdessen setze ich auf:\n\n- **Frontend**: Pure HTML5, CSS3 und Vanilla JavaScript\n- **Backend**: Einfaches PHP für JSON-File-Operations\n- **Design**: Zeitlos, luftig und minimalistisch\n\nDas Ergebnis ist ein schnelles, wartungsarmes System, das genau das macht, was es soll.\n\n*Viel Spaß beim Lesen!*",
      "category": "Allgemein",
      "tags": ["blog", "willkommen", "web-entwicklung", "minimalism", "performance", "vanilla-js", "css", "html", "javascript"],
      "author": {
        "name": "Daniel Mustermann",
        "email": "daniel@example.com"
      },
      "published": true,
      "pinned": false,
      "guestPost": false,
      "readingTime": {
        "minutes": 4,
        "formattedTime": "~4 Min. Lesezeit"
      },
      "createdAt": "2024-12-21T18:00:00Z",
      "updatedAt": "2024-12-21T18:00:00Z",
      "featuredImage": {
        "url": "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=400&fit=crop",
        "alt": "Laptop mit Code auf dem Bildschirm",
        "width": 800,
        "height": 400
      }
    }, ...

Diese Lösung hat sich als goldrichtig erwiesen. Kein Datenbankserver, der gewartet werden muss. Keine SQL-Injections, vor denen man sich schützen muss. Keine Verbindungsprobleme, keine Timeouts. Solange nicht hunderte Nutzer gleichzeitig auf die Daten zugreifen, reicht diese Lösung vollkommen aus. Die Performance-Einbußen sind marginal, die Einfachheit der Wartung unbezahlbar. Backups? Ein simpler Datei-Download. Migration auf einen anderen Server? Dateien kopieren, fertig.

Der agentische KI-Workflow als Herzstück

Nun zum eigentlichen Clou der Lösung, dem Backend mit seiner KI-Integration. Hier wollte ich nicht einfach nur ein Textfeld, das an ChatGPT angebunden ist. Ich wollte einen durchdachten Workflow, bei dem verschiedene spezialisierte KI-Agenten zusammenarbeiten.

So funktioniert das System in der Praxis: Der Nutzer gibt ein Thema oder einen Rohentwurf ein. Mit einem Klick auf das "Brain Icon" startet der Workflow. Der Hauptagent, der Anthropics Opus 4.1 nutzt, erstellt den Grundtext. Der Prompt dafür ist keine Kleinigkeit. Über 1000 Zeilen lang, verfeinert über Monate hinweg. Er enthält nicht nur Anweisungen zum Schreibstil, sondern auch Beispiele, Ausnahmen, und vor allem meine persönliche Note. Dieser Prompt ist das Ergebnis unzähliger Iterationen und Verfeinerungen.

SPECIFIC TASK: BLOG CONTENT CREATION
The user will provide their initial ideas and requirements in the DRAFT field. Treat the user's DRAFT input with ABSOLUTE PRIORITY over all other form elements.

CRITICAL RULES:
- User input from DRAFT field has ABSOLUTE PRIORITY over title, tags, content, etc.
- Create extensive, deep-diving text that thoroughly explores the subject matter
- Blog posts thrive on substantial text
- Use lists only in rare cases - continuous text takes precedence
- Each paragraph should be substantial and informative
- Focus on comprehensive, detailed treatment of the topic
- DO NOT USE EM-Dashes or Colons
- DO NOT write introductory sections - there will already be a main headline and teaser text
- DO NOT create introductory headlines - start directly with content
- NEVER use top-level # headlines in markdown - this level is already reserved
- For code examples or snippets use triple backticks to introduce them
- You deliver ONLY the content for the post - nothing else
- YOU WILL APPLY THESE WRITING RULES DYNAMICALLY AND VARIABLY:
- Use these rules as your creative toolkit apply them FLEXIBLY and NATURALLY
- Don't apply ALL rules to EVERY sentence that makes text monotonous
- Mix different intensities: sometimes intensely apply a rule, sometimes subtly, sometimes skip it
- Create DYNAMIC rhythm by varying which rules you emphasize in different sections
- Let the content flow naturally rules serve the story, not the other way around
- This creates more engaging, varied, and lively blog content

"meta": {
    "version": "2.0",
    "purpose": "Masterprompt für KI-Schreibassistenten"
  },
  
  "criticalRules": [
    {
      "id": 1,
      "category": "Textanfang",
      "rule": "Feurig beginnen - Der erste Satz muss Aufmerksamkeit erregen",
      "importance": "kritisch",
      "description": "Wer nach dem ersten Satz den zweiten nicht liest, ist nicht von dieser Welt. Verwende Überraschung, Konkretheit oder Spannung.",
      "examples": [
        { ...

Im Anschluss daran arbeitet GPT-5 an der Struktur des Beitrags. Wie das technisch umgesetzt ist? Über die OpenAI API wird der Rohtext geschickt, zusammen mit einem spezialisierten Prompt, der klare Anweisungen für die Strukturierung enthält. Das Modell analysiert den Text und gibt eine JSON-Struktur zurück mit Überschriften, Absätzen und Kernaussagen. Diese Struktur wird dann automatisch in den Editor übernommen, kann aber jederzeit manuell angepasst werden.

Menschliche Kontrolle im maschinellen Prozess

Nach jedem Schritt habe ich die Möglichkeit einzugreifen. Technisch realisiert durch einfache Checkboxen und Bestätigungsdialoge. Bevor der strukturierte Text weiterverarbeitet wird, erscheint er im Editor und ich kann Änderungen vornehmen. Erst wenn ich auf das "Sternchen Icon" klicke, geht es weiter zum nächsten Agenten.

Diese Kontrollpunkte sind entscheidend. Sie verhindern, dass die typische KI-Sterilität entsteht, die man von vollautomatisch generierten Texten kennt. In meiner Erfahrung macht genau das den Unterschied zwischen einem seelenlosen KI-Text und einem Artikel, der tatsächlich gelesen wird. Die KI liefert das Rohmaterial, aber die finale Würze kommt vom Menschen.

Nach der Haupttexterstellung kümmern sich spezialisierte Agenten um die Details. So läuft das ab: Ein Agent analysiert den fertigen Beitrag und extrahiert fünf bis sieben relevante Tags, immer nur als einzelne Wörter. Der Prompt dafür ist sehr spezifisch und verhindert, dass Phrasen oder zu allgemeine Begriffe gewählt werden. Ein anderer Agent formuliert den Teaser-Text. Hier nutze ich einen Trick: Der Agent bekommt nur die ersten drei und die letzten zwei Absätze des Artikels, um einen prägnanten Teaser zu erstellen, der neugierig macht ohne zu viel zu verraten. Dann noch ein catchy Titel, ein URL slug und eine Rubrik, alles mit und durch die KI.

blogbackend-interface

Die visuelle Komponente: KI-generierte Bilder

Der letzte Schritt betrifft die Bilder. Ein Blogbeitrag ohne passendes Titelbild? Undenkbar in der heutigen Zeit. So habe ich das gelöst: Ein spezieller Agent analysiert den fertigen Blogbeitrag und erstellt daraus einen Bildprompt. Dieser Agent wurde darauf trainiert, abstrakte Konzepte in visuelle Beschreibungen zu übersetzen. Der Prompt geht dann an DALL-E 3, das ein passendes Bild generiert.

Der Workflow sieht konkret so aus: Der Text-zu-Bild-Agent extrahiert die Kernthemen des Artikels und formuliert daraus eine Bildbeschreibung. Diese Beschreibung enthält immer Stilangaben wie "minimalist illustration" oder "professional photography", je nach Artikeltyp. Das generierte Bild wird automatisch heruntergeladen, in der richtigen Größe gespeichert und mit dem Artikel verknüpft. Ein weiterer Agent analysiert das Bild und erstellt einen aussagekräftigen Alt-Text für die Barrierefreiheit.

Dieser gesamte Prozess läuft weitgehend parallel ab. Während ein Agent noch am Teaser-Text feilt, generiert ein anderer bereits das Bild. Technisch realisiert durch asynchrone API-Calls, die im Hintergrund ablaufen. Das spart Zeit und nutzt die Ressourcen optimal.

Prompt Engineering als Schlüssel zum Erfolg

Die wichtigste Erkenntnis auch aus diesem Projekt ist die zentrale Bedeutung der Prompt-Qualität. Jeder einzelne Agent braucht präzise, durchdachte Anweisungen. Ein schwammiger Prompt führt zu schwammigen Ergebnissen. Ein zu restriktiver Prompt erstickt die Kreativität.

Nehmen wir ein konkretes Beispiel, den Prompt für die Teaser-Texte. So ist er aufgebaut: Erst eine klare Rollendefinition ("Du bist ein erfahrener Copywriter"), dann die Aufgabenbeschreibung, gefolgt von konkreten Dos and Don'ts. Zum Beispiel: "Verwende maximal 160 Zeichen", "Stelle eine Frage oder mache eine provokante Aussage", "Vermeide Clickbait-Formulierungen". Am Ende stehen drei Beispiele für gute Teaser zu ähnlichen Themen. Diese Struktur hat sich nach vielen Experimenten als optimal erwiesen.

Der Prompt für die Bildgenerierung funktioniert anders. Er muss aus einem möglicherweise abstrakten Blogbeitrag konkrete visuelle Konzepte extrahieren. Die Lösung war ein mehrstufiger Ansatz. Erst identifiziert der Agent das Hauptthema, dann überlegt er sich drei mögliche visuelle Metaphern, und wählt schließlich die beste aus. Diese wird dann in eine detaillierte Bildbeschreibung für DALL-E umgewandelt.

Der Unterschied macht den Unterschied

Was unterscheidet diese Lösung nun vom Arbeiten in Chat-Interfaces? Es ist die Integration, die Automatisierung und die Spezialisierung. Statt zwischen verschiedenen Chat-Fenstern hin und her zu springen, habe ich einen durchgängigen Workflow. Die Daten fließen automatisch von einem Agenten zum nächsten, der Kontext bleibt erhalten, die Ergebnisse bauen aufeinander auf. Was früher eine Stunde dauerte, erledige ich jetzt in zehn Minuten. Thema eingeben (das nimmt die meiste Zeit in Anspruch), auf das "Hirn" klicken, kurz warten, die Ergebnisse reviewen und anpassen, fertig. Der Artikel ist geschrieben, strukturiert, mit Meta-Daten versehen und hat ein passendes Bild. Alles in einem System, ohne Copy-Paste, ohne Tab-Wechsel, ohne Kontextverlust.

Gleichzeitig bleibt die Flexibilität erhalten. Wenn ich einen Beitrag komplett manuell schreiben will, kann ich das. Wenn ich nur einzelne KI-Funktionen nutzen möchte, geht auch das. Das System zwingt mich zu nichts, es bietet nur Möglichkeiten. Diese Balance zwischen Automatisierung und Kontrolle war mir von Anfang an wichtig.

Praktische Erkenntnisse aus dem Betrieb

Nach mehreren Monaten mit diesem System haben sich einige wichtige Erkenntnisse herauskristallisiert.

  1. Weniger Code ist oft mehr. Statt Features um Features hinzuzufügen, habe ich mich auf das Wesentliche konzentriert. Jede Funktion muss einen klaren Mehrwert bieten, sonst fliegt sie raus. Ein Beispiel: Anfangs hatte ich eine komplexe Versionsverwaltung für Artikel eingebaut. Nach zwei Wochen habe ich sie wieder entfernt, weil ich sie nie genutzt habe.
  2. Die Wartbarkeit steht über allem. Komplexer Code mag beeindruckend sein, aber wenn ich ihn nach drei Monaten selbst nicht mehr verstehe, habe ich ein Problem. Deshalb halte ich die Struktur einfach. Jede Funktion ist in einer eigenen Datei, jeder API-Call ist gekapselt, jeder Prompt liegt in einer separaten Konfigurationsdatei.
  3. Die ständige Verfeinerung der Prompts ist essentiell. Mit jedem Blogbeitrag lerne ich dazu, erkenne Schwächen in den Anweisungen, finde bessere Formulierungen. Ein konkretes Beispiel: Anfangs produzierte der Hauptagent oft zu lange Einleitungen. Nach einigen Anpassungen im Prompt ("Komme schnell zum Punkt, maximal zwei Einleitungssätze") wurde das Problem gelöst.

Die Zukunft des persönlichen Publishings

Dieses Projekt hat mir gezeigt, wohin die Reise geht. Weg von monolithischen Systemen, die versuchen, alles für alle zu sein. Hin zu spezialisierten, personalisierten Lösungen, die genau das tun, was der einzelne Nutzer braucht. Die KI macht es möglich, solche Systeme ohne großes Programmier-Knowhow zu erstellen.

Aber es braucht immer noch Verständnis für die Materie. Man muss wissen, was man will. Man muss die Ergebnisse bewerten können. Man muss bereit sein, zu iterieren und zu verbessern. Die KI nimmt einem nicht das Denken ab, sie verstärkt es nur.

Für mich war dieser Anwendungsfall eine Offenbarung. Er hat gezeigt, dass KI weit mehr kann als nur Texte generieren oder Fragen beantworten. Richtig eingesetzt, kann sie komplette Workflows automatisieren, verschiedene Aufgaben orchestrieren und dabei trotzdem Raum für menschliche Kreativität und Kontrolle lassen.

Der Weg von der Idee zur funktionierenden Lösung war nicht immer einfach. Es gab Rückschläge, Sackgassen, Momente des Zweifels. Aber das Endergebnis rechtfertigt den Aufwand. Ich habe nicht nur ein Blog-System, das perfekt zu meinen Bedürfnissen passt. Ich habe auch unglaublich viel über KI, Programmierung und meine eigenen Arbeitsabläufe gelernt.

Wer ähnliche Herausforderungen hat, dem kann ich nur raten: Traut euch, eigene Wege zu gehen. Die Werkzeuge sind da, die KI-Modelle werden immer besser, und die Einstiegshürden sinken kontinuierlich. Man muss kein Programmierer sein, um eigene Lösungen zu entwickeln. Man muss nur wissen, was man will, und bereit sein, es Schritt für Schritt umzusetzen. Der Schlüssel liegt darin, klein anzufangen, iterativ zu verbessern und sich nicht von der scheinbaren Komplexität abschrecken zu lassen.