KI im Webdesign – mit Relume Library AI, Figma und Webflow effizient zur fertigen Website

Georg Neumann
November 23, 2023

Im KI Zeitalter wird Webdesign neu definiert, und innovative Tools wie Relume Library AI, Figma und Webflow sind an vorderster Front dieser Transformation. Wir zeigen dir, wie diese Tools den Weg von der ersten Idee bis zur fertigen Webseite nicht nur vereinfachen, sondern extrem beschleunigen.

Sitemap & Websitetexte mit Relume Library AI

Beginnen wir mit der Websitestruktur. Relume Library AI ist ein echter Gamechanger. Stellt euch vor: Ihr gebt einfach eure Grundidee ein und schwupps – da habt ihr eure Sitemap und Wireframes, inklusive KI-generiertem Text. Schneller geht’s nicht! Die optimale Arbeitsgrundlage.

Der Prompt: „Kreiiere eine Website für das KI Marketing Bootcamp. Wir schulen Marketingabteilungen und Agenturen im Umgang mit generativer KI. Unser USP ist unsere Unterteilung in 2 Experten: Veronika Hackl für Text-KI und Georg Neumann für Bild-KI.“

Das Ergebnis: Eine Seitenstruktur mit Landingpage, About Us und Unterseiten zu fiktiven KI Marketing Bootcamp Kursen. Hier kann ich jetzt wahlweise nue generieren lassen, den Prompt anpassen oder händisch eingreifen und Passagen und Texte ausbessern.

Wireframes mit Relume Library

Nachdem man in wenigen Minuten eine Sitemap erstellt hat, geht es nun an die Wireframes. Diese werden auf Basis der Sitemap automatisch generiert und bereits mit KI generierten Texten befüllt. Im Anschluss kann ich die Sections noch gegen andere Layouts tauschen und händisch nachbessern.

Relume Library Export-Optionen: Figma oder Webflow

Habt ihr eure Wireframes in Figma fertig, könnt ihr wählen: Entweder weiter in Figma stylen oder alles nach Webflow exportieren. Flexibilität ist hier das Zauberwort! Wenn ihr in Webflow bereits die Relume Library für euch geklont habt, erhaltet ihr beim Import eine funktionionale Website mit Effekten, die nurnoch gestylet werden muss.

Finalisieren und Veröffentlichen in Webflow

Zum Schluss bringt Webflow seinen CMS-Zauber ins Spiel. Webflow setzt auf ein Content-first-Design. Das bedeutet, dass ihr von Anfang an mit echtem Inhalt arbeitet. So könnt ihr Designprobleme früh erkennen und euer Design um den Inhalt herum gestalten, anstatt den Inhalt in ein vorgefertigtes Design zu pressen.

Fazit

Mit diesem Workflow könnt ihr innerhalb weniger Stunden Landingpages auf Agenturniveau erstellen. Die Kombination aus Relume Library AI, Figma und Webflow bietet einen effizienten, flexiblen und adaptiven Prozess für Webdesigner. So wird hochwertiges Webdesign schneller und einfacher denn je!

Wenn du lernen willst, wie du gleich noch hochwertige Fotos und Visuals für dein Webdesign generieren kannst, schau mal beim KI Marketing Bootcamp vorbei.

Wer hat's geschrieben?

Georg Neumann

Ich bin Georg. Früher habe ich Pixel geschubst, heute trainiere ich Bild-KI Modelle. Seit 2022 habe ich mich voll und ganz der generativen KI verschrieben – nicht nur als User, sondern als Gestalter. Ich liebe es, die Grenzen von Modellen wie Flux und Z-Image auszuloten und Workflows zu bauen, die Marketingteams wirklich voranbringen. Mit meinem KI Marketing Bootcamp und Projekten wie meinen Kinderbüchern zeige ich, dass KI und Kreativität keine Gegensätze sind. Ich bin der Nerd, der dich an die Hand nimmt und sicher durch die Transformation führt.

Alle Beiträge

Das könnte Dich auch interessieren:

Aktuelles

Nudging und KI: Warum sanfte Stupser beim Lernen mit KI nicht reichen

Nudging ist eines dieser Konzepte, die so elegant klingen, dass man sie sofort auf alles anwenden will. Ein kleiner Stupser in die richtige Richtung, eine geschickte Voreinstellung, eine kaum merkliche Veränderung der Umgebung, und schon verhalten sich Menschen besser. Funktioniert in Kantinen, beim Organspende-Register, bei Cookie-Bannern. Warum nicht auch beim Lernen mit KI? Ich höre die Idee regelmäßig in Seminaren, besonders von Führungskräften: „Können wir nicht einfach ein paar Nudges einbauen? Ein Pop-up, das fragt:

2. April 2026

KI im Einsatz

12 KI-Nudges: Kleine Stupser für mehr KI-Praxis

KI-Nudges, um besser in die Praxis zu kommen! Doch was ist das überhaupt? Nudges sind kleine Schubser für dein Verhalten. Man kennt sie zum Beispiel aus der Kantine: Wenn statt dem Schnitzel der Salat vorne steht, kann das ein geplanter Schubser sein, damit du zur gesünderen Wahl greifst. Ich habe mir überlegt, mit welchen Nudges man die praktische Nutzung von KI verbessern kann. Im Nudging-Artikel habe ich beschrieben, warum klassisches Nudging beim Lernen mit KI

2. April 2026

KI im Einsatz

Vibecoding im Marketing: Warum Marketer jetzt programmieren lernen, ohne programmieren zu lernen

Vor drei Monaten hätte ich nicht geglaubt, dass ich das schreibe: Ich baue gerade eine Browser Extension. Sie erfasst, wie Menschen KI generierte Texte editieren. Ein Forschungstool für meine Arbeit. Ich kann nicht programmieren. Ich habe nicht programmieren gelernt. Und trotzdem funktioniert das Ding. Der Grund hat einen Namen, der gerade durch die Tech Welt geistert: Agent Coding. Oder, wie Andrej Karpathy es Anfang 2025 nannte: Vibecoding. Die Idee ist simpel und radikal zugleich. Du

23. März 2026

Aktuelles

„Was euch nicht gehört, könnt ihr nicht verkaufen“ – Was drei Urteile für deinen KI-Einsatz bedeuten

Drei deutsche Gerichte haben innerhalb weniger Monate die Spielregeln für generative KI neu geschrieben. Die These ist unbequem, aber belastbar: Wer KI-Output als eigene kreative Leistung verkauft, ohne den menschlichen Gestaltungsbeitrag nachweisen zu können, steht rechtlich mit leeren Händen da. Und haftet trotzdem für alles, was rauskommt. Das betrifft nicht irgendwelche Tech-Konzerne in Kalifornien. Das betrifft jede Agentur, die nächste Woche ein KI-generiertes Logo an einen Kunden liefert. INPUT: Was die KI frisst – und

23. März 2026

ixel-Art-Illustration eines Detektivs im Trenchcoat und mit Sonnenbrille. Er hält ein leuchtend grünes Dokument mit der Aufschrift 'skills.md' in der Hand. Rechts daneben ist ein aufsteigender Aktienchart mit der Überschrift 'STONKS' zu sehen, sowie kleine Symbole für ein Gehirn, ein Zahnrad und eine Tastatur. Der Detektiv hat eine Sprechblase: 'SKILLS.MD: MUCH WOW, VERY AGENT.'

KI im Einsatz

Agent Skills schreiben: Anleitung mit Marketing-Beispielen

Im Analyse-Artikel über Skills Engineering habe ich beschrieben, warum strukturiertes Prozesswissen die nächste Stufe der KI-Nutzung ist. Dieser Beitrag ist die praktische Seite: Wie schreibt man einen Agent Skill? Was gehört rein, was nicht? Und wie sieht das für typische Marketing-Aufgaben aus? Was ein Agent Skill technisch ist Ein Agent Skill ist auf seine allereinfachste Weise einfach eine Textdatei namens SKILL.md. Nicht mehr, also nicht verrückt machen lassen, nur weil das fancy klingt. Absolut machbar

13. März 2026

Uncategorized

Schau ins Denkprotokoll: Was KI-Modelle verraten, wenn man sie laut denken lässt

Ich habe Claude Schere, Stein, Papier spielen lassen. Drei Runden. Claude hat jede einzelne gewonnen. Beeindruckend? Auf den ersten Blick schon. Bis ich ins Denkprotokoll geschaut habe. Dort stand, sinngemäß: „Ich sehe die Wahl des Nutzers, bevor ich meine eigene treffe. Das ist nicht fair.“ Das Ergebnis (3:0 für Claude) sagt wenig. Das Denkprotokoll sagt alles. Ich zeige dieses Beispiel inzwischen in fast jedem Seminar, weil es in dreißig Sekunden demonstriert, was die meisten KI-Nutzer

13. März 2026

KI im Webdesign – mit Relume Library AI, Figma und Webflow effizient zur fertigen Website

Sitemap & Websitetexte mit Relume Library AI

Wireframes mit Relume Library

Relume Library Export-Optionen: Figma oder Webflow

Finalisieren und Veröffentlichen in Webflow

Fazit

Wer hat's geschrieben?

Georg Neumann

Hey Du. Willst du AI Content Manager werden?

🚀 Exklusive Back-to-School-Aktion 🚀

Abonniere unseren Newsletter 🥳