Einsteiger-Workshop zur Erstellung von Webseiten mit Lovable und KI-Integration
In der Session ging es um die praktische Erstellung und Bearbeitung von Webseiten anhand des Tools Lovable, unterstützt durch verschiedene KI-Systeme wie Claude und Perplexity.
In einer Workshop-Session wurden Webseiten mit dem Tool Lovable erstellt und KI-Systeme wie Claude und Perplexity zur Unterstützung genutzt. Die Teilnehmenden lernten technische Abläufe, Konzeptentwicklung und iterative Überarbeitung kennen sowie die Veröffentlichung und Domain-Integration im KI-gestützten Workflow.
Einführung in den Workshop: Ziele und Ausgangssituation
Der Workshop zielte darauf ab, den Teilnehmenden in ca. drei Stunden eine erste eigenständige Version einer Webseite zu ermöglichen. Im Fokus stand die praktische Anwendung von Lovable, einem Tool zur automatisierten Webseiten-Generierung, das durch KI-Systeme wie Claude (Cloud) und Perplexity ergänzt wird. Die Teilnehmenden, Brigitte und Peter, waren bereits mit digitalen Tools vertraut, hatten aber wenig bis keine Erfahrung mit Lovable oder ähnlichen Vibe-Coding-Plattformen.
Die Herausforderung war, nicht nur die Technik zu bedienen, sondern auch überzeugende Inhalte und Konzepte zu entwickeln, die auf die Geschäftsmodelle der Teilnehmenden abgestimmt sind.
Erste Schritte: Technische Vorbereitung und Setup
Der Start war durch technische Schwierigkeiten geprägt: Audio- und Video-Verbindungsprobleme, Kamera und Mikrofone mussten eingerichtet werden. Es zeigte sich, dass gerade beim Einsatz neuer KI-Tools und webbasierten Systemen eine stabile Hardware- und Software-Konfiguration erforderlich ist — insbesondere im Zusammenspiel zwischen Zoom, Lovable und den KI-Apps.
Wichtig war die Empfehlung, Lovable-Konten einzurichten und bei Bedarf kostenpflichtige Monatsabos zu buchen, um uneingeschränkt alle Funktionen nutzen zu können. Hier zeigte sich ein Stolperstein für Nutzer ohne Kreditkarte, was die Zahlung eines Upgrades erschwerte.
Konzeptphase: Inhalte sprechen statt schreiben
Ein zentraler Tipp im Workshop war, das eigene Webseiten-Konzept per Spracheingabe an die KI zu vermitteln. Die Teilnehmenden wurden ermuntert, 5 bis 10 Minuten ihre Gedanken zu ihrem Angebot, ihrer Zielgruppe, Besonderheiten und Visionen „unstrukturiert“ in Claude oder Perplexity zu diktieren. Die KI kann viel besser mit ausführlichen, natürlichen Monologen arbeiten als mit stark komprimierten, textlich stark reduzierten Eingaben.
Der erarbeitete Input wird von der KI analysiert, führt zu Rückfragen und hilft, eine stimmige Webseiten-Struktur und überzeugende Texte zu generieren. Dieses Vorgehen ist auch praktisch, weil der Prozess flexibel ist und jederzeit weitere Details ergänzt oder korrigiert werden können.
Iteratives Arbeiten mit Lovable und Claude
Nach der Konzeptphase wurde das Ergebnis in Lovable eingespeist, allerdings in der „Planen“-Phase, nicht direkt in der „Erstellen“-Phase. Das hat den Vorteil, dass zunächst ein Plan beziehungsweise Entwurf erstellt wird, der überprüft, kommentiert und nach Bedarf verbessert werden kann, bevor eine endgültige Webseite generiert wird.
Durch den interaktiven Workflow können Feinjustierungen etwa bei Schreibweise, Aufbau der Seitenstruktur, grafischen Elementen oder Calls to Action vorgenommen werden. Dieses Vorgehen war für die Teilnehmenden neu und erforderte einige Übung. Lovable bietet den Vorteil, dass viele Aufgaben automatisiert und kostenbewusst durch „Credits“ abgerechnet werden — ein Konzept, das die Teilnehmer erst begreifen mussten.
Hin und Her zwischen verschiedenen KI-Tools
Ein zentraler Aspekt war der Einsatz mehrerer KI-Systeme parallel: Claude für die Sprachaufnahme und -verarbeitung, Lovable als Webseiten-Builder und Perplexity (zum Textverfeinern) bzw. Microsoft Copilot als Alternativen oder Ergänzungen.
Die Kombination erfordert technisches Fingerspitzengefühl und Verständnis für die jeweiligen Stärken und Schwächen. Beispielsweise hat Claude ein Zeitlimit für Sprachaufnahmen und schaltete sich teilweise ab, was für Frustration sorgte. Perplexity kann als Text-Editor dienen, um Ergebnisse aus Lovable weiter zu verbessern.
Ein wichtiger Erkenntnisgewinn war: Je besser die Eingaben und das Briefing sind, desto treffsicherer ist das KI-Ergebnis. Das bedeutet, dass das Erarbeiten eines guten Konzeptes im Vorfeld der KI-Nutzung essentiell ist.
Umgang mit technischen Hürden und Frustration
Peter und Brigitte berichteten von verschiedenen technischen Problemen, etwa mit der KI-Aufnahme, Synchronisierung zwischen App und Browser, Chrome-Crashs und Schwierigkeiten bei der Benutzerführung. Dies sind typische Anfangshürden bei der Nutzung neuer Cloud- und KI-Lösungen.
Sebastian Eisenbürger empfahl, geduldig Schritt für Schritt vorzugehen, regelmäßig Rückfragen zu stellen und die Erkenntnisse zwischen den beteiligten Tools zu transferieren (z.B. Chatprotokolle kopieren und in andere KI-Systeme einfügen). Außerdem wurde mehrfach betont, dass diese Systeme jung und noch nicht „ausgereift“ sind, technisches Verständnis und Frustrationstoleranz deshalb wichtig sind.
Die Erstellung des Webseiten-Entwurfs und das Feedback
Im weiteren Verlauf konnten beide Teilnehmenden ihr KI-konzipiertes Webseiten-Briefing in Lovable integrieren. Dort ließen sich Pläne einsehen, Texte prüfen und die Vorschau aktivieren. Feedback konnte per Sprachmodell direkt in den Entwurf gesprochen werden.
Beispiele für Änderungswünsche:
- Anpassung der Farbgestaltung und Schriftarten
- Einbindung von Bildern und Logos
- Strukturierung der Inhaltsabschnitte (z.B. fünf Schritte als Prozessdarstellung)
- Änderungen an Texten mit klaren Formulierungsvorschlägen
- Integration von Terminbuchungs-Elementen
Dieses iterative Vorgehen ermöglichte, die Webseite in kleinen Schritten weiterzuentwickeln und dabei jederzeit einen Überblick über den aktuellen Stand zu haben.
Die Teilnehmenden lernten, dass die KI nicht perfekt ist, sondern das Ergebnis immer vom Input abhängt. Daher ist es sinnvoll, lieber etwas ausführlicher und konkreter zu kommunizieren als zu kurz zu fassen.
Veröffentlichung, Domain-Integration und weitere Schritte
Das letzte Workshop-Thema war die Veröffentlichung der Webseite. Lovable erlaubt die Nutzung eigener Domains, wobei die technische Verbindung meist automatisiert abläuft — Voraussetzung ist der Zugriff auf das Domain-Management.
Wichtig zu wissen ist:
- Die Seite bleibt privat, solange sie nicht veröffentlicht ist.
- Zum Veröffentlichen ist ein kostenpflichtiger Lovable-Account nötig.
- Lovable stellt eine Domain kostenlos bereit, falls keine eigene vorhanden ist.
- Die Vorschau kann auch über die Lovable-App am Smartphone betrachtet werden, um mobile Nutzung zu testen.
Die Teilnehmer wurden ermutigt, die Webseite auch mit weniger als 100 Prozent Reife zu veröffentlichen und im Lauf der Zeit weiter auszubauen. So kann Google die Seite indexieren, und erste Besucher bekommen eine Funktionierende Präsenz.
Fazit und praktische Konsequenzen
Der Workshop zeigte eindrücklich, wie KI-gestützte Tools die Webseiten-Erstellung heute erleichtern und beschleunigen können. Gleichzeitig wurde klar, dass technische und konzeptionelle Hürden insbesondere für Einsteiger bestehen bleiben.
Wichtigste Erkenntnisse für die Praxis sind:
- Vorbereitung ist entscheidend: Konzept und Inhalte sollten vor der KI-Nutzung ausführlich verbalisiert werden, um ein treffendes Ergebnis zu erhalten.
- Technische Infrastruktur prüfen: Hardware, Software, Bandbreite und Eingabegeräte müssen möglichst stabil und bekannt sein, damit Ablaufunterbrechungen vermieden werden.
- Iteratives Vorgehen bevorzugen: Lieber mehrfach planen, prüfen und anpassen, statt sofort auf „Erstellen“ zu klicken. Das spart Zeit und Kosten.
- Backup und Monitoring: Gespräche und Eingaben sollten aufgezeichnet oder protokolliert werden, um Verluste zu vermeiden, falls KI-Systeme abbrechen oder abstürzen.
- Veröffentlichung frühzeitig starten: Auch eine noch nicht perfekte Webseite sollte live gehen, um Sichtbarkeit zu erzeugen und Feedback einzuholen.
- Zahlungsoptionen klären: Für kostenpflichtige KI- und Webseitendienste ist eine Kreditkarte meist Voraussetzung, was vorab geklärt werden sollte.
Insgesamt bietet die Kombination von Lovable und unterstützender KI eine vielversprechende Möglichkeit, eigene Webseiten auch ohne tiefe IT-Kenntnisse aufzusetzen und schnell auf individuelle Geschäftsmodelle anzupassen. Geduld, Übung und konkrete Inhalte sind die Schlüssel zum Erfolg.
