In der schnelllebigen Welt des digitalen Marketings und des Webdesigns ist die Lücke zwischen "großartiger Idee" und "funktionierender Website" oft der Punkt, an dem Projekte ins Stocken geraten. Sie haben eine Vision, aber die manuelle Kodierung und CMS-Integration kann Wochen dauern.
Heute stellen wir Ihnen einen hocheffizienten, KI-gesteuerten Workflow vor, der diese Zeit um bis zu 80 % verkürzen kann. Wir zeigen Ihnen, wie Sie mit UX Pilot eine realitätsgetreue Benutzeroberfläche erstellen, diese in Figma übertragen und dann mittransjt.ai sofort als voll funktionsfähiges HubSpot-Theme veröffentlichen.
Hier ist Ihre Schritt-für-Schritt-Anleitung für den ultimativen KI-Webdesign-Workflow.
Phase 1: Ideenfindung und Erstellung in UX Pilot
Alles beginnt mit dem Design. UX Pilot ist ein KI-gestütztes Design-Tool, mit dem Sie UI-Bildschirme mit einfachen Textanweisungen erstellen können, was es perfekt für Rapid Prototyping macht.
1. Generieren Sie Ihre UI
-
Melden Sie sich bei UX Pilot an: Navigieren Sie zum KI-Arbeitsbereich.
-
Geben Sie Ihre Vision vor: Geben Sie im "AI UI Generator" eine Beschreibung der Seite ein, die Sie benötigen.
-
Beispiel: "Eine moderne SaaS-Landingpage mit einer dunklen Ästhetik, einer Hero-Sektion mit zwei CTA-Schaltflächen, einem Funktionsraster mit Symbolen und einer Preistabelle."
-
-
Verfeinern Sie den Output: UX Pilot generiert ein High-Fidelity-Mockup. Sie können die KI-Chat-Funktionen nutzen, um spezifische Änderungen anzufordern, z. B. "Machen Sie die Schaltflächen rund" oder "Ändern Sie die Primärfarbe in elektrisch blau".
2. Für die Übergabe vorbereiten
Sobald Sie mit dem Layout und der visuellen Hierarchie zufrieden sind, müssen Sie dieses Design aus UX Pilot herausnehmen und in ein Format bringen, das für die Entwicklung verarbeitet werden kann.
Phase 2: Die Brücke - Exportieren nach Figma
Dies ist der entscheidende "Verbindungsschritt". Da transjt.ai auf die Konvertierung von Figma-Designs in HubSpot spezialisiert ist, müssen Sie zunächst Ihre UX Pilot-Kreation in Figma übertragen.
1. Aus UX Pilot exportieren
-
Suchen Sie in der UX Pilot-Oberfläche nach der Schaltfläche "Exportieren".
-
Wählen Sie "Export to Figma" (oder "Copy to Clipboard", wenn Sie das UX Pilot Figma Plugin verwenden).
-
Dadurch erhalten Sie eine
.fig-Dateioder können die bearbeitbaren Ebenen direkt in Figma einfügen.
2. Aufräumen in Figma
-
Öffnen Sie Figma und importieren Sie Ihr Design.
-
Gruppieren Sie Ihre Elemente: Vergewissern Sie sich, dass Ihre Abschnitte (Hero, About, Pricing) in verschiedenen Frames gruppiert sind.
-
Prüfen Sie Auto-Layout: Transjt.ai liest die Auto-Layout-Einstellungen von Figma, um sicherzustellen, dass Ihre Website responsive ist. Nehmen Sie sich einen Moment Zeit, um sicherzustellen, dass Ihre Auffüllungen und Ränder in Figma korrekt aussehen, da sie in HubSpot genau so aussehen werden.
Phase 3: Die Erstellung - Exportieren mit transjt.ai nach HubSpot
Jetzt kommt der Clou. transjt.ai ist ein Tool, das Ihr Figma-Design liest und automatisch den HTML-, CSS- und HubL-Code (HubSpot Markup Language) für Sie schreibt.
1. Öffnen Sie das transjt.ai Plugin in Figma
-
Wenn Sie es noch nicht getan haben, öffnen Sie das transjt.ai Plugin für Figma oder richten Sie Ihr Konto auf der Plattform ein.
-
Verbinden Sie das Tool mit Ihrem HubSpot-Portal, wenn Sie dazu aufgefordert werden.
2. Ein-Klick-Export aus Figma
- Erstellen Sie einzelne Komponenten aus Ihrer Landing Page
-
Wählen Sie die Komponenten Ihrer Landing Page aus
-
Öffnen Sie das Plugin transjt.ai und klicken Sie auf "Export to HubSpot".
-
Die KI wird das Design verarbeiten und Ihre visuellen Ebenen in ein benutzerdefiniertes HubSpot-Theme umwandeln.
Phase 4: Start in HubSpot
Ihr Design ist jetzt nicht mehr nur ein Bild, sondern ein kodiertes Asset in Ihrem CMS.
-
Melden Sie sich bei HubSpot an: Gehen Sie zu Marketing > Website > Website-Seiten.
-
Erstellen Sie eine neue Seite: Wenn Sie aufgefordert werden, ein Thema auszuwählen, suchen Sie nach dem neuen Thema, das von transjt.ai erstellt wurde.
-
Bearbeiten und veröffentlichen: Sie werden sehen, dass Ihr UX-Pilot-Design perfekt gerendert ist. Da transjt.ai modulare Themen erstellt, können Sie jetzt Elemente per Drag-and-Drop verschieben, Text ändern und Bilder mit dem Standard-Seiteneditor von HubSpot austauschen.
Warum dieser Workflow gewinnt
Durch die Kombination von UX Pilot (für die kreative Erstellung) und Transjt.ai (für die Code-Implementierung) werden die beiden größten Engpässe bei der Webentwicklung effektiv beseitigt: Designerblockade und Entwicklerabgabe.
Wofür früher ein Team von drei Personen zwei Wochen brauchte, kann jetzt von einer einzigen Person an einem Nachmittag prototypisiert, verfeinert und gestartet werden.