Webseiten erstellen mit generativer KI – von der Idee bis zum fertigen Design

Moin und willkommen zu diesem Snip. Heute will ich dir einmal zeigen, wie du mit generativer KI ganze Webseiten erstellst, angefangen von der ersten Idee bis hin zur Sitemap und zu den fertigen Wireframes und am Ende sogar zum fertigen Design. Wie einfach das geht und wie weit generative KI da schon unterstützen kann, das will ich dir heute einmal mit dem Tool Relume zeigen. Wir springen dafür einfach mal schon in ein Beispiel, was ich mal gebaut habe, rein und wir sehen, wir haben hier in Figma, also einem Beispiel für ein Design-Tool, ein fertiges Layout in einer mobilen Ansicht, aber auch in einer Desktop-Ansicht. Und wir haben hier jede Freiheit, hier etwas zu editieren, zu verschieben, Wörter rauszulöschen, wie auch immer. Also wirklich ein editiertes oder ein editierbares Design. Und das ist glaube ich hier auch der große Unterschied zu anderen Tools. Wir haben jetzt hier kein festes, starres Framework, wo wir nichts mehr bearbeiten können, wo wir dann eine fertige Seite haben, sondern wir haben hier wirklich sehr viel Flexibilität, das Ding umzubauen, zu erstellen, anzupassen nach unseren Wünschen und dann auch verschiedene Möglichkeiten, das zu exportieren. Und dafür wollen wir mal gerade in das Tool reinspringen. Und worum es heute geht, ist das Tool Relume. Und Relume hat sich genau das, was wir heute zeigen, auf die Fahne geschrieben. Und du siehst hier: Websites designed and built faster with AI. Und genau darum geht's auch. Wir haben verschiedene Möglichkeiten angefangen von Sitemaps, Wireframes und dann am Ende auch den Styleguide. Und ich will dir die drei Parts mal zeigen, um ja zu demonstrieren, wie einfach es ist, mit einem einfachen Prompt dann wirklich eine komplette Seite aufzubauen. Bevor wir aber reinspringen, ganz, ganz kurz zum Pricing von Relume, weil das natürlich auch ganz wichtig: Was kriegt man hier? Wir haben hier ganz vorne einen Free-Plan, aber ganz, ganz wichtig: Der Free-Plan ist nett, aber mit einem Projekt und einer Page relativ schnell an seinen Grenzen. Das heißt, hier kannst du es mal ausprobieren. Du siehst hier dann relativ schnell, worauf du dich einlässt. Dafür ist es auf jeden Fall ganz gut gedacht. Du hast aber hier auch den Relume Starter und Pro. Und hier sind dann schon fünf Pages, ein Projekt. Wirklich sinnvoll ist es, wenn du wirklich auch Webseiten erstellst, die vielleicht sogar verkaufst oder auch im großen Stile weiterverwendest, hier das Pro-Paket mit unlimited Pages. Kostet zwar 40 Dollar im Monat bzw. wenn du auf Yearly/Monthly gehst 58 Dollar, je nachdem, wie viel Zeit du aber damit sparst, ist das schon hier sehr, sehr schnell. Aber ganz wichtig vorweg: Du hast bei jedem Paket eine 7-Tage-Trial-Version. Das heißt, sieben Tage kannst du es testen ohne Kosten, aber nicht vergessen zu kündigen. Das heißt, hier hast du schon mal relativ schnell die Möglichkeit, das komplette Paket zu testen. So, genug über das Pricing. Lasst uns mal reinspringen in unser Tool. So, wir springen mal hier zurück in unser Dashboard. Das heißt, hier siehst du dann entsprechend in deinem Dashboard die verschiedenen Projekte, die du hast, und kannst hier auch neue erstellen. Wir machen das Ganze mal hier als Beispiel. Wir gehen hier oben rechts auf New Project und sind jetzt hier schon in der ersten und einfachsten Ansicht. Wir haben hier in der Mitte eine Sitemap. Hier steht irgendwas mit Home. Wir haben aber hier links Primary Sitemap und hier auch die Möglichkeit, mit generativer KI zu arbeiten. Falls du das nicht siehst, findest du das hier über den kleinen Zauberstift die Möglichkeit, dieses Fenster wieder zu öffnen. Und hier können wir jetzt erstmal eine Beschreibung unserer Webseite erstellen. Wir können hier über Try Example erstmal auch hier Dinge ausprobieren. Du siehst, wie ungefähr das aufgebaut ist, wie kurz und knapp das sein kann. Wir können aber auch hier eigene Sachen reinschreiben, z. B.: A German AI education platform called snipKI with AI videos, workshops, and community. So, das heißt, wir haben jetzt hier erstmal einen groben ersten Prompt gebaut, können hier unten noch mal die Menge an Seiten auswählen. Wir nehmen mal hier 10 bis 15, und die Sprache kann Deutsch sein. Und damit reicht es eigentlich schon. Du kannst hier natürlich auch Deutsch prompten. Das Ganze wird natürlich immer hin und her übersetzt, aber ich prompte immer ganz gerne Englisch, das geht ein bisschen besser. So, und jetzt klicke ich auf Generate Sitemap. Und das ist auch genau das, was passiert. Innerhalb von wenigen Sekunden haben wir hier unsere erste Sitemap, also die Seiten, die Struktur der eigenen Webseite, was aus Basis der KI hier drauf sein sollte. Du siehst hier Dinge wie Über uns, KI-Videos, Workshop, Community, Blog, Ressourcen, Kontakt, FAQ und Preise. Alles, was natürlich sinnvoll ist. Wir können hier aber auch über das Plus noch weitere Dinge hinzufügen, weitere Pages, die natürlich benennen. Wir löschen das Ganze mal hier raus. Wir können aber auch hier unten drunter Seiten in diesem Baum hinzufügen. Du siehst hier: Blog, und da drunter liegt dann Blog-Beiträge. Das geht schon ganz gut. Und damit können wir jetzt erstmal starten. Du siehst, hier sind die Sachen noch leer. Wir haben aber hier bei der Zu-Hause-Page, das ist ein bisschen schlecht übersetzt, auch die Möglichkeit, verschiedene Elemente anzulegen und zu definieren. Das heißt, du siehst hier schon mal so wie Navigationsleiste, Hero-Header-Section angelegt. Wir können das hier aber auch verschieben. Wir können aber auch mit dem Plus hier zwischen noch verschiedene Sections hinzufügen, wenn wir meinen, da fehlt noch was. Also sehr, sehr einfach und sehr flexibel. Und hier kannst du auch noch mal quasi noch einen Prompt mit dazugeben, der dann auch später noch mal genutzt wird. So, und weil hier diese leeren Seiten keinen Spaß machen, siehst du hier schon: Wir haben ein Generate Content. Klicken wir da drauf, bekommen wir ähnlich wie bei der Home-Seite spezifisch zu der Seite und zu der Unterseite entsprechend den Aufbau. Das machen wir einfach mal mit ein paar Seiten hier ein bisschen durch. So, die FAQ und Preise auch noch. Und wir sehen, die Sachen sind halt immer angepasst auf die jeweilige Seite. Wir haben hier bei Workshops die Header-Section, Feature-Liste, Vorteil, Zeitleiste, Preis und CTA. Wir haben vielleicht beim Community-Part noch mal die Header-, Feature-Section, Testimonial-Section, CTA und Galerie-Section. Beim Blog teilt sich das noch mal ein bisschen anders auf. Wir haben hier auch Blog-Beitrag, aber wenn wir den hier erstellen, bekommen wir hier auch Body, CTA, Footer. Also hier schon mal sehr, sehr gut aufgelistet, was so eine Webseite ausmacht. So, wir sind hier aber natürlich noch nicht an dem Punkt, wo wir daraus eine Webseite bauen können. Dementsprechend ist hier oben in der Mitte die Option Wireframe ganz interessant. Wenn ich da drauf klicke, dann siehst du – gucken das Ganze hier mal an –, in wenigen Sekunden werden hier diese Seiten auf Grundlage des der Sitemap, die du gebaut hast, erstellt mit vordefinierten Elementen, die du natürlich wieder bearbeiten kannst, aber erstmal, um einen ersten Aufschlag zu haben, bekommst du hier sehr, sehr gelungene, ja, einfache Aufbauten für Webseiten mit einer super Struktur, mit ersten Inhalten. Da gucken wir gleich noch kurz rein, wenn wir hier durch sind. Mit Texten, die schon passen. Das heißt, du siehst hier: Willkommen bei snipKI, Ihre AI-Lernplattform. Wir können hier aber auch alles editieren. Wir können hier in den Bereich reingehen, wir können die Copy noch mal ersetzen. So, genau. Wir können hier reingehen, die Copy hier ersetzen, wir können entsprechende Header austauschen, Copy regeneraten mit eigenem Prompt noch mal dazu, also viele Möglichkeiten, hier schon entweder also erste Sachen hinzuzufügen. Wir können über Section auch wie drüben auch z. B. neue Elemente hinzufügen. Hier haben wir dann noch mal echt viele Auswahlmöglichkeiten. Wenn ich z. B. mal sage Features, dann siehst du, hier habe ich verschiedene Header oder verschiedene Feature-Bereiche, die ich dann entsprechend hinzufügen kann, je nachdem, wie ich mir auch den Aufbau der Webseite so vorstelle. So, und das bekommen wir jetzt für jede Seite, bis hier zu einem Zeitstrahl, also verschiedene Möglichkeiten. Und hier hast du wieder die Möglichkeit, entsprechend zu generieren, was für dich passt, entsprechend zu editieren, was du vielleicht anders haben möchtest, um hier in Relume das zu bauen, was für dich wirklich Sinn ist für deine Webseite. Wir haben aber auch hier unten die Möglichkeit, zwischen Tablet und Mobil noch mal zu wechseln. Das heißt, wenn ich auf Mobil klicke, bekomme ich hier die Ansichten für die mobile Webseite. Das heißt, auch hier kann man gucken: Passt das alles so, bricht das vernünftig um, ist der Lesefluss da und hat hier erstmal für die Wireframes eine sehr, sehr gelungene Ansicht. So, last but not least – wir brauchen natürlich ein bisschen Farbe, ein bisschen Stil – gibt es hier den Styleguide. Und zur Aufnahme des Videos ist das hier noch relativ neu. Im März werden hier noch weitere Exportfunktionen kommen. Je nachdem, wann du das Video kommst, guckst, kannst du hier Sachen exportieren. Du bekommst hier aber in der Styleguide-Ansicht erstmal die Möglichkeit, hier auch auf Farbe, auf ja Stil, auf quasi auch randommäßig verschiedene Stile durchzurotieren. Können das mal hier gucken. Und können hier uns die Seite entsprechend anschauen, wie das Ganze denn aussehen könnte, wie man hier das entsprechend zusammenwürfelt oder auch so baut, wie es für einen selber sinnvoll ist. Aber du siehst hier: Kann ich sehr, sehr schnell verschiedene Schriftarten definieren und sehe hier, wie so eine Seite aussehen könnte. Und das ist schon echt ziemlich smart, kann man nicht anders sagen. Du hast hier die Möglichkeit, verschiedene Farbwerte zu wählen. Gucken wir mal gerade, wo wir das Pink haben. Hier ist es nicht drin. Müsste man mal schauen. So, hier könnte man wahrscheinlich in dem Pink noch ein bisschen was ändern. Genau, das ist jetzt hier der Farbton. Wenn ich sage, hier passt Grün besser, kann ich das auch entsprechend hier nutzen. Ja, und damit habe ich eigentlich schon von einer ersten Idee eine sehr, sehr gute Webseite und einen sehr soliden Aufbau, der es aber nicht nur einfach irgendein Template ist, was ich mir ausgesucht habe, sondern hier auch wirklich ja etwas, was wirklich nutzbar ist am Ende des Tages und auch editierbar. Und du siehst ja auch: Ich kann hier alles beliebig durchshuffeln, wie es bei mir gerade sinnvoll ist. Du hast hier die Möglichkeit auch die Konzepte zu pitchen. Das heißt, du kannst auch hier das Ganze in verschiedenen Konzepten auch vergleichen, das Ganze als Link teilen, wenn du nicht genau weißt, was für eine Farbe für dich sinnvoll ist, oder einfach das im Team auch mal teilen möchtest, kannst du das hier über die Konzepte machen und kannst hier dann auch entsprechend in Zukunft das exportieren. Und da kommen wir auch schon zum letzten Part des Videos: der Export. Und hier gibt es verschiedene Möglichkeiten. Da will ich gar nicht zu sehr in die einzelnen Bereiche reingehen. Das kommt ein bisschen drauf an, wie du arbeitest, wo du arbeitest und mit wem du auch arbeitest. Aber du hast, wenn wir mal hier auf die Wireframes zurückgehen, oben einen Export-Button relativ groß und prominent und daneben mindestens genauso wichtig: Wohin soll es denn exportiert werden? Und du siehst, hier haben wir schon verschiedene Auswahlmöglichkeiten: Wir können es in Figma exportieren, was wir gerade auch schon gesehen haben ganz am Anfang des Videos. Wir können das in Webflow exportieren, wenn wir Webflow als CMS benutzen. Wir können es als React-Code exportieren, wenn wir das entsprechend hosten können und ähnlich zu HTML. Wir können auch TXT- und CSV-Dateien exportieren, haben natürlich nicht den Wireframe und die Inhalte dabei, aber eher noch mal, wenn wir das strukturiert haben möchten. Und da können wir uns entscheiden, was für uns Sinn macht. Wenn wir z. B. so was nehmen wie Figma und dann auf Export klicken, dann bekommen wir hier eine Schritt-für-Schritt-Anleitung, wie das Ganze denn in Figma funktioniert. Also du öffnest hier was, du installierst ein Plugin, und das gucken wir uns gleich noch mal kurz an. Kannst es dann in Figma exportieren. Selbes gilt natürlich für Webflow. Wenn du hier reingehst, bekommst du hier auch eine kurze Ansicht: Wie können wir das Ganze denn in Webflow exportieren? Wäre auch meine Empfehlung: Wenn du eine Webseite hast und da ein CMS hast, was vielleicht WordPress ist oder Webflow, dann ist Webflow auf jeden Fall eine sehr, sehr gute Wahl. Sehr performant und macht auf jeden Fall Spaß, hier auch Sachen zu editieren. Und da ist hier eine super, super Integration geschaffen. Und um das Ganze jetzt noch mal in Figma auch zu zeigen, wie das auch geht und wie das z. B. auch in WordPress funktionieren kann, will ich das einmal kurz vom Workflow her zeigen: Wir können nämlich hier auf Figma gehen, dann bekommen wir hier die Anleitung, wie wir das Ganze exportieren. Das habe ich jetzt schon mal gemacht. Das heißt, wir können jetzt hier in Figma mal reingehen. Stellen uns mal vor, hier wäre ein leeres Blatt. So, wir machen das mal hier. Und dann können wir hier oben auf das kleine Icon gehen, oben links, auf Plugins, auf Relume. Dann lädt das einmal ganz kurz. Wir bekommen hier in Relume die Möglichkeit, die verschiedenen Seiten zu exportieren bzw. zu importieren. Wir haben jetzt hier snipKI mal genommen. Ich klicke hier drauf und kann dann hier entsprechend entweder die komplette Sitemap integrieren oder auch sagen: Ich möchte jetzt mal nur die Über-uns-Seite haben. Dann dauert es auch ein paar Sekunden wieder hier, und wir bekommen das, was wir gerade in Relume gesehen haben, genauso in Figma zurückgespielt. So, wir gucken jetzt mal gerade. Sollte nur ein paar Sekunden dauern, dann werden wir hier entsprechend alles haben, was wir dann auch mit den gewohnten Figma-Mitteln editieren können. So, da sehen wir auch schon die Seite. Und sind damit schon mal durch. Machen wir das Fenster hier mal zu. Und du siehst, hier bekomme ich nicht nur die Desktop-Ansicht, sondern auch die mobile Ansicht. Und auch hier wieder die maximale Flexibilität: Wenn ich sage, ich möchte jetzt hier diesen Bereich hier vielleicht ein bisschen höher setzen oder ein bisschen tiefer, möchte hier vielleicht auch den Text hier editieren, kann natürlich hier über die Figma-Elemente auch entsprechend anpassen, wenn ich zentriert haben möchte, oder vielleicht auch in einem anderen Winkel, eine andere Textfarbe, alles möglich. Können jetzt hier mal rot gehen, haben wir jetzt hier roten Text, macht jetzt wenig Sinn, aber du siehst, worauf ich hinauswill: Wir haben die Möglichkeit, hier entsprechend das Design anzupassen. Und je nachdem, wie du arbeitest, gibt es natürlich jetzt viele Möglichkeiten, das aus Figma zu exportieren. Manche haben Designer, die das dann quasi umsetzen, manche können das direkt in CSS exportieren. Es gibt hier auch verschiedene Möglichkeiten, das packe ich auch unter das Video noch mal, z. B. ein Figma-Design in WordPress direkt zu exportieren. Dafür gibt es dann Tools wie hier, also Figma to WordPress als Plugin für Figma. Hier findest du dann entsprechende Anleitung, wie das funktioniert. Ich pack dir auch noch mal einen kleinen Perplexity – Perplexity-Suche dazu, hier siehst du nämlich auch noch mal ein paar Möglichkeiten, wie das dann geht, wenn du WordPress nutzt und das aus Figma exportieren möchtest. Also je nachdem, wie du arbeitest, bekommst du hier eine ganze Reihe an Möglichkeiten, das zu exportieren. Und damit sind wir auch schon am Ende. Ich habe dir gezeigt, wie du mit Relume sehr, sehr einfach von einer Idee über eine Sitemap bis hin zu Wireframes, die dann sogar gestylt sind, das Ganze erstellen kannst mit generativer KI, ohne manuell einzelne Seiten anzustoßen. Hast aber gleichzeitig die Flexibilität, jede Seite und jeden Bereich dieser Seite zu editieren, zu verändern und auf deine Anforderungen anzupassen. Und hier ist generative KI auf jeden Fall schon mal eine echt gute Hilfe und aus meiner Sicht ein sehr smarter Weg hier, diese Kombination aus der eigenen Kontrolle und der Erzeugung von generativer KI zu nutzen. Und beim Ausprobieren und beim Erstellen deiner ersten Webseiten mit Relume wünsche ich dir ganz viel Spaß und wir sehen uns beim nächsten Snip. Ciao.