So verwandeln Sie ein KI-gebautes Frontend in HubSpot-Module
Ein KI-Baukasten liefert Ihnen an einem Nachmittag eine ansehnliche Komponentenbibliothek. Was er Ihnen nicht liefert, ist etwas, das Ihr Marketing selbst bearbeiten kann. Wenn CRM, E-Mail und Formulare ohnehin in HubSpot liegen, gehört die Website ebenfalls dorthin — und das heißt: Aus React-Komponenten werden native HubL-Module.
HubSpot rendert HubL auf den eigenen Servern, und das CMS ist um Module herum gebaut, die sich im Marketing neu anordnen und anhand von CRM-Daten personalisieren lassen, ohne Code zu öffnen. Genau deshalb lässt sich ein React-Build nicht unverändert einsetzen — und genau diese Übersetzung automatisiert transjt. Hier ist der vollständige Weg.
Vorab: die eine Stack-Voraussetzung
Fordern Sie von Ihrem KI-Tool React mit Vite, ohne Server-Side Rendering. HubSpot rendert HubL serverseitig; sauber konvertieren lässt sich deshalb ein clientseitig gerendertes Frontend. Je nach Tool:
- Lovable erzeugt bereits React mit Vite, hier gibt es meist nichts zu ändern.
- v0 nutzt standardmäßig den Next.js App Router mit Server Components — fordern Sie stattdessen React und Vite an.
- bolt.new, Replit und Rocket erzeugen standardmäßig ein komplettes Full-Stack-Gerüst. HubSpot bringt Formulare, Kontaktdatensätze und Content-Speicherung bereits mit, das meiste davon ist hier also überflüssig.
- Figma Make und builder.io erzeugen React aus einem Design, und genau das erwartet transjt als Eingabe.
- Claude Code hält sich an die Vorgabe, wenn Sie sie im ersten Prompt nennen.
Prüfen Sie zuerst Ihr Abo
Das ist die einzige harte Voraussetzung, und sie sollte geklärt sein, bevor die Designarbeit beginnt. Für den Upload eines eigenen Themes brauchen Sie eine Content-Hub-Stufe, die eigene Code-Dateien erlaubt. Die Starter-Stufen schränken das ein. Davon abgesehen entsteht ein ganz normales HubSpot-Theme ohne besondere Anforderungen.
Schritt 1: Bauen Sie das Frontend in Ihrem KI-Tool
Prompten und verfeinern Sie, bis die Oberfläche stimmt. Die Umwandlung verlangt keine Änderung an Ihrer Arbeitsweise, nur dass Sie die Stack-Vorgabe früh nennen.
Schritt 2: Bringen Sie den Code zu GitHub
GitHub ist die Brücke, aus der transjt liest. Lovable und Replit synchronisieren automatisch, bolt.new pusht direkt aus dem Editor, v0 und Figma Make exportieren Code, den Sie selbst committen, und Claude Code arbeitet ohnehin schon in Ihrem Repository. Welchen Weg Sie auch nehmen: Die Commit-Historie hält fest, welche Designversion zu welchem Theme geführt hat.
Schritt 3: Verbinden Sie das Repository mit transjt
Autorisieren Sie GitHub in Ihrem transjt-Projekt und wählen Sie das Repository aus. transjt liest den Komponentenbaum und entscheidet, welche Teile HubL-Templates werden und welche zu bearbeitbaren Modulfeldern — diese Unterscheidung bestimmt, was Ihr Marketing-Team später ändern kann.
Schritt 4: Wählen Sie HubSpot und prüfen Sie die Vorschau
Wählen Sie HubSpot als Ziel-CMS und gleichen Sie die Vorschau mit Ihrem ursprünglichen Design ab. Nach der Bestätigung schreibt transjt ein natives Theme: HubL-Templates und Module mit deklarierten, bearbeitbaren Feldern, das Sie über den Design-Manager hochladen. Danach stehen die Module im Seiteneditor bereit.
Aus einem synchronisierten Repository dauert das je nach Seitenanzahl in der Regel bis zu einer Stunde.
Was „bearbeitbar“ tatsächlich bedeutet
Das ist der Unterschied zwischen Umwandeln und bloßem Einbetten. Module mit definierten Feldern erlauben es dem Marketing, Texte, Bilder und die Reihenfolge von Abschnitten im Drag-and-drop-Editor zu ändern, während Abstände, Typografie und Farben exakt so bleiben, wie sie gestaltet wurden. Das Designsystem hält genau deshalb, weil es in den Modulen steckt und nicht in einem Dokument beschrieben ist.
Außerdem erschließt es alles, was nur mit nativem HubSpot-Content funktioniert: Personalisierung nach Lifecycle-Phase oder jeder anderen Kontakteigenschaft, Reporting auf Seitenebene, Attribution bis zum echten Deal und A/B-Tests. Eine extern gehostete React-App liefert davon nichts, solange Sie nicht zusätzlich messen.
Aktualisieren nach einer Neugenerierung
Pushen Sie aktualisierte Komponenten in dasselbe Repository und lassen Sie transjt erneut laufen, um die Änderungen in Ihr Theme zu übernehmen. Sie gestalten weiter dort, wo Sie am liebsten gestalten, und HubSpot liefert weiter die Seiten aus.
Wann dieser Weg der richtige ist
Wandeln Sie um, wenn das Marketing ohnehin in HubSpot arbeitet und eine Website an anderer Stelle bedeutet, dauerhaft zwei Systeme zusammenzuflicken; wenn jede Kampagnenseite heute ein Entwicklerticket ist; wenn Sie Personalisierung auf Basis von CRM-Daten brauchen; oder wenn niemand im Team einen Grund hat, eine Templating-Sprache zu lernen, die er genau einmal benutzt.
HubL ist Spezialwissen, das außerhalb von HubSpot keinen zweiten Nutzen hat. Genau diese Schicht zu automatisieren, ist der Punkt: Die Expertise, für die Sie sonst hätten einstellen müssen, brauchen Sie am Ende gar nicht.