Migration zu HubSpot CMS mit KI und Claude Code

Der Umzug zu HubSpot scheitert meist an einer Sache: dem Neuaufbau der Website. Hier ist ein KI-Workflow in vier Schritten – generierter Prompt, Claude Code, transjt und die HubSpot CLI – mit allem, was jeder Schritt umfasst und möglich macht.

Die meisten Migrationen zu HubSpot hängen nicht an den Inhalten. Blogartikel, Seiten und Bilder lassen sich importieren. Wochen dauert der Neuaufbau: das Aussehen und die Struktur der alten Website in ein HubSpot-Theme mit Templates und Modulen zu übertragen, die Ihr Marketing-Team selbst bearbeiten kann.

Klassisch heißt das: ein Designer, ein Entwickler mit HubL-Kenntnissen und mehrere Feedbackrunden. Mit KI-Tools wandert der Großteil dieser Arbeit in einen Workflow, in dem jedes Tool eine Aufgabe gut erledigt – und Ihr Team bei jedem Schritt die Kontrolle behält.

Der Workflow im Überblick

1. Prompt erstellen – beschreiben Sie Ihre neue Website, ausgehend von der bestehenden.
2. Website per Vibe Coding bauen – Claude Code macht aus dem Prompt ein funktionierendes Frontend.
3. Mit transjt konvertieren – aus dem Frontend wird ein natives HubSpot-Theme.
4. Mit Claude Code und der HubSpot CLI verfeinern – das Theme im Code weiter verbessern, ohne Risiko.

Parallel dazu ziehen Sie die Inhalte mit den Import-Tools von HubSpot um und richten Weiterleitungen ein. Jeder Teil wird unten erklärt.

Bevor Sie starten

Sie brauchen fünf Dinge:

• Die Adresse Ihrer bestehenden Website – der Ausgangspunkt für den Prompt
• Claude Code – das KI-Coding-Tool von Anthropic, auf Ihrem Rechner
• Ein GitHub-Konto – dort liegt der Code der neuen Website
• Ein transjt-Konto – zum Ausprobieren der Konvertierung reicht der kostenlose Plan
• Ein HubSpot-Konto mit CMS-Plan – und Super-Admin-Rechte für die erste Verbindung mit transjt

HubL-Kenntnisse brauchen Sie nicht – den technischen Teil übernimmt Claude Code.

Schritt 1: Prompt erstellen

Ein KI-Builder ist nur so gut wie sein Briefing. Ein vager Prompt („mach mir eine moderne Website“) ergibt eine austauschbare Website; ein präziser ergibt eine Website, die Sie tatsächlich live schalten können.

Der Website Prompt Generator (auf Englisch) schreibt dieses Briefing für Sie. Er stellt ein paar kurze Fragen:

• Welche Art von Website Sie bauen und welche Seiten sie braucht
• Ihre bestehende Website – falls vorhanden, liest die KI Startseite und Hauptmenüseiten: Navigation, Texte, Farben, Schriften und Logo
• Was mit Ihren Inhalten passiert – wortgetreu übernehmen, neu formulieren oder neu beginnen
• Look und Bewegung – von ruhig und seriös bis ausdrucksstark
• Standards – wie weit Barrierefreiheit und SEO gehen sollen
• Ihr KI-Tool – Claude Code, Lovable, v0, bolt.new und weitere

Das Ergebnis ist ein vollständiger, produktionsreifer Prompt. Er legt den Tech-Stack vorab fest, damit der Build nicht abdriftet, und verlangt eine CMS-taugliche Struktur: Überschriftenebenen getrennt von der optischen Größe, Alt-Texte, Linkziele und SEO-Felder für jede Seite. Für Claude Code fordert er außerdem automatisierte Tests an, sodass sich der Build selbst prüft.

Das wird damit möglich:

• Eine neue Website, die behält, was auf der alten funktioniert – Struktur, Texte, Marke
• Ein Briefing, das responsive Layouts, Barrierefreiheit und SEO-Grundlagen bereits abdeckt
• Ein Startpunkt in Minuten statt eines langen Anforderungsdokuments

Schritt 2: Website per Vibe Coding bauen

Jetzt wird aus dem Prompt eine Website. Wir nutzen hier Claude Code, weil es dort arbeitet, wo Ihr Code liegt: Es legt das Projekt an, startet es auf Ihrem Rechner und ändert es, wann immer Sie es wünschen.

Eine typische Sitzung sieht so aus:

