Termin buchen

Context Engineering in der Praxis: Wie wir mit KI 196 Seiten in 3 Tagen migriert haben

Context Engineering Case Study: CLAUDE.md, Skills, MCP-Server und Agentic Workflows — wie Cloud Consultants 196 Seiten in 3 Tagen von WordPress zu Astro migriert hat.

Context Engineering in der Praxis: Wie wir mit KI 196 Seiten in 3 Tagen migriert haben

Context Engineering ist die Disziplin, KI-Systemen den richtigen Kontext zur Verfügung zu stellen — über persistente Projektdateien, wiederverwendbare Skills und Tracking-Systeme, die über einzelne Sessions hinaus funktionieren. Es ist der Unterschied zwischen „mit KI chatten” und „mit KI ingenieurmässig arbeiten.”

Agenturen veranschlagen für einen Website-Relaunch 3–6 Monate und CHF 20’000–50’000. Wir haben es in 3 Tagen geschafft — mit KI. Doch die eigentliche Geschichte handelt nicht von Geschwindigkeit. Sie handelt von der Engineering-Disziplin dahinter: Context Engineering, Agentic Workflows und MCP-Integrationen, die 80+ KI-Sessions zu einem durchgängigen Projekt verknüpft haben.

Das Wichtigste in Kürze

  • Context Engineering: Der Schlüssel lag nicht im KI-Modell, sondern im Context Engineering — der systematischen Architektur von CLAUDE.md, Skills und Tracking-Dateien, die 80+ Sessions zu einem durchgängigen Projekt verknüpfen.
  • Agentic Workflows: Mit wiederverwendbaren KI-Skills (13-Schritt-Pipelines), MCP-Server-Integrationen und parallelen Subagenten haben wir nicht nur eine Website gebaut — wir haben ein skalierbares KI-Produktionssystem entwickelt.
  • Messbare Ergebnisse: 196 Seiten migriert, alle Inhalte auf 2026 aktualisiert, PageSpeed 100/100/100/100, null Cookies — in 3 Tagen, mit einem Team aus einem Menschen und KI.

Dieser Artikel zeigt, wie wir 196 Blog-Artikel, 18 Glossareinträge und 13 statische Seiten von WordPress zu Astro migriert haben — und warum Context Engineering den Unterschied gemacht hat. Wie wir dieselbe Methodik gezielt in Salesforce-Projekten einsetzen, zeigen wir in unserem Artikel zur KI-gestützten Salesforce-Entwicklung.

Warum der Relaunch überfällig war

Unsere WordPress-Seite hatte die typischen Symptome: Plugin-Bloat, monatliche Sicherheitsupdates, PHP-Hosting mit variablen Ladezeiten und ein Theme, das bei jeder Anpassung Kompromisse erforderte. Für ein Unternehmen, das Salesforce-Implementierungen berät, war die eigene Website ein Widerspruch — komplex, wo sie einfach sein sollte.

Die Anforderungen für den Relaunch waren klar:

  • Maximale Performance: Statische Seiten, kein Server-Rendering, globales CDN
  • Volle Kontrolle: Schema-Markup, Sitemap, Canonical URLs, Robots.txt — alles als Code, nicht als Plugin
  • Zero JavaScript by Default: Nur laden, was wirklich interaktiv sein muss
  • MDX-Support: Markdown mit Komponenten für strukturierte Content-Patterns wie „Das Wichtigste in Kürze”-Boxen
  • Kosteneffizienz: Kein Premium-Hosting, keine Plugin-Lizenzen

Astro erfüllte alle Kriterien. Als statischer Site-Generator mit Islands Architecture liefert Astro reines HTML ohne JavaScript-Overhead — eine echte WordPress-Alternative für content-lastige Websites. Zusammen mit Cloudflare Pages als kostenlosem Hosting-Layer entstand eine Architektur, die schneller, sicherer und günstiger ist als jedes WordPress-Setup.

Der Website-Relaunch: 199 Dateien, 55 Commits, 3 Tage

