Für Freelancer, Digitalagenturen und Marketingteams

So arbeiten Sie mit transjt.ai, HubSpot CMS, WordPress CMS und GitHub (Vibe Code)

Mit transjt.ai verwandeln Sie Figma-Designs — oder Code, den Sie bereits in Lovable, v0, bolt.new, Claude Code und anderen Tools vibe-codet haben — in HubSpot- und WordPress-fertige Themes. Erfahren Sie, wie Sie aus Figma oder GitHub importieren, Ihren Workflow optimieren und Ihren Kunden übersichtliche, responsive Websites liefern.

Registrieren

Wie erstelle ich ein transjt.ai-Konto?

Registriere Dich mit Deinem Google- oder Figma-Account oder direkt mit Deiner E-Mail-Adresse auf transjt.ai. Du benötigst das Konto, um sowohl das Plugin als auch die App nutzen zu können.

Zur Registrierung

Wie lade ich das transjt-Plugin für Figma herunter?

Du kannst das transjt-Plugin entweder über die transjt.ai-App oder direkt in Figma erhalten, indem Du in Figma nach „Plugins & Widgets“ nach „transjt“ suchst.

Zum Plugin

Wie verbinde ich transjt mit HubSpot ?

Melde Dich bei transjt.ai an, gehe zu „Settings“ > „Integrations“, klicke auf „Add Account“, wähle „HubSpot“ aus und folgen den Anweisungen. Du benötigst Administratorrechte in HubSpot.

Seite Integrationen aufrufen

Wie erstelle ich ein Projekt in transjt.ai?

Öffne transjt.ai, gehe zum Abschnitt „Projects“ und klicke auf das Symbol „+“, um ein neues Projekt zu erstellen. In derselben Übersicht kannst du auch Projekte löschen.

Seite Projekte aurufen

Wie kann man transjt-Projekte mit HubSpot verknüpfen?

Öffne ein Projekt und klicke auf das Zahnrad-Symbol in der oberen linken Ecke. Füge unter der Registerkarte „Integrations“ entweder ein neues HubSpot-Konto hinzu oder wählen ein bestehendes Konto aus der Liste aus, um es zu verknüpfen.

Wie kann man ein anderes HubSpot-Konto verknüpfen?

Öffne ein Projekt und klicke auf das Zahnrad-Symbol. Wenn Du mehrere HubSpot-Konten hinterlegt hast, wähle das gewünschte aus. Wenn nicht, füge ein neues Konto hinzu, indem Du die zuvor beschriebenen Schritte befolgst.

Wie erstelle ich ein Vibe-Code- / GitHub-Projekt?

Öffne transjt.ai, gehe zu „Projects“ und klicke auf „+“ (Create new project). Benenne das Projekt und wähle „From GitHub“ als Quelle.

Welche Vibe-Coding-Tools unterstützt transjt?

Getestet und aktuell unterstützt werden Lovable, Figma Make, Claude Code, builder.io, rocket.new, bolt.new, v0 und Replit. Für sauberen Frontend-Code ergänze Deinen Prompt um: „Use React/Vite without Next.js and SSR.“

Wie authentifiziere ich GitHub?

Ist noch kein GitHub-Konto verbunden, klicke auf „Connect GitHub“ und folge den Schritten im Popup (achte darauf, dass Dein Browser es nicht blockiert). Wähle anschließend GitHub-Konto, Repository und Branch aus und klicke auf „Proceed“.

Wie importiere ich Code aus GitHub?

Sobald Repository und Branch ausgewählt sind, importiert transjt den generierten Code automatisch und bereitet das Frontend für die Integration in HubSpot oder WordPress als eigenes Theme vor.

Wie sehe ich eine Vorschau des aus GitHub generierten Codes?

Nach dem Import baut transjt das komplette Frontend Deines Projekts auf, und Du kannst Dich durch alle Seiten und Inhalte klicken. Nach dem Schritt „Deploy“ kannst Du zusätzlich das Frontend zusammen mit dem CMS ansehen (nur bei WordPress).

Wie exportiere ich Code nach HubSpot oder WordPress?

Klicke nach der Vorschau auf den Tab „Export“ oder auf „Export Now“ und entscheide Dich für ein CMS: HubSpot oder WordPress. Nach der Zahlung erzeugen wir ein natives HubSpot- oder WordPress-Theme und spielen es in Dein HubSpot-Konto oder auf Deine WordPress-Website aus.

Was kann ich tun, wenn das Theme fertig ist?

Sobald Frontend-Code und CMS zusammengeführt sind, kannst Du das Theme herunterladen und manuell installieren, es in Dein HubSpot-Konto oder auf Deine WordPress-Site ausspielen oder es in der Sandbox ansehen (nur bei WordPress).

Wie aktiviere ich das transjt-Plugin in WordPress?

Laden Sie das transjt-Plugin herunter, laden Sie es in Ihr WordPress-Plugin-Dashboard hoch und klicken Sie auf „Aktivieren“. Nach der Aktivierung wird „transjt.ai“ in Ihrem linken Admin-Menü angezeigt.

Wie verbinde und autorisiere ich transjt mit WordPress?

Stelle zunächst sicher, dass du in deinem transjt.ai-Konto angemeldet bist. Klicke dann in der linken Seitenleiste auf „transjt.ai“ und anschließend auf „Verbinden“. Es erscheint ein Popup-Fenster, in dem du aufgefordert wirst, die Verbindung zwischen transjt und WordPress zu autorisieren.

Wie aktiviere ich das transjt-Theme in WordPress?

Nach dem ersten Export von transjt in das WordPress-CMS findest du dein neues Theme unter „Darstellung > Themes“. Es trägt genau den Namen und das Vorschaubild, die du auf transjt.ai festgelegt hast. Fahre einfach mit der Maus darüber und klicke auf „Aktivieren“.