1. Öffnen Sie einen leeren Projektordner und starten Sie Claude Code.
2. Fügen Sie den Prompt ein. Claude Code richtet das Projekt ein und baut die Seiten Abschnitt für Abschnitt.
3. Öffnen Sie die lokale Vorschau im Browser und prüfen Sie Seite für Seite.
4. Bitten Sie in einfacher Sprache um Änderungen – Claude Code passt den Code an, die Vorschau aktualisiert sich.
5. Lassen Sie Claude Code die Tests aus dem Prompt ausführen und beheben, was fehlschlägt.
6. Schieben Sie das Projekt in ein GitHub-Repository.

Gute Änderungswünsche sind konkret. Zum Beispiel:

• „Mach den Hero-Bereich ruhiger: weniger Bewegung, mehr Weißraum, Überschrift auf dem Desktop in einer Zeile.“
• „Füge unter dem Hero eine Kundenlogo-Leiste ein, in Graustufen, sechs Logos.“
• „Setz den Preisabschnitt über die FAQ.“
• „Nutze unser Markenblau für alle primären Buttons.“
• „Prüf jede Seite auf einem 375 Pixel breiten Bildschirm und behebe, was nicht passt.“

Bauen Sie in klaren Abschnitten – Hero, Features, Kundenstimmen, Preise – statt einer langen Seite. Saubere, getrennte Abschnitte werden später zu sauberen, bearbeitbaren Modulen.

Das wird damit möglich:

• Redesign und Neuaufbau in einem Schritt
• Schnelle Iterationen, ohne auf einen Entwicklungssprint zu warten
• Eine echte Codebasis in GitHub statt eines gesperrten Page-Builder-Projekts

Schritt 3: Mit transjt konvertieren

Ein per Vibe Coding gebautes Frontend ist noch keine HubSpot-Website. Es hat keine Templates, keine Module und keine Felder, die das Marketing bearbeiten kann. Genau diese Lücke schließt transjt.

1. Verbinden Sie GitHub in transjt und wählen Sie das Repository.
2. Prüfen Sie die Vorschau. transjt wandelt das Frontend in ein natives HubSpot-Theme um und zeigt Ihnen das Ergebnis, bevor etwas zu HubSpot geht.
3. Verbinden Sie HubSpot – für die erste Verbindung sind Super-Admin-Rechte nötig.
4. Exportieren Sie das Theme. Es ist innerhalb weniger Stunden fertig und erscheint in Ihrem HubSpot-Konto.
5. Erstellen Sie Ihre Seiten aus den Templates des Themes im Drag-and-Drop-Editor von HubSpot.

Haben Sie die Website nach dem Export in Claude Code geändert? Schieben Sie die Änderung zu GitHub und synchronisieren Sie das Repository in transjt erneut.

Zu den Preisen: Die Konvertierung können Sie im kostenlosen Plan ausprobieren. Brauchen Sie eine einzelne Website statt eines Abos, können Sie mit dem einmaligen Export kostenlos starten und erst nach der Vorschau bezahlen – mit Geld-zurück-Garantie. Siehe Preise.

Das wird damit möglich:

• Seiten, die Ihr Marketing-Team ohne Entwickler bearbeitet
• Header und Footer als bearbeitbare Module
• Formulare, die mit nativen HubSpot-Formularen verknüpft sind, sodass Einsendungen in Ihrem CRM landen
• Templates für Blog-Übersicht und Blog-Artikel in Ihrem neuen Design
• Layouts für Desktop, Tablet und Mobilgeräte inklusive

Schritt 4: Mit Claude Code und der HubSpot CLI verfeinern

Eine Website ist beim Launch nie fertig. Die HubSpot CLI verbindet Ihren Rechner mit den Design-Tools von HubSpot, sodass Claude Code an den Dateien des Live-Themes arbeiten kann.

Der Ablauf ist einfach: Theme-Dateien herunterladen, Claude Code um die Änderung bitten und die Dateien wieder hochladen. Diese Schritte kann Claude Code für Sie ausführen.

Damit beschreiben Sie die Änderung, und Claude Code setzt sie um:

• Farben, Abstände oder Typografie für die ganze Website anpassen
• Kleine Interaktionen, Animationen oder Skripte ergänzen
• Die Performance verbessern, zum Beispiel beim Laden von Bildern
• Strukturierte Daten ergänzen, etwa FAQ-Markup für Suchmaschinen und KI-Antworten
• Eine Moduleinstellung korrigieren oder ein Modul um ein neues Feld erweitern

Eine Regel hält Ihre Änderungen sicher: Legen Sie Ihre Anpassungen in custom.css und custom.js des Themes ab. transjt überschreibt diese beiden Dateien nie, wenn Sie das Theme erneut exportieren – so können Sie weiter neue Designs konvertieren, während Ihre eigenen Verfeinerungen erhalten bleiben.