Die WordPress-Migration war kein monatelanges Projekt, sondern ein konzentrierter Sprint — 55 Commits in 3 Tagen, unterstützt von Claude Code mit dem Claude Opus 4.6 Modell.

Timeline der Website-Migration von WordPress zu Astro: 199 Dateien migriert, 55 Commits, 3 Tage Projektdauer

Tag 1: Fundament und Migration Projekt-Setup auf Astro, Cloudflare-Pages-Konfiguration, Branding-System als Code, Kontaktformular-Integration. Der Kern: Migration von 199 MDX-Dateien aus WordPress-Exporten. Jede Datei wurde konvertiert, mit strukturiertem Frontmatter versehen und in die neue Cluster-Architektur eingeordnet. 78 URL-Redirects sicherten bestehende Rankings.

Tag 2: Qualität und Optimierung Performance-Optimierung auf PageSpeed 100/100/100/100. Accessibility-Audit nach WCAG AA. Mobile Responsiveness. Optimierung von 798 WebP-Bildern — jedes mit korrektem alt-Text, width/height-Attributen für CLS-Vermeidung und Lazy Loading.

Tag 3: Content-Expansion und Go-Live 10 neue CRM-Artikel geschrieben und veröffentlicht. Finaler Polish. Go-Live auf Cloudflare Pages mit automatischem SSL und Git-Deploy-Pipeline.

MetrikWert
Commits55
Migrierte MDX-Dateien199
Blog-Artikel196
Glossareinträge18
WebP-Bilder798
URL-Redirects78
Zeilen hinzugefügt40’188
Zeilen entfernt14’602

KI als Entwicklungspartner: Claude Code im Einsatz

Claude Code war nicht einfach ein Coding-Assistent — es war der Entwicklungspartner für das gesamte Projekt. Konkret übernahm die KI vier Aufgabenbereiche:

Claude Code als KI-Entwicklungspartner: Content-Review, SEO-Optimierung, Bildgenerierung und Code-Generierung in einem integrierten Workflow

Content-Accuracy-Review: In 12 geplanten Review-Sessions prüfte die KI 203 Content-Dateien gegen aktuelle Fakten. Salesforce-Preise wurden auf 2026 aktualisiert (Starter Suite $25, Pro Suite $100, Enterprise $175, Unlimited $350). Umbenannte Editionen korrigiert — „Professional” existiert nicht mehr, „Essentials” heisst jetzt „Starter Suite”. Veraltete Features wie Process Builder (sunset Dezember 2025) wurden identifiziert und entfernt.

SEO-Optimierung: 6 Schema-Typen implementiert (Article, BlogPosting, HowTo, FAQPage, LocalBusiness, CollectionPage). SpeakableSpecification für Voice-Assistenten. Build-Time-Link-Validation, die defekte Links zur Compile-Zeit erkennt — nicht erst in der Produktion.

KI-generierte Bilder: 196 Hero-Bilder generiert, jedes im Brand-Stil mit automatisch injiziertem Style-Prompt. WebP-Optimierung auf 1’200px Breite, Quality 82.

Code-Generierung: SEO-Komponenten, Build-Plugins, Schema-Injection, RSS-Feed für KI-Crawler, Sitemap-Generierung — alles als Astro-Komponenten und Build-Skripte, nicht als Plugins.

Context Engineering: 80 Sessions, 200k Token Kontext — So funktioniert KI im grossen Massstab

Dies ist die Kernfrage: Wie führt man ein Projekt mit 196 Artikeln, 798 Bildern, 22+ Strategiedokumenten und Tausenden Zeilen Code durch — wenn jede KI-Session auf ~200’000 Token Kontext begrenzt ist?

Die Antwort ist Context Engineering. Nicht das Modell macht den Unterschied — Claude Opus 4.6 ist für alle verfügbar. Was dieses Projekt möglich gemacht hat, ist die systematische Architektur des Kontexts.

Cross-Session-Architektur