Wie erstellt man Seiten in WordPress?

Öffne dein WordPress-Dashboard, navigiere zu „Seiten“ und klicke auf „Neue Seite hinzufügen“. In der linken Seitenleiste siehst du deine von transjt generierten benutzerdefinierten Komponenten. Ziehe sie einfach per Drag & Drop auf deine Seite, um dein Layout zu erstellen.

Wie erstelle ich einen Blog in WordPress?

Markiere in Transjt das Layout deiner Blog-Übersicht als „Blog“ und das Layout deiner einzelnen Beiträge als „Blog-Detail“ und exportiere sie anschließend nach WordPress. Nach dem Export kannst du diese Komponenten ganz einfach in deine WordPress-Beiträge einfügen.

Wie fügt man in WordPress eine Navigation hinzu und konfiguriert sie?

Registriere dich bei Google, Figma oder direkt bei transjt.ai. Dieses Konto wird für das Plugin und die App benötigt.

Wie fügt man in WordPress einen Footer hinzu und konfiguriert ihn?

Registriere dich bei Google, Figma oder direkt bei transjt.ai. Dieses Konto wird für das Plugin und die App benötigt.

Wie fügt man ein Formular in WordPress ein?

Bevor du dein erstes Formular aus transjt nach WordPress exportierst, installiere und aktiviere das Plugin „Contact Form 7“. Exportiere anschließend das Formular, und die KI generiert die endgültige Struktur für dich.

Wie verknüpfe ich ein Figma Formular mit HubSpot-Formularen?

Entwerfe einfach ein beliebiges Formular in Figma und verknüpfe es in weniger als 5 Minuten mit HubSpot, ohne eine einzige Zeile Code schreiben zu müssen.

Was sind "Globale Komponenten"?

Globale Komponenten können dazu verwendet werden, um zB. ein "Preis-Widget" ein Mal zu konfigurieren und auf unterschiedlichen Seiten zu verknüpfen. Dies Spart Zeit und Arbeit.

Verwalte Dein Abonnement

Wir bieten vier Abonnementmodelle an: Free, Creator, Professional und Enterprise (nur auf Anfrage). Du kannst Dein Abonnement jederzeit unter „Settings > Subscription“ verwalten.

Abos öffnen

Was sind „tasks“ in transjt?

Der Abschnitt „Tasks“ bietet einen Überblick über alle aktiven Aufgaben, einschließlich Import aus Figma und Export nach HubSpot. Wenn eine Aufgabe abgeschlossen ist, wird sie als „Bereit zum Exportieren“ markiert. Wenn die Komponente bereits in HubSpot vorhanden ist, kannst Du wählen, ob Du sie ersetzen oder die vorhandene beibehalten möchten. Vergesse nicht, auf „Weiter“ zu klicken, um fortzufahren.

Verwendung von Token: Wann werden Token verwendet?

Token werden immer dann verwendet, wenn Designs von der KI verarbeitet werden – sowohl für den Import als auch für den Export. Jeder Import aus Figma und jeder Export zu HubSpot verbraucht Tokens.

So wählst Du das transjt-Theme in HubSpot aus und erstellst Seiten

Erstelle ein neues Website-Projekt oder eine neue Seite in HubSpot CMS. Wähle das transjt-Theme aus, indem Du nach dem Vorschaubild und dem Projektnamen von transjt.ai suchst. Beachte, dass das transjt-Theme erst nach dem ersten Export zu HubSpot angezeigt wird.

Wie erstellt man ein Design in Relume.io und exportiert es mit transjt nach HubSpot?

Mit Relume nicht nur ein Wireframing und Sitemaps erstellen. Verwende es, um Design-Seiten und Komponenten zu erstellen und exportiere sie direkt mit transjt.ai in das HubSpot CMS.

Wie erstellt man ein Design in UX Pilot mit transjt und exportiert es nach HubSpot?

Verwende UX Pilot, um Designs in Figma mit KI zu erstellen und diese mit transjt in das HubSpot CMS zu exportieren. Dieser Workflow wird Ihnen viel Zeit sparen!

Entwerfe Komponenten anstatt Seiten für den Export (figma-transjt)

Vermeide es, ganze Seiten in transjt.ai zu importieren, da diese nicht in einzelne Komponenten aufgeteilt werden. Importiere stattdessen einzelne Komponenten – dies erleichtert später die Erstellung von Seiten in HubSpot.

Verwende die Auto-Layout-Funktion von Figma

Das Auto-Layout von Figma ist ein leistungsstarkes Tool: Bei korrekter Einrichtung arbeitet es nahtlos mit transjt.ai zusammen, um hervorragende Ergebnisse zu erzielen und sowohl bei der Frontend- als auch bei der Backend-Entwicklung viel Zeit zu sparen. Denke daran, logische Elemente zu gruppieren, damit das Design übersichtlich bleibt und sich leicht exportieren lässt.

Wie man Anweisungen für die KI in Designs hinzufügt

Du kannst Anweisungen für die KI direkt in Deinem Figma-Design hinzufügen. Schreibe einfach Anweisungen in das Textfeld einer Komponente, und die KI interpretiert und wendet sie an. Beispiel: Füge zur Überschrift „Hover-Zustand mit Hintergrundschatten” hinzu, und die Hover-Animation wird automatisch generiert.

Wie erstellt man ein mehrstufiges Formular in Figma für das HubSpot CMS?

Füge einfach beide Schritte – beispielsweise in einem Formularablauf – in das Layout ein und benenne sie „Schritt 1“ und „Schritt 2“. Die KI kombiniert sie dann zu einem nahtlosen mehrstufigen Formular und integriert es automatisch in das HubSpot CMS.