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 finden Sie eine Schritt-für-Schritt-Anleitung für den ultimativen KI-Webdesign-Workflow.
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.
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 Feature-Raster mit Icons 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".
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.
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.
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-Datei oder können die bearbeitbaren Ebenen direkt in Figma einfügen.
Öffnen Sie Figma und importieren Sie Ihr Design.
Gruppieren Sie Ihre Elemente: Stellen Sie sicher, 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.
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.
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.
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.
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.
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 ein Team von drei Personen früher zwei Wochen brauchte, kann jetzt von einer einzigen Person an einem Nachmittag prototypisiert, verfeinert und gestartet werden.