Fünf Bausteine halten das Projekt über 80+ Sessions kohärent:

CLAUDE.md — Die Projekt-Instruktionsdatei, die Claude automatisch bei jedem Session-Start lädt. Sie enthält Projektstruktur, Brand-Regeln, Content-Konventionen, MDX-Syntax-Gotchas und Salesforce-Preis-Updates. Jede Session beginnt mit demselben Wissensstand.

Memory Files — Auto-aktualisierte Lernnotizen, die über Sessions hinaus persistieren. Wenn Claude in Session 23 entdeckt, dass Process Builder seit Dezember 2025 nicht mehr existiert, speichert es diese Information. Session 24 weiss es bereits.

Plan Files — Detaillierte Mehrphasen-Pläne wie SEO-GEO-LAUNCH-PLAN.md, MDX-MIGRATION-PLAN.md und CONTENT_REVIEW_INSTRUCTIONS.md. Jeder Plan dokumentiert, was erledigt ist und was als Nächstes ansteht.

Tracking Files — Session-by-Session-Fortschrittsprotokolle. CONTENT_REVIEW_TRACKING.md dokumentiert, welche der 203 Dateien geprüft wurden, welche Korrekturen anstanden und was noch offen ist.

Skills — Wiederverwendbare Workflow-Dokumente (SKILL.md), die Claude wie ein Skript ausführt. Statt den Artikel-Schreib-Prozess in jeder Session neu zu erklären, codiert ein Skill die gesamte 13-Schritt-Pipeline.

MCP-Server — Externe Tool-Integration

Das Model Context Protocol (MCP) gibt der KI direkten Zugriff auf externe Datenquellen — kein manuelles Kopieren von Daten, keine Screenshots:

  • Google Search Console MCP: Ranked Keywords, Impressionen, CTR, Indexierungsprobleme. Damit identifizierten wir die 53 rankenden Keywords und priorisierten Low-CTR-Seiten.
  • DataForSEO MCP: Keyword-Recherche (Suchvolumen, Keyword Difficulty, Trends), SERP-Analyse, Wettbewerber-Intersection. Grundlage für alle 22+ Topic-Cluster.
  • Cloudflare Analytics MCP: Post-Launch-Traffic-Monitoring via GraphQL — Seitenaufrufe, Referrer, Core Web Vitals, Geo-Daten. Ersetzt Google Analytics vollständig.
  • Google Analytics MCP: Baseline-Traffic-Daten der alten WordPress-Seite für den Vorher-Nachher-Vergleich.

Parallele Subagenten

Claude Code kann Subagenten für parallele Arbeit spawnen. Während der Hauptagent einen Artikel schreibt, recherchiert ein Subagent Statistiken, ein weiterer generiert Bilder. Die Subagenten schützen das Hauptkontext-Fenster: Web-Suchen und API-Aufrufe bleiben im Subagenten-Kontext und belasten nicht die 200k Token des Hauptagenten.

Der entscheidende Punkt: Skills und Pläne sind das institutionelle Gedächtnis des Projekts. Ohne sie startet jede Session von null. Mit ihnen ist Session 80 genauso produktiv wie Session 1 — die KI kennt die Konventionen, die Tracking-Dateien zeigen den Fortschritt, und die Skills liefern reproduzierbare Workflows.

KI-Agenten erstellen: Wiederverwendbare Skills als Automatisierungs-Pipeline

Skills sind das Herzstück unseres KI-Workflows. Statt einzelne Prompts zu schreiben, haben wir mehrstufige Automatisierungs-Pipelines entwickelt:

