Vibe coding - czy to ma sens? Krótki praktyczny test, czy AI utworzy prostą stronę?

"Vibe coding" to określenie opisujące programowanie oparte w pełni na kodzie generowanym przez sztuczną inteligencję. Programista wtedy tylko krótko opisuje swoje wymagania językiem naturalnym, a LLM (model językowy) przekłada to na kod. Zwolennicy tej metody zachwalają ją, gdyż pozwala ona szybko uzyskać rezultaty a tworzyć można nawet bez zrozumienia kodu, na którym się pracuje, z kolei przeciwnicy wskazują, że tak raczej nie powstanie żaden większy funkcjonalny program. W tym temacie nie będę jednak powtarzać i analizować argumentów różnych stron konfliktu, lecz spróbuję tego podejścia w praktyce, w oparciu o proste lecz praktyczne zadanie.

Za cel postanowiłem sobie utworzyć nową przeglądarkę Elektrodowej bazy urządzeń IoT, całość oczywiście na zasadach w stylu "vibe coding", czyli:
- bez pisania kodu
- bez edycji kodu
- ba, również bez zaglądania do kodu
- a nawet bez podawania AI ewentualnych kodów o błędach (początkujący tego nie lubią)
Chciałem by opracowana strona pozwalała wygodnie wyświetlać, filtrować, przeglądać i wyszukiwać dane pobrane z istniejącej listy urządzeń w formacie JSON.

Użyłem darmowego ChatGPT od OpenAI, planując zmieścić się w dziennym limicie zapytań dla mocniejszego modelu. ChatGPT posiada możliwość użycia tzw. Kanwy, czyli interaktywnego edytora, w którym AI może generować i modyfikować kod w czasie rzeczywistym, tworząc proste stronki. Użytkownik widzi gotowy efekt oraz może podejrzeć wygenerowany kod, ale nie musi w nim ręcznie niczego zmieniać.

Na początek opracowałem prompt, czyli zapytanie do AI pisane w języku naturalnym. W prompcie zawarłem link do prostej 'bazy danych' w JSON (ponad 750 wpisów), próbkę formatu danych oraz krótki opis, co ma się znajdować na stronie:

Cytat:

use this link
https://openbekeniot.github.io/webapp/devices.json
Preview:
{
"version": 0.1,
"devices": [
{
"vendor": "Generic",
"bDetailed": "1",
"name": "WiFi DIY Switch",
"model": "ZN268131",
"chip": "BK7231T",
"board": "WB2S",
"keywords": [
"switch",
"relay",
"AP8506"
],
"pins": {
"6": "Rel;1",
"7": "WifiLED_n;1",
"10": "Btn;1",
"26": "TglChanOnTgl;1"
},
"image": "https://obrazki.elektroda.pl/5120493600_1650616045.jpg",
"wiki": "https://www.elektroda.com/rtvforum/topic3895572.html#20033093"
},
{
"vendor": "Zemismart",
"bDetailed": "0",
"name": "Matter LED Light Bulb RGBCW E27 Dimmable 7W",
"model": "ZML2-7W",
"chip": "BL2028N",
"board": "UAM026",
"flags": "1024",
"keywords": [
"lamp",
"UHOME",
"UASCENT",
"BP2516F",
"SL421A ",
"SYWB07",
"RGBCCT V1.3"
],
"pins": {
"6": "PWM;5",
"7": "PWM;4",
"8": "PWM;1",
"24": "PWM;2",
"26": "PWM;3"
},
"command": "",
"image": "https://obrazki.elektroda.pl/9164503800_1741641409.jpg",
"wiki": "https://www.elektroda.com/rtvforum/topic4111089.html"
},
and provide a nice looking, flexible, fully featured gui html browser/searcher/filter/stats page for the linked database, use html and js, maybe bootstrap, with page limits, multichoice, show counts for each type, filter by chip, module, etc

Pierwszy wynik - i już jest dość niezły, przeglądarka działa, ale są niedociągnięcia:

Zacząłem kolejno punktować modelowi, co chcę by zostało poprawione. Po każdym kroku weryfikowałem rezultat. Oto streszczenie (moje kolejne wiadomości do AI):
- ilość wystąpień na listach modułów/układów

Cytat:

next to each filter like chip or board or vendor, show how many occurencies there are in total, and sort entries by that

- przyciski do czyszczenia filtrów

Cytat:

under each list, add "Clear filter" button that clears this particular filter. Also separately add a single "Clear all filters" button.

- poprawka paginacji (bo jak było 50 stron, to było 50 przycisków z numerami stron)

Cytat:

cool but those page numbers at the bottom of the page are strange if there is many pages, maybe you should just show numbers for first and last page, and also for current , previous and next pages, of course without repeats, and sorted?

- większa selekcja ilości na stronę

Cytat:

also allow me to select 50 or 100 or 250 or 500 or 1000 per page...

- końcowo, topka słów kluczowych

Cytat:

also, under search keywords, give me like, idk, 10 clickable top keywords with their number (occurencies) in ( ) , and when clicked, set keyword field to given keyword

Na tym etapie pojawił się problem - kod przestał się kompilować. Na szczęście w Kanwie jest opcja, by automatycznie kazać modelowi go naprawić...

Nie wierzę, on serio to zrobił! Naprawił błąd.

A więc kontynuowałem - dalej w jednym chacie:

Cytat:

To each entry, add Copy button that copies raw original device JSON entry to clipboard

Tu jednak wydarzyło się coś dziwnego. Musiałem aż zajrzeć w kod - Kanwa pozwala podejrzeć zmiany:

Cofnąłem i poprawiłem zapytanie:

Cytat:

To each entry, add Copy button that copies raw original device JSON entry to clipboard, do not remove existing features

Powitał mnie błąd:

Tym razem jednak znów AI było w stanie go naprawić:

Nawet wygenerowało się wytłumaczenie, co było źle:

Cytat:

The syntax error was caused by a duplicate and malformed <button> tag inside the device rendering block. It's now fixed — each device entry includes a single working "Copy JSON" button. Let me know if you’d like the copy action to show a tooltip or toast instead of an alert.

Gotowy efekt można zobaczyć tutaj:
https://openbekeniot.github.io/webapp/devicesList_test1.html
Myślę, że wyszło całkiem nieźle.

Podsumowując, rezultaty moim zdaniem są bardzo dobre, zwłaszcza jak na użyte narzędzie – celowo wybrałem najpopularniejszy i najbardziej dostępny model. Nie chciałem prezentować płatnych modeli, bo nawet niewielka opłata mogłaby już odsiewać część użytkowników. Nie chciałem też używać narzędzi wymagających instalacji (dodatków do IDE czy całych środowisk opartych na AI). Być może poświęcę im osobny temat — na przykład przetestujemy wtedy GitHub Copilot.
W tym temacie skupiłem się na najprostszej opcji, ale mimo to uzyskałem zadowalające rezultaty. Pod koniec rozwoju strony zaczęły pojawiać się problemy ze skalowalnością takiego podejścia – AI momentami usuwało fragmenty kodu, jednak odpowiednio sformułowany prompt potrafił rozwiązać większość problemów. Również sama Kanwa automatycznie oferowała opcję naprawy błędu.
Czy to znaczy, że AI wygeneruje nam też duże projekty, na przykład własny silnik forum w stylu Elektrody?
Oczywiście, że nie. Ta metoda sprawdza się tylko przy mniejszych projektach i bardzo szybko można natknąć się na ścianę nie do przejścia bez znajomości programowania. Mimo to uważam, że nawet tak prosta stronka, jak ta pokazana dzisiaj, jeszcze kilka lat temu mogłaby być niezłym zleceniem dla początkującego freelancera, a dzisiaj na tym już raczej nikt dużo nie zarobi.
Takie proste strony można wygenerować sobie samodzielnie i starcza do tego minimum wiedzy, a ze wzrostem wiedzy możliwości rosną znacznie szybciej niż kiedyś...
Z tego powodu osobiście przewiduję (by nie napisać "widzę") w przyszłości wielki spadek zapotrzebowania na programistów (zwłaszcza juniorów) połączony z olbrzymią ilością low quality code zalewającego Internet.
To jednak było tylko moje zdanie, a jak Wy uważacie? Czy wygerowaliście już dla siebie coś przydatnego w Kanwie, a jeśli tak, to co?

PS: Ta prezentacja zakładała, że cały kod jest w oknie kontekstowym AI. Można ten sposób ulepszyć i osobno promptować poszczególne moduły, np. osobno jeden plik backendu z bazą (dać strukturę bazy), osobno fragmenty frontendu, itd. Wtedy rozwiązanie znacznie lepiej się skaluje...