Zwei Gewohnheiten helfen: Stellen Sie den heruntergeladenen Theme-Ordner mit git unter Versionskontrolle, damit sich jede Änderung prüfen und rückgängig machen lässt, und veröffentlichen Sie die betroffenen Seiten nach einem Upload erneut, damit die Änderung live geht.

Die Inhalte umziehen

transjt baut das Theme; Ihre Inhalte zieht es nicht um. Dafür hat HubSpot eigene Tools:

• Blogartikel: Der Blog-Import von HubSpot übernimmt Artikel aus WordPress und anderen Plattformen. Prüfen Sie danach Bilder, Autoren und interne Links.
• Seiten: Legen Sie sie aus den Templates des neuen Themes neu an. Haben Sie in Schritt 1 „wortgetreu übernehmen“ gewählt, sind die meisten Texte schon da.
• Formulare: Verbinden Sie jedes Formular im neuen Design mit einem HubSpot-Formular.
• Tracking: Hinterlegen Sie Analytics und Tag Manager in den Website-Einstellungen von HubSpot.

Dann die Weiterleitungen. Jede alte URL, die sich ändert, braucht eine Weiterleitung auf ihre neue Adresse, sonst verlieren Sie die Rankings, die Sie aufgebaut haben. HubSpot nimmt Weiterleitungen gesammelt als Tabelle mit alten und neuen URLs entgegen – und Claude Code kann diese Liste durch einen Abgleich der alten und neuen Sitemap erstellen.

Checkliste für den Launch

• Jede alte URL leitet auf ihre neue Adresse weiter
• Seitentitel und Meta-Beschreibungen übernommen
• Formulare senden an HubSpot, Benachrichtigungen kommen an
• Analytics und Tag Manager installiert
• Seiten auf dem Smartphone geprüft
• Neue Sitemap in der Google Search Console eingereicht
• Das Hosting der alten Website behalten, bis die Weiterleitungen bestätigt sind

Häufige Stolperfallen

• Ein vager Prompt. „Modern und clean“ ist kein Briefing. Lassen Sie den Generator die Fragen stellen.
• Generierte Dateien bearbeiten. Änderungen außerhalb von custom.css und custom.js können beim erneuten Export ersetzt werden.
• Weiterleitungen weglassen. Der schnellste Weg, bei einer Migration Suchtraffic zu verlieren.
• Nicht neu veröffentlichen. Hochgeladene Änderungen erscheinen nur auf Seiten, die Sie neu veröffentlichen.
• Eine riesige Seite. Bauen Sie in Abschnitten, damit jeder zu einem eigenen bearbeitbaren Modul wird.

Welcher Schritt was leistet

Wo Sie anfangen

Wenn Sie einen Umzug zu HubSpot planen, beginnen Sie mit dem Teil, der meist am längsten dauert: Design und Theme. Erstellen Sie Ihren Prompt (auf Englisch), bauen Sie die Website mit Claude Code, und lassen Sie transjt daraus ein HubSpot-Theme machen, das Ihr Team selbst betreibt.

Mehr zur Migration selbst: WordPress zu HubSpot · Migration zu HubSpot CMS · Migration von WordPress zu HubSpot, Schritt für Schritt

Häufige Fragen

Migriert transjt meine Inhalte?

Nicht direkt. transjt baut das HubSpot-Theme. Ihre Blogartikel ziehen mit den Import-Tools von HubSpot um, und Weiterleitungen halten Ihre alten URLs erreichbar.

Geben Sie dem Website Prompt Generator aber Ihre bestehende Website als Referenz, übernimmt er Struktur und Texte Ihrer Hauptseiten in die neue Website – und transjt konvertiert diese Inhalte zusammen mit dem Design.

Werden meine eigenen Code-Änderungen bei einem erneuten Export überschrieben?

Nicht, wenn Sie sie in custom.css und custom.js des Themes ablegen – diese beiden Dateien überschreibt transjt nie.

Brauche ich einen Entwickler?

Für den Kern-Workflow nicht. Prompt Generator, Claude Code und transjt decken den Neuaufbau ab; ein Entwickler hilft bei ungewöhnlichen Integrationen oder individuellen Funktionen.

Welche KI-Builder funktionieren außer Claude Code?

Der Prompt funktioniert auch mit Lovable, v0, bolt.new, Replit, Builder.io, Rocket, Figma Make und Base44. transjt konvertiert deren Code genauso, sobald er in GitHub liegt.

Verliere ich meine Rankings?

Nicht, wenn Sie jede geänderte URL weiterleiten und Seitentitel sowie Meta-Beschreibungen übernehmen. Fehlende Weiterleitungen sind die häufigste Ursache für verlorenen Traffic nach einer Migration.