DokumentationErste SchritteSchnellstart
Schnellstart
Vom Design zum funktionierenden Theme in deinem CMS. Dein Theme ist in wenigen Stunden fertig.
Bevor du loslegst
Du brauchst:
- Ein transjt-Konto.
- Ein HubSpot-Konto mit Super-Admin-Rechten oder eine frische WordPress-Installation.
- Ein Design in Figma, ein Repository auf GitHub oder die Adresse der Live-Website, die du umziehst. Noch kein Design? Nutze die kostenlose Datei transjt Figma Playground oder lass den kostenlosen Website-Prompt-Generator den Prompt für deinen KI-Builder schreiben.
- Den passenden Plan: Figma-Importe laufen über ein transjt-Abo (Free, Creator oder Professional), ein GitHub-Projekt wird als einmaliger Kauf der kompletten Website exportiert, und eine Migration ist eine Einmalzahlung pro Website.
1. Konto erstellen
Geh auf transjt.ai und registriere dich mit Figma, Google, HubSpot, GitHub oder deiner E-Mail-Adresse. Dasselbe Konto gilt für das Plugin und die App.
2. CMS verbinden
Verbinde das CMS, in das du exportieren willst. Du brauchst nur eines der beiden.
HubSpot
- Logg dich bei transjt.ai ein und öffne Settings > Integrations.
- Klicke auf Add CMS und wähle HubSpot.
- Ein HubSpot-Fenster öffnet sich (OAuth). Logg dich ein und autorisiere transjt. HubSpot fragt nach Super-Admin-Rechten.
Es öffnet sich nichts? Dein Browser hat das Popup blockiert. Erlaube Popups für app.transjt.ai und versuch es noch einmal.
Du kannst diesen Schritt auch vorerst überspringen und HubSpot später im Schritt Deploy deines Projekts verbinden.
Mehr unter HubSpot verbinden.
WordPress
- Lade das transjt-Plugin herunter und lade es in deinem WordPress-Dashboard unter Plugins hoch.
- Klicke auf Activate. transjt.ai erscheint im linken Admin-Menü.
- Bleib bei transjt.ai eingeloggt, klicke in der Seitenleiste auf transjt.ai und wähle Connect. Autorisiere die Verbindung im Popup.
Später, im Schritt Deploy deines Projekts, wählst du diese Website unter Select Existing Account aus.
Mehr unter WordPress verbinden.
3. Projekt erstellen
Öffne in transjt.ai Projects und klicke auf +. Gib dem Projekt einen Namen, zieh bei Bedarf ein Titelbild hinein und klicke auf Create. Das Titelbild dient später als Vorschaubild deines Themes in HubSpot oder WordPress, damit du es dort beim Auswählen wiedererkennst. Im nächsten Schritt, Source, wählst du, woher dein Design kommt: Figma, GitHub oder Migration (eine Live-Website, die du umziehst). Wenn du mit Figma arbeitest, kannst du das Projekt stattdessen auch im Plugin erstellen (siehe Schritt 4).
Jedes Projekt durchläuft dieselben Schritte, die oben auf dem Bildschirm angezeigt werden: Create → Source → Import → Preview → Export → Deploy.
In derselben Übersicht kannst du Projekte auch löschen.
Das HubSpot-Konto für ein Projekt wählst du im Schritt Deploy: Öffne Select Existing Account, um ein verbundenes Konto auszuwählen, oder klicke dort auf Add HubSpot, um ein neues zu verbinden. Eine WordPress-Website muss zuerst über das Plugin verbunden werden (Schritt 2).
4. Design importieren
Wähle deinen Weg: ein Design aus Figma oder Code aus einem KI-Builder auf GitHub.
Aus Figma
- Installiere das transjt-Plugin aus der Figma Community oder suche nach „transjt“ unter Plugins & Widgets in Figma. Du findest es auch in der transjt-App unter Plugins.
- Logg dich im Plugin ein.
- Wähle unter Select type, was du importierst: Component, Blog (ein Layout für die Blogübersicht) oder Blog Detail (ein Layout für einzelne Beiträge).
- Wähle unter Projects ein bestehendes Projekt aus oder klicke auf Create Project und gib ihm einen Namen.
- Wähle in Figma die Ebenen aus, die du konvertieren willst, und klicke auf Import to transjt.
- Die ausgewählten Komponenten werden in die transjt-App übertragen.
Aus GitHub
- Wähle GitHub im Schritt Source deines Projekts.
- Klicke auf Connect GitHub und folge dem Popup. Wenn sich nichts öffnet, prüfe, ob dein Browser Popups blockiert.
- Wähle Konto, Repository und Branch aus und klicke dann auf Proceed.
transjt importiert den Code und baut das Frontend deines Projekts. Für das sauberste Ergebnis ergänzt du deinen KI-Prompt um: „Verwende React/Vite ohne Next.js und SSR.“ Bei v0, bolt.new, Claude Code oder Replit bittest du stattdessen um einen statischen Next.js-Export. Siehe Unterstützte KI-Builder.
5. Vorschau ansehen
Sieh dir deine importierten Komponenten in der transjt-App in der Vorschau an, bevor du exportierst. Bei GitHub-Projekten klickst du dich durch jede Seite und ihre Inhalte. Bei WordPress kannst du nach dem Schritt Deploy auch das Frontend zusammen mit dem CMS in der Vorschau ansehen.
Fehlt eine Schrift? Der Button Aa oben rechts zeigt, wie viele fehlen, und dort kannst du sie hochladen oder ersetzen. Siehe Schriften.
6. Exportieren
Klicke in der transjt-App auf Export (bei GitHub-Projekten heißt der Button ebenfalls „Export“) und wähle 
HubSpot oder 
WordPress. transjt generiert das Theme. Im nächsten Schritt, Deploy, sendest du es an dein CMS.
GitHub-Projekte
Der Export ist eine Einmalzahlung für die komplette Website. Schließe die Zahlung ab, wenn du dazu aufgefordert wirst.
Figma-Projekte
Importe verbrauchen Tokens aus deinem Abo. Exporte verbrauchen keine. Deinen Plan kannst du unter Settings > Subscriptions verwalten oder upgraden.
7. Deployen
Im Schritt Deploy siehst du Ready to deploy mit deinem aktuellen Paket: das Datum, die enthaltenen Komponenten und diese Buttons:
- Deploy Theme to HubSpot oder Deploy Theme to WordPress: sendet das Theme an dein CMS.
- Download Theme: lädt das Theme als ZIP-Datei herunter, damit du es manuell installieren kannst. So geht das für HubSpot und WordPress.
- Open Preview (nur WordPress): zeigt deine Website zusammen mit WordPress in einer Sandbox.
Wenn du ein Projekt zum ersten Mal deployst, fragt transjt, wohin es gehen soll (Select Account or Add new): Wähle ein verbundenes Konto unter Select Existing Account oder klicke auf Add HubSpot. Sobald das Projekt verknüpft ist, entfällt dieser Schritt.
HubSpot
Klicke auf Deploy Theme to HubSpot. Noch nicht verknüpft? Wähle dein Konto aus oder klicke auf Add HubSpot und logg dich ein.
Mehr unter HubSpot verbinden.
WordPress
Klicke auf Deploy Theme to WordPress. Noch nicht verknüpft? Wähle deine Website unter Select Existing Account aus. Sie erscheint dort, sobald das transjt-Plugin verbunden ist.
Mehr unter WordPress verbinden.
Frühere Pakete
Jeder Export erzeugt ein Paket. Das neueste steht oben; ältere sind unter Previous Packages aufgelistet. Zu jedem Paket siehst du:
- Datum und Uhrzeit des Exports,
- wann es zuletzt deployt wurde (grün, mit Wolken-Icon; beim aktuellen Paket steht Last Deploy),
- seine Komponenten, wenn du es mit dem Pfeil aufklappst.
Mit den zwei Buttons neben einem früheren Paket kannst du es:
- herunterladen, um diese Version manuell zu installieren, oder
- erneut deployen, zum Beispiel um zu einer früheren Version deines Themes zurückzukehren.
8. Loslegen
HubSpot
Erstelle eine Seite oder ein Website-Projekt und wähle dein Theme anhand seines Namens und Vorschaubilds. Es erscheint nach deinem ersten Export.
Mehr unter Dein Theme in HubSpot nutzen.
WordPress
Geh zu Appearance > Themes, fahre mit der Maus über das Theme und klicke auf Activate. Neue Seiten zeigen deine Blöcke in der linken Seitenleiste.
Mehr unter Dein Theme in WordPress nutzen.