MAY 13, 2026
Vibe Block: Eine neue Art, Websites zu erstellen
Möchten Sie eine auffällige Animation erstellen? Einen interaktiven Rechner? Einen Schieberegler, eine Infografik oder ein mehrstufiges Formular mit verschiedenen Szenarien? All das können Sie jetzt erstellen, ohne auch nur eine einzige Zeile Code schreiben zu müssen. Mit dem neuen Block können Sie jedes Website-Element in einfacher Sprache erstellen. Beschreiben Sie Ihre Idee, und die KI setzt sie um.
Was ist Vibe Block?
Vibe-Coding ist ein Ansatz, bei dem du deine Idee beschreibst und die KI sich um die technische Seite kümmert – also das Schreiben des Codes. Alles läuft über einen Chat ab: Du gibst eine Eingabe ein, und die KI liefert das Ergebnis. Jetzt sind deiner Fantasie keine Grenzen gesetzt, nicht deinen technischen Fähigkeiten.
Zu finden unter: Block-Bibliothek → Sonstiges → Vibe-Block.
Zu finden unter: Block-Bibliothek → Sonstiges → Vibe-Block.
So funktioniert es
1. Beschreiben Sie, was Sie benötigen
Formulieren Sie Ihre Anfrage in einfacher Sprache – Sie müssen sich keine Gedanken über die technische Seite machen. Je detaillierter Ihre Beschreibung ist, desto genauer ist das Ergebnis.
2. Die KI erstellt den Block
Innerhalb von Sekunden erscheint auf der Seite ein fertiger Block, der auf Ihrer Beschreibung basiert.
3. Verfeinern Sie ihn per Chat
Möchten Sie Änderungen vornehmen? Fragen Sie einfach im Chat nach. Wenn Sie programmieren können, können Sie ihn auch direkt bearbeiten.
1. Beschreiben Sie, was Sie benötigen
Formulieren Sie Ihre Anfrage in einfacher Sprache – Sie müssen sich keine Gedanken über die technische Seite machen. Je detaillierter Ihre Beschreibung ist, desto genauer ist das Ergebnis.
2. Die KI erstellt den Block
Innerhalb von Sekunden erscheint auf der Seite ein fertiger Block, der auf Ihrer Beschreibung basiert.
3. Verfeinern Sie ihn per Chat
Möchten Sie Änderungen vornehmen? Fragen Sie einfach im Chat nach. Wenn Sie programmieren können, können Sie ihn auch direkt bearbeiten.
So verwenden Sie Vibe Block. Beispiele für Eingabeaufforderungen
Vibe Block ist besonders dann nützlich, wenn vorgefertigte Blöcke und Zero Block . Früher musste man für die Erstellung individueller Elemente Modifikatoren verwenden oder einen Entwickler beauftragen. Jetzt kannst du das ganz einfach selbst erledigen, ohne den Tilda-Editor verlassen zu müssen.
Vibe Block erweist sich in vielen Situationen als nützlich:
Vibe Block erweist sich in vielen Situationen als nützlich:
- Für individuelle Interaktivität – beschreiben Sie die Mechanik, AI setzt sie um.
- Um schnell einen Entwurf zu erstellen – Vibe Block beschleunigt Ihren Arbeitsablauf.
- Der Kunde hat dir nur vage Vorgaben gemacht – erarbeite ein paar Optionen und lass ihn entscheiden.
Konferenzprogramm
Aufgabe
Erstelle eine Seite mit dem Konferenzprogramm im modernen Webdesign-Stil, mit Registerkarten für jeden Konferenztag.
Stil: Klar, hell, hochwertiges Tech-Design mit Karten mit sanften Schatten, Akzentfarben für Kategorien, einem übersichtlichen Raster und markanter Typografie, wie auf hochwertigen Websites.
Mehr anzeigen
Erstelle eine Seite mit dem Konferenzprogramm im modernen Webdesign-Stil, mit Registerkarten für jeden Konferenztag.
Stil: Klar, hell, hochwertiges Tech-Design mit Karten mit sanften Schatten, Akzentfarben für Kategorien, einem übersichtlichen Raster und markanter Typografie, wie auf hochwertigen Websites.
Mehr anzeigen
Kalorienrechner
Aufgabe:
Erstelle einen modernen, interaktiven Kalorienzähler für den täglichen Gebrauch. Entwirf einen optisch ansprechenden Design-Block. Links: ein großer, auffälliger Titel. Rechts: eine Karte mit dem Formular für die Kalorienberechnung. Nach der Berechnung der Kalorien sieht der Nutzer die tägliche Kalorienaufnahme und die Makronährstoffe.
Mehr anzeigen
Erstelle einen modernen, interaktiven Kalorienzähler für den täglichen Gebrauch. Entwirf einen optisch ansprechenden Design-Block. Links: ein großer, auffälliger Titel. Rechts: eine Karte mit dem Formular für die Kalorienberechnung. Nach der Berechnung der Kalorien sieht der Nutzer die tägliche Kalorienaufnahme und die Makronährstoffe.
Mehr anzeigen
Quiz
Erstelle ein interaktives Quiz. Thema: Grundbegriffe der Typografie. Der Block sollte wie ein moderner, interaktiver Test mit ansprechendem Design aussehen.
Aufbau:
Visueller Stil: Modernes, markantes Design mit Elementen des Glassmorphismus. Dunkler Hintergrund und ein violett-blauer Farbverlauf als Akzentfarbe. Verwende Weiß für Texte und Hellgrau für weniger wichtige Textelemente. Setze sanfte Schatten, viel Freiraum im Layout und Animationen ein, die das Nutzererlebnis verbessern.
Aufbau:
- Startseite: Überschrift, Beschreibung, Schaltfläche „Quiz machen“.
- Fragenbildschirm: Zählung „Frage 1 von 5“, Fragetext, Antwortoptionen in Form von großen anklickbaren Karten, Schaltfläche „Weiter“.
- Ergebnisbildschirm: Endpunktzahl, Level-Überschrift: Anfänger / Lernender / Typografie-Begeisterter / Fortgeschrittener / Experte / Meister, Erläuterungstext, Schaltfläche „Quiz erneut absolvieren“.
Visueller Stil: Modernes, markantes Design mit Elementen des Glassmorphismus. Dunkler Hintergrund und ein violett-blauer Farbverlauf als Akzentfarbe. Verwende Weiß für Texte und Hellgrau für weniger wichtige Textelemente. Setze sanfte Schatten, viel Freiraum im Layout und Animationen ein, die das Nutzererlebnis verbessern.
Weitere Beispiele
*Dieser Block wurde ebenfalls mit Vibe Block erstellt
Anfrage-Limits nach Tarif:
- Kostenlos: 5 Anfragen alle 12 Stunden, 20 Anfragen alle 30 Tage
- Privat- und Geschäftskunden: 50 Anfragen alle 12 Stunden, 100 Anfragen alle 30 Tage.
Lesen Sie auch
Ein einheitliches Designkonzept für Ihre Website
Passen Sie die Anordnung der Elemente im Auto Layout bei unterschiedlichen Bildschirmauflösungen an