write-cluster-article — Eine 13-Schritt-Pipeline für SEO-optimierte Blog-Artikel:

  1. Cluster-Definition laden und fehlende Artikel identifizieren
  2. Branding-Dateien lesen (Tone of Voice, ICP, Brand System)
  3. Keyword-Recherche via DataForSEO
  4. Fakten-Recherche via Subagent (separate Context-Window-Kapazität)
  5. Pillar-Page und Sibling-Artikel für Interlinking-Kontext lesen
  6. Artikel schreiben mit ausschliesslich verifizierten Statistiken
  7. Fact-Check-Audit gegen die recherchierten Quellen
  8. Hero-Image generieren, reviewen, optimieren, deployen
  9. 4 Section-Images mit Brand-Logo-Overlay
  10. Cross-Links von bestehenden Artikeln zum neuen Artikel setzen
  11. Build ausführen und verifizieren
  12. Cluster-Definition aktualisieren
  13. Report erstellen

image-generator — Brand-konsistente KI-Bilder mit automatischer Style-Injection aus brand-style-prompt.txt. Generieren → Reviewen → Iterieren → Genehmigen → Optimieren → Deployen.

brand-voice-generator — Tone-of-Voice-Enforcement aus den Brand-Dateien. Generiert tone-of-voice.md, brand-system.md und brand.json, die von allen content-produzierenden Skills gelesen werden.

Diese 3 Skills haben wir in .claude/skills/ angelegt. Sie sind das Äquivalent zu wiederverwendbaren Templates — jedes Projekt kann sie adaptieren, und jede Session führt denselben Qualitätsstandard aus.

SEO und GEO — Was WordPress nie konnte

WordPress liefert SEO-Grundlagen über Plugins wie Yoast. Astro liefert volle Kontrolle über jeden Aspekt der technischen SEO — als Code, nicht als Konfiguration.

6 Schema-Typen: Article, BlogPosting, HowTo, FAQPage, LocalBusiness und CollectionPage — direkt in SEOHead.astro implementiert. Jeder Blog-Artikel hat automatisch das korrekte strukturierte Markup.

Answer Engine Optimization (AEO): Jeder Artikel folgt dem Inverse-Pyramid-Prinzip — Antwort zuerst, dann Kontext, dann Nuancen. „Das Wichtigste in Kürze”-Boxen dienen als Speakable-Content für Voice-Assistenten und AI Overviews.

SpeakableSpecification: Strukturierte Daten, die Voice-Assistenten und KI-Systemen sagen, welchen Content sie vorlesen sollen — .post-title, .post-description und .key-takeaways.

Build-Time-Link-Validation: Ein Astro-Plugin prüft bei jedem Build alle internen Links. Defekte Links werden zur Compile-Zeit erkannt — nicht erst, wenn ein Besucher einen 404-Fehler sieht.

RSS-Feed für KI-Crawler: Ein dedizierter Feed, der von KI-Systemen wie Perplexity und ChatGPT gecrawlt werden kann.

Topic Clustering: Wie wir mit Hub-and-Spoke-Architektur Topical Authority aufbauen

WordPress hatte eine flache Blog-Struktur — jeder Artikel war eine Insel. Astro und unsere Cluster-Architektur haben 196 isolierte Posts in ein vernetztes Wissensgraph transformiert.

Hub-and-Spoke-Architektur für Topic Clustering: Pillar-Page im Zentrum mit radiierenden Spoke-Artikeln, die untereinander und mit dem Pillar verlinkt sind

Das Hub-and-Spoke-Modell: Eine Pillar-Page (3’000–4’500 Wörter) bildet den Hub, umgeben von 6–12 Spoke-Artikeln (1’200–2’000 Wörter) zu spezifischen Subtopics. Googles semantisches Verständnis wertet einen Cluster interverknüpfter Seiten deutlich stärker als isolierte Artikel.

22+ Topic-Cluster definiert über Strategiedokumente. Jeder Cluster hat klare Grenzen, validiert durch SERP-Overlap-Analyse: Bei mehr als 70 % Überschneidung der SERP-Ergebnisse gehören Keywords auf dieselbe Seite, bei 30–70 % in denselben Cluster, unter 30 % in verschiedene Cluster.

Technische Umsetzung: Frontmatter-Felder (cluster, clusterGroup, pillarSlug, isPillar) treiben die Architektur. ClusterNav-Komponenten rendern automatisch alle Spoke-Artikel auf Pillar-Pages. Der Related-Posts-Sidebar zeigt Cluster-Geschwister, nicht zufällige Artikel. CollectionPage-Schema listet alle Spoke-URLs als strukturierte Daten.

Konkretes Beispiel: Der CRM-Cluster hat eine Pillar-Page bei Die 14 besten CRM-Systeme im DACH-Raum mit über 10 Spoke-Artikeln — alle interverlinkt, alle gegenseitig Authority-verstärkend. Salesforce Agentforce bildet einen eigenen Cluster mit über 20 Spoke-Artikeln.

Keine Cookies, kein Banner: Privacy by Design

Consent-Banner sind ein UX-Problem: Sie verlangsamen den Seitenaufbau, irritieren Besucher und schaffen rechtliche Angriffsfläche. Unsere Lösung: eine Website ohne Cookies — komplett.

Privacy by Design: Website ohne Cookies, ohne Consent-Banner, ohne Tracking — vollständig konform mit Schweizer nDSG und EU ePrivacy-Richtlinie

Die rechtliche Basis: Gemäss Schweizer nDSG und EU ePrivacy-Richtlinie Art. 5(3) ist ein Consent-Banner nur nötig, wenn Informationen auf dem Endgerät des Nutzers gespeichert oder ausgelesen werden. Analytics ohne Cookies, localStorage oder Fingerprinting sind explizit ausgenommen.

Die Lösung: Cloudflare Web Analytics. Ein leichtgewichtiges Skript (~5 KB), das pro Seitenaufruf anonyme Daten erfasst — Seitenaufrufe, Referrer, Core Web Vitals, Geo-Daten. Kein Cookie, kein localStorage, kein Fingerprinting. Kein seitenübergreifendes Tracking. Kein Consent-Banner nötig gemäss ePrivacy Art. 5(3), da nichts auf dem Endgerät gespeichert wird.

Das Ergebnis: Saubere Seiten ohne Banner, ohne Cookies, ohne Kompromisse bei der Datenqualität.

Statische Seiten, maximale Performance

Statische Websites sind die performanteste Architektur im Web: vorgerendertes HTML, keine Server-Berechnung, globale CDN-Auslieferung. Astros Islands Architecture geht noch weiter — zero JavaScript by default, selektive Hydration nur dort, wo Interaktivität nötig ist.

Cloudflare Pages als Hosting-Layer liefert automatisches SSL, Instant-Git-Deploys und globale Edge-Verteilung. Kosten: $0 auf dem Free Tier.

Das Ergebnis spricht für sich:

PageSpeed Insights Ergebnis von cloudconsultants.ch mit perfekten Scores: Performance 100, Accessibility 100, Best Practices 100, SEO 100 — getestet am 14. Februar 2026

MetrikWordPress (typisch)Astro + Cloudflare
Performance45–65100
Accessibility70–85100
Best Practices75–90100
SEO80–95100
JavaScript200–500 KB~0 KB
Hosting-Kosten/JahrCHF 300–500CHF 0

Ergebnisse und Fazit

In 3 Tagen haben wir eine komplette Website von WordPress zu Astro migriert — 196 Blog-Artikel, 18 Glossareinträge, 13 statische Seiten, 798 Bilder, 78 URL-Redirects. PageSpeed 100/100/100/100. Null Cookies. 1’218 Dateien im Git-Repository.

Kostenvergleich: WordPress-Hosting mit Premium-Plugins kostet typischerweise CHF 300–500 pro Jahr. Cloudflare Pages: CHF 0. Dazu kommt der Claude Max 20x Plan für $200/Monat als KI-Engine — ein Bruchteil dessen, was eine Agentur für denselben Scope berechnen würde.

Was haben wir gelernt?

  1. Context Engineering ist wichtiger als das Modell. Claude Opus 4.6, Astro, Cloudflare Pages — diese Tools stehen jedem zur Verfügung. Was dieses Projekt möglich gemacht hat, war nicht die Technologie, sondern die Architektur: CLAUDE.md-Dateien, die den Projektkontext persistent halten. Skills, die komplexe Workflows als reproduzierbare Pipelines codieren. Tracking-Systeme für Cross-Session-Kontinuität. MCP-Integrationen für Live-Datenzugriff.
  2. Agentic Workflows skalieren. Einmal definierte Skills laufen in jeder Session identisch. Das System, das wir für den Relaunch gebaut haben, produziert jetzt wöchentlich neue Artikel — mit derselben Qualitätssicherung, denselben Fact-Checks, denselben Brand-Regeln.
  3. Statisch schlägt dynamisch. Für content-lastige Websites gibt es keinen Grund mehr für Server-Rendering. Statische Seiten sind schneller, sicherer, billiger und einfacher zu warten.

Das ist die Disziplin, die „mit KI chatten” von „mit KI ingenieurmässig arbeiten” trennt. Und genau diese Disziplin bringen wir in unsere Kundenprojekte ein — ob KI-gestützte Salesforce-Entwicklung oder Prozessautomatisierung.

Das System läuft. Wie es konkret in der Praxis aussieht, wenn Claude Code Dispatch eine Content-Aufgabe vollständig autonom von der Textnachricht bis zum veröffentlichten Artikel durchführt, zeigen wir in unserem KI-gestützten Content-Publishing-Workflow mit Claude Code Dispatch.

Häufig gestellte Fragen

Was ist Context Engineering und warum ist es für KI-Projekte entscheidend?

Context Engineering ist die Disziplin, KI-Systemen den richtigen Kontext zur Verfügung zu stellen — über persistente Projektdateien (CLAUDE.md), wiederverwendbare Skills und Tracking-Systeme, die über einzelne Sessions hinaus funktionieren. Es ist der Unterschied zwischen 'mit KI chatten' und 'mit KI ingenieurmässig arbeiten.' Ohne Context Engineering startet jede KI-Session von null — mit Context Engineering ist Session 80 genauso produktiv wie Session 1.

Was braucht man für einen Website-Relaunch mit KI?

Für einen KI-gestützten Website-Relaunch brauchen Sie drei Dinge: ein leistungsfähiges KI-Coding-Tool (z.B. Claude Code), eine systematische Context-Engineering-Architektur (Projektdateien, Skills, Tracking) und ein statisches Zielframework (z.B. Astro). Die KI übernimmt Migration, Content-Prüfung, SEO-Optimierung und Bildgenerierung — aber nur, wenn der Kontext stimmt.

Was ist ein Agentic Workflow in der KI-Entwicklung?

Ein Agentic Workflow ist ein KI-System, das autonom mehrstufige Aufgaben ausführt — z.B. Keyword-Recherche, Artikel schreiben, Fakten prüfen, Bilder generieren und Links setzen in einer Pipeline. Im Gegensatz zu einfachen Prompts arbeitet die KI hier wie ein eigenständiger Agent mit definierten Schritten.

Was ist ein MCP-Server und wie wird er bei KI-Projekten eingesetzt?

MCP (Model Context Protocol) ermöglicht es KI-Agenten, direkt auf externe Datenquellen zuzugreifen — z.B. Google Search Console, DataForSEO oder Cloudflare Analytics. Statt manuell Daten zu kopieren, kann die KI live Keyword-Daten abfragen, Rankings analysieren und Traffic-Metriken auswerten.

Braucht man einen Cookie-Banner bei Cloudflare Web Analytics?

Nein. Cloudflare Web Analytics verwendet keine Cookies, kein localStorage und kein Fingerprinting. Gemäss ePrivacy-Richtlinie Art. 5(3) ist ein Consent-Banner nur nötig, wenn Informationen auf dem Endgerät gespeichert werden.

Bereit, Ihre Salesforce-Lösung zu optimieren?

Buchen Sie ein kostenloses Beratungsgespräch mit unseren Experten.

Termin vereinbaren