MAY 13, 2026
Vibe Block: nowy sposób tworzenia stron internetowych
Chcesz stworzyć przyciągającą wzrok animację? Interaktywny kalkulator? Suwak, infografikę lub wieloetapowy formularz z różnymi scenariuszami? Teraz możesz to wszystko zbudować bez pisania ani jednej linii kodu. Nowy moduł pozwala tworzyć dowolne elementy stron internetowych za pomocą prostego języka. Opisz swój pomysł, a sztuczna inteligencja go zrealizuje.
Czym jest Vibe Block
Programowanie metodą Vibe to podejście, w którym opisujesz swój pomysł, a sztuczna inteligencja zajmuje się stroną techniczną – pisaniem kodu. Wszystko odbywa się na czacie: wpisujesz polecenie, a sztuczna inteligencja dostarcza wynik. Teraz jedynym ograniczeniem jest Twoja wyobraźnia, a nie umiejętności techniczne.
Gdzie znaleźć: Biblioteka bloków → Inne → Blok Vibe.
Gdzie znaleźć: Biblioteka bloków → Inne → Blok Vibe.
Jak to działa
1. Opisz, czego potrzebujesz
Sformułuj swoje zapytanie prostym językiem — nie musisz martwić się o kwestie techniczne. Im więcej szczegółów podasz, tym dokładniejszy będzie wynik.
2. Sztuczna inteligencja tworzy blok
W ciągu kilku sekund na stronie pojawi się gotowy blok oparty na Twoim opisie.
3. Dopracuj go za pomocą czatu
Chcesz wprowadzić zmiany? Po prostu poproś o to na czacie. Jeśli znasz się na programowaniu, możesz również edytować blok bezpośrednio.
1. Opisz, czego potrzebujesz
Sformułuj swoje zapytanie prostym językiem — nie musisz martwić się o kwestie techniczne. Im więcej szczegółów podasz, tym dokładniejszy będzie wynik.
2. Sztuczna inteligencja tworzy blok
W ciągu kilku sekund na stronie pojawi się gotowy blok oparty na Twoim opisie.
3. Dopracuj go za pomocą czatu
Chcesz wprowadzić zmiany? Po prostu poproś o to na czacie. Jeśli znasz się na programowaniu, możesz również edytować blok bezpośrednio.
Jak korzystać z Vibe Block. Przykłady podpowiedzi
Vibe Block przydaje się, gdy gotowe bloki i Zero Block oczekiwań. Wcześniej tworzenie niestandardowych elementów wymagało użycia modyfikatorów lub zatrudnienia programisty. Teraz możesz to zrobić samodzielnie, nie opuszczając edytora Tilda.
Vibe Block przydaje się w wielu różnych sytuacjach:
Vibe Block przydaje się w wielu różnych sytuacjach:
- Aby uzyskać interaktywność dostosowaną do własnych potrzeb — opisz mechanikę, a AI ją zrealizuje.
- Aby szybko przygotować szkic — Vibe Block usprawnia pracę.
- Klient przekazał Ci niejasne wytyczne — przygotuj kilka propozycji i pozwól mu wybrać.
Program konferencji
Zadanie
Stwórz stronę z harmonogramem konferencji w nowoczesnym stylu, z zakładkami dla każdego dnia konferencji.
Styl: Przejrzysty, lekki, w stylu premium tech, z kartami z delikatnymi cieniami, akcentami kolorystycznymi dla poszczególnych kategorii, uporządkowaną siatką oraz wyrazistą typografią, jak na stronach internetowych klasy premium.
Pokaż więcej
Stwórz stronę z harmonogramem konferencji w nowoczesnym stylu, z zakładkami dla każdego dnia konferencji.
Styl: Przejrzysty, lekki, w stylu premium tech, z kartami z delikatnymi cieniami, akcentami kolorystycznymi dla poszczególnych kategorii, uporządkowaną siatką oraz wyrazistą typografią, jak na stronach internetowych klasy premium.
Pokaż więcej
Licznik kalorii
Zadanie
: Stwórz nowoczesny, interaktywny dzienny licznik kalorii. Zaprojektuj atrakcyjny wizualnie blok. Po lewej stronie — duży, przyciągający uwagę tytuł. Po prawej stronie — karta z formularzem licznika. Po zliczeniu kalorii użytkownik zobaczy dzienne spożycie kalorii oraz makroskładniki odżywcze.
Pokaż więcej
: Stwórz nowoczesny, interaktywny dzienny licznik kalorii. Zaprojektuj atrakcyjny wizualnie blok. Po lewej stronie — duży, przyciągający uwagę tytuł. Po prawej stronie — karta z formularzem licznika. Po zliczeniu kalorii użytkownik zobaczy dzienne spożycie kalorii oraz makroskładniki odżywcze.
Pokaż więcej
Quiz
Stwórz interaktywny quiz. Temat: podstawowe pojęcia z zakresu typografii.
Moduł powinien wyglądać jak nowoczesny, interaktywny test o atrakcyjnej szacie graficznej.
Struktura:
Styl wizualny: Nowoczesny, wyrazisty projekt z elementami glassmorphismu. Ciemne tło i fioletowo-niebieski gradient jako kolor akcentujący. Tekst należy przedstawiać w kolorze białym, a mniej istotne elementy tekstowe – w jasnoszarym. Należy stosować delikatne cienie, zapewnić dużo przestrzeni w układzie oraz wykorzystać animacje poprawiające komfort użytkowania.
Struktura:
- Ekran startowy: nagłówek, opis, przycisk „Rozwiąż quiz”.
- Ekran z pytaniem: licznik „Pytanie 1 z 5”, treść pytania, opcje odpowiedzi w postaci dużych kart, które można kliknąć, przycisk „Dalej”.
- Ekran wyników: wynik końcowy, nagłówek poziomu: Początkujący / Uczący się / Miłośnik typografii / Zaawansowany / Ekspert / Mistrz, tekst wyjaśniający, przycisk „Rozwiąż quiz ponownie”.
Styl wizualny: Nowoczesny, wyrazisty projekt z elementami glassmorphismu. Ciemne tło i fioletowo-niebieski gradient jako kolor akcentujący. Tekst należy przedstawiać w kolorze białym, a mniej istotne elementy tekstowe – w jasnoszarym. Należy stosować delikatne cienie, zapewnić dużo przestrzeni w układzie oraz wykorzystać animacje poprawiające komfort użytkowania.
Więcej przykładów
*ten blok również został zbudowany przy użyciu Vibe Block
Limity zapytań w poszczególnych planach taryfowych:
- Bezpłatnie: 5 żądań na 12 godzin, 20 żądań na 30 dni
- Użytkownicy prywatni i firmy: 50 żądań na 12 godzin, 100 żądań na 30 dni.
Czytaj także
Spójny system stylów dla Twojej strony internetowej
Dostosuj rozmieszczenie elementów w funkcji Auto Layout przy różnych rozdzielczościach ekranu
