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:

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 News

So einfach kannst du ComfyUI nutzen: Comfy Cloud ist offiziell aus der Beta raus

ComfyUI ohne eigene GPU, ohne Terminal, ohne Setup, direkt im Browser. Seit dem 4. März 2026 ist Comfy Cloud offiziell aus der Beta. Das klingt nach dem Moment, auf den viele gewartet haben. Meine These: Comfy Cloud ist das einfachste Einstiegstor in ComfyUI, das es gibt. Aber wer regelmäßig und ernsthaft damit arbeitet, sollte die Kosten genau durchrechnen, und Alternativen kennen. Was sich seit der Beta verändert hat In meinem ursprünglichen Post hatte ich Custom

9. März 2026

Minimalistische, quadratische Infografik mit dem Haupttitel "EVOLUTION: PROMPT -> CONTEXT -> SKILLS ENGINEERING". Darunter befinden sich drei farblich kodierte, rechteckige Felder, die durch Pfeile von links nach rechts verbunden sind und einen Entwicklungsprozess darstellen. Das linke, hellblaue Feld ist betitelt mit "PROMPT ENGINEERING". Es enthält eine Ikone einer Gedankenblase mit einem Fragezeichen und einer Lupe über Text. Text darunter: "FOCUS: Single Input", "QUESTION: 'How do I formulate my instruction?'", "GOAL: Perfect the prompt". Ein Pfeil zeigt auf das mittlere, hellorange Feld mit dem Titel "CONTEXT ENGINEERING". Die Ikone zeigt Dokumente, eine Cloud-Datenbank und Zahnräder. Text darunter: "FOCUS: Information", "QUESTION: 'What information does the AI need?'", "GOAL: Provide background data". Ein weiterer Pfeil zeigt auf das rechte, hellgrüne Feld mit dem Titel "SKILLS ENGINEERING". Die Ikone zeigt ein Flussdiagramm mit Entscheidungsknoten und einem abgehakten Kontrollkästchen. Text darunter: "FOCUS: Process Knowledge", "QUESTION: 'What process knowledge does the AI need?'", "GOAL: Optimize action competence". Am unteren Rand der Grafik fasst eine Zeile das Ergebnis der Evolution zusammen: "OPTIMIZES: Single Interactions -> Knowledge State -> Action Competence".

KI im Einsatz

Skills Engineering: Ist das was Neues oder die Weiterentwicklung von Prompt- und Context Engineering?

Nach Prompt Engineering kam Context Engineering. Jetzt zeichnet sich ab, was als Nächstes kommt: Skills Engineering. Ich rechne damit, dass der Begriff in den kommenden Monaten zunehmend auftaucht. Denn die Entwicklung dahin, was damit gemeint ist, ist sinnvoll und konsequent, wenn man bessere Ergebnisse mit KI erzielen will. Was ist Skills Engineering? „Skills Engineering beschreibt die Kompetenz, menschliches Prozesswissen so aufzubereiten, dass KI-Agenten es nutzen können.“ (Vroni) Das klingt abstrakt, meint aber etwas sehr Konkretes.

5. 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 🥳