HubSpot AI Web Assistent

Bei der Inbound 2023 war künstliche Intelligenz ein dominierendes Thema. In diesem Kontext wurde ein äusserst faszinierendes Tool für mich als HubSpot-Entwickler präsentiert: der AI Website Generator.

«Erstellen Sie mühelos eine Webseite mit einem kostenlosen AI Website Generator, der Ihre Einzelseite auf der Grundlage von einfachen Eingabeaufforderungen entwirft», wirbt HubSpot für das AI-getriebene Tool. Testen wir mal aus, was es uns bieten kann und probieren, einen Blick hinter die Kulissen zu werfen.

Es sei jedoch angemerkt, dass der AI Website Generator derzeit nur in einer geschlossenen Beta-Phase verfügbar ist und ausschliesslich auf Englisch genutzt werden kann.

Da es sich um eine geschlossene Beta-Phase handelt, wird noch daran gearbeitet, um die Funktion zu verbessern. Sobald wir einen Anmeldungslink erhalten, werden wir ihn hier zur Verfügung stellen.

Möchtest du über E-Mail benachrichtigt werden? Dann fülle einfach unser Formular aus und erhalte alle Informationen direkt in dein Postfach.

Erstellungsprozess

Um die Webseite generieren zu können, müssen drei Fragen beantwortet werden:

1. Anhand der ersten Frage muss das Business beschrieben werden, bspw.: Wie würde man das Business oder die Webseite Freunden erklären.

2. Anhand der zweiten Frage soll geklärt werden, was die Ziele der Webseite sind: Soll ein Service offeriert oder Produkte verkauft werden, ist das Ziel, Leads zu generieren, einen Blog zu eröffnen, erfolgreiche Projekte zu präsentieren oder allgemein die Online-Präsenz auszubauen.

3. Und zu guter Letzt soll noch ein Stil für die Webseite definiert werden: minimalistisch, modern, frisch, elegant, lebhaft / dynamisch. Nettes Gimmick: Bei der Auswahl wird rechts auch gleich die Farbe in einer kleinen Illustration präsentiert.

Nach den drei Fragen dauert es nur wenige Sekunden, bis die Webseite fertig generiert und bereit ist. 

Das Resultat

Auf den ersten Blick macht die Webseite einen guten Eindruck (komplette Startseite).

Sie ist simpel und aufgeräumt aufgebaut, hat einige Farbakzente gesetzt für wichtige Elemente wie CTA und nutzt Typographie und Bilder, um der Seite etwas Variabilität zu verschaffen. 

Was auffällt und bedauerlich ist: Die gesamte Bildwelt besteht offenbar aus Stockfotos, die nichts mit dem eigentlichen Thema der Webseite zu tun haben. Es ist jedoch zu erwarten, dass HubSpot in Zukunft ihren eigenen KI-Bildgenerator verwenden wird, der passende Bilder basierend auf den Benutzereingaben generiert (mehr dazu in einem späteren Blogbeitrag).

Inhaltlich ist es bequem, ein Gerüst zu haben, in welches die echten Inhalte eingepflegt werden können. Dabei lassen sich dennoch einige vom Generator erstellten Punkte in Frage stellen. Der CTA «Get started» innerhalb vom Header-Bild verlinkt z.B. auf das Kontaktformular weiter unten. Was damit genau erreicht werden soll, erschliesst sich mir nicht. Die Galerie ist ein guter Webseitenfüller, erfüllt aber keinen weiteren Zweck in dem Zusammenhang und bringt Besuchenden keinen Mehrwert. Ein Formular zu haben, um Kontakt aufnehmen zu können und ein Newsletter-Abo-Formular sind definitiv wichtig für die Startseite, dennoch würde ich die beiden Formulare nicht in dieser Form nacheinander platzieren. Generell ist die Startseite sehr zusammengewürfelt, ohne dass wirklich ein Konzept vorhanden ist und Nutzende geführt werden. 

Ein Blick in den Code

Als Entwickler möchte ich jedoch noch einen Blick hinter die Kulissen werfen und mir einen Eindruck davon verschaffen, wie der generierte Code für die Webseite aussieht. Dazu schauen wir uns den Design Manager genauer an.

Der Generator hat ein Child-Theme eines existierenden Themes von HubSpot (Growth) erstellt und dabei im Wesentlichen drei Dateien angelegt: theme.json (wo Name und Einstellungen zum Theme selbst hinterlegt sind), generated-content.html und generated-home.html.  

Der spannendste Teil befindet sich in der Datei generated-content.html. Hier sind alle Design-Parameter wie Farben und Schriften strukturiert hinterlegt, ebenso wie die Text- und Bildinhalte für die Startseite. Diese Inhalte werden dann in das Template generated-home.html importiert und als Standardinhalte eingefügt. So haben Benutzende einen Ausgangspunkt, um die Seite an ihre Bedürfnisse anzupassen. Alle weiteren Anpassungen basieren dann auf dem originalen Growth Theme: weitere Templates, Module und Design-Einstellungen wie Schriften und Farben können jederzeit angepasst werden.

Fazit

Mit generativer künstlicher Intelligenz ist es aktuell wie mit den mystischen Flaschengeistern aus orientalischen Sagen. Man formuliert einen Wunsch und erhält auch eine Reaktion – nur nicht unbedingt in der erwarteten Form (ein schönes Beispiel dafür). Aus diesem Grund ist es nicht realistisch zu erwarten, dass eine passende Webseite allein aufgrund von drei Fragen generiert werden kann. Natürlich ist es hilfreich, einen Ausgangspunkt zu haben, auf den man aufbauen kann, dennoch kommt man nicht darum herum, sich über die «grossen Fragen» Gedanken zu machen:

• Wie sind meine Ziele für die Webseite?

• Wer ist meine Zielgruppe?

• Welche Bedürfnisse hat diese Zielgruppe?

• Wie erreiche ich sie?

• usw.

Und wenn man die richtigen Fragen stellt, kann künstliche Intelligenz als wertvolles Werkzeug helfen, zumindest einen Teil der Antworten auf diese Fragen zu finden. Daher verfolge ich gespannt die Entwicklung des AI Website Generators und hoffe, dass der Fragenkatalog stetig erweitert wird (und damit auch die Qualität des Ergebnisses).