Nowa wersja strony internetowej dla CGBlue było prostym eksperymentem w programowaniu wspieranym przez sztuczną inteligencję. Jak wszystko ma to swoje blaski i cienie. Vibe Coding też - ale o tym później. Cały projekt został zrealizowany w ścisłej współpracy z Cursorem - zaawansowanym AI coding assistantem, który na podstawie iteracyjnej współpracy z człowiekiem stworzył pełnofunkcjonalną stronę internetową. W tym artykule opowiem o całym procesie - jak wyglądała interakcja człowiek-AI.

Założenia:

  • "Programowanie" za pomocą komunikacji werbalnej
  • Eliminacja ze stosu technologicznego wszystkich zaawansowanych komponentów (Wordpress, MySQL, PHP itd)
  • Responsywna strona
  • Wykorzystanie treści i grafik ze starej strony CGBlue
  • Dokumentacja na nią zawsze brakuje czasu

Cursor jako partner w programowaniu

Cursor to zaawansowany edytor kodu wyposażony w AI, który działa jako pełnoprawny partner programistyczny. W przeciwieństwie do tradycyjnego programowania, gdzie programista pisze każdą linijkę kodu samodzielnie, Cursor pozwala na interaktywną współpracę, gdzie:

  • Człowiek definiuje wymagania - opisuje co chce osiągnąć w naturalnym języku.
  • AI generuje kod - Cursor proponuje rozwiązania, implementuje funkcjonalności
  • Człowiek weryfikuje i poprawia - przegląda kod, testuje, koryguje błędy
  • Iteracyjny proces - cykl powtarza się aż do osiągnięcia pożądanego efektu
  • Czas - max dwa wieczory (do 8h)

Jak wyglądała współpraca?

Proces tworzenia strony był nieustannym dialogiem między człowiekiem a AI. Programista/prompter (niepotrzebne skreślić) opisywał wymagania (np. "stwórz responsywne menu z hamburgerem na mobile"), a Cursor generował kod HTML, CSS i JavaScript. Następnie szybkie sprawdzenie, ocena problemów i poprawki. Iteracyjnie.

Wybór technologii - dlaczego vanilla JavaScript?

Oto przykład promptu, który został użyty przy wyborze technologii:

Stwórz stronę internetową dla firmy CGBlue Smart AI. Chcę prostą, szybką stronę bez ciężkich frameworków. Użyj czystego HTML5, CSS3 i vanilla JavaScript. Strona powinna być:
1)Responsywna (mobile-first)
2)Szybka w ładowaniu
3)Łatwa w utrzymaniu
4)Bez zewnętrznych zależności jeśli to możliwe
Nie używaj React, Vue czy innych frameworków - chcę czysty kod, który mogę łatwo zrozumieć i modyfikować.

Wspólnie z Cursorem :) zdecydowaliśmy się na użycie czystego JavaScript (vanilla JS) zamiast frameworków. To było strategiczne rozwiązanie, które okazało się idealne dla tego projektu.

HTML5 i CSS3 - fundamenty

Strona została zbudowana na solidnych fundamentach HTML5 i CSS3, bez użycia zewnętrznych frameworków CSS. Wszystkie style są napisane od zera, co pozwoliło na pełną kontrolę nad wyglądem i zachowaniem strony. Kluczowe elementy:

  • Responsywny design - strona doskonale wyświetla się na wszystkich urządzeniach, od telefonów komórkowych po duże monitory
  • CSS Variables - wykorzystanie zmiennych CSS dla łatwego zarządzania kolorystyką
  • Flexbox i Grid - nowoczesne techniki layoutu dla elastycznego układu elementów
  • Animacje CSS - płynne przejścia i efekty hover bez użycia JavaScript

Vanilla JavaScript - prostota i wydajność

Zamiast ciężkich frameworków, użyty został czysty JavaScript ES6+. To pozwoliło na:

  • Szybkie ładowanie strony - brak konieczności pobierania dużych bibliotek
  • Pełną kontrolę - każda linijka kodu jest nasza i możemy ją łatwo modyfikować
  • Łatwe debugowanie - brak ukrytej logiki frameworków
  • Niskie koszty utrzymania - kod jest prosty i zrozumiały

Własny parser Markdown - dlaczego?

Jednym z najciekawszych elementów projektu było stworzenie własnego parsera Markdown. Zamiast używać gotowych bibliotek jak marked.js czy markdown-it, powstała dedykowana klasa MarkdownParser.

Funkcjonalności parsera

Nasz parser obsługuje wszystkie podstawowe elementy Markdown:

  • Nagłówki (H1-H4)
  • Formatowanie tekstu (bold, italic)
  • Listy (uporządkowane i nieuporządkowane)
  • Linki
  • Cytaty
  • Kod inline i bloki kodu
  • Front matter (metadane w formacie YAML)

Zalety własnego rozwiązania

  • Lekkość - parser waży zaledwie kilka kilobajtów
  • Dostosowanie - możemy łatwo rozszerzyć funkcjonalność
  • Bezpieczeństwo - pełna kontrola nad parsowaniem, brak zależności zewnętrznych
  • Nauka - lepsze zrozumienie jak działają parsery

System blogowy oparty na plikach

Zamiast używać CMS-a jak WordPress czy systemu headless CMS, stworzyliśmy prosty system zarządzania artykułami oparty na plikach tekstowych. Taki powrót do przeszłości.

Jak to działa?

  1. Pliki Markdown - każdy artykuł to plik .txt z front matter i treścią w Markdown
  2. Manifest - plik manifest_blog.txt zawiera listę wszystkich artykułów
  3. Dynamiczne ładowanie - JavaScript ładuje artykuły na żądanie używając Fetch API
  4. Parsowanie - własny parser konwertuje Markdown na HTML

Zalety tego podejścia

  • Prostota - dodanie nowego artykułu to po prostu dodanie pliku
  • Wersjonowanie - łatwe śledzenie zmian w Git
  • Wydajność - brak bazy danych, szybkie ładowanie
  • Niezależność - działa wszędzie, gdzie można hostować pliki statyczne

Struktura projektu

Projekt został zorganizowany w logiczną strukturę:

CBBlue/
├── index.html          # Strona główna
├── blog.html           # Lista artykułów
├── article.html        # Szablon pojedynczego artykułu
├── assets/
│   └── images/         # Wszystkie grafiki
├── blog/               # Artykuły blogowe
│   ├── *.txt          # Pliki z treścią
│   ├── *.webp         # Grafiki artykułów
│   └── manifest_blog.txt
├── css/
│   └── blog.css       # Style dla bloga
└── js/
    ├── blog-loader.js      # Ładowanie artykułów
    └── markdown-parser.js  # Parser Markdown

Wyzwania i rozwiązania

Responsywność na różnych urządzeniach

Jednym z największych wyzwań było zapewnienie wyświetlania na wszystkich urządzeniach. Rozwiązaliśmy to poprzez:

  • Media queries dla różnych rozdzielczości
  • Elastyczne jednostki (rem, %, vw/vh)
  • Mobile-first approach
  • Menu hamburgerowe dla urządzeń mobilnych

Kompatybilność między środowiskami

Problem z różnymi ścieżkami plików między lokalnym środowiskiem a serwerem produkcyjnym rozwiązaliśmy implementując fallback mechanism - próba załadowania z bezwzględnej ścieżki, a następnie z względnej.

W widoku na telefonie komórkowym nie wyświetla się MENU na stronie INDEX. na stronie BLOG  rozszerza strone poza ekran.

Animacje i interaktywność

Stworzyliśmy animowany licznik od 0% do 200% używając Intersection Observer API - animacja uruchamia się dopiero gdy sekcja jest widoczna na ekranie, co poprawia wydajność.

Czas rozwoju - przyspieszenie dzięki AI

Dzięki współpracy z Cursorem, czas rozwoju został znacząco skrócony. Tradycyjnie podobny projekt zająłby znacznie więcej czasu, ale dzięki AI:

  • Szybkie prototypowanie - Cursor generował kod w sekundach, nie godzinach
  • Automatyczne poprawki - wiele błędów było naprawianych przez AI po prostym opisie problemu
  • Iteracyjne ulepszenia - możliwość szybkiego testowania i modyfikacji

Łączny czas pracy: około 5 godzin (w tym czas na komunikację z AI, weryfikację kodu i testowanie). Najwięcej czasu zajmowało mi nauczenie się składnego formułowania myśli (korzystałem z SuperWhisper). Spróbujcie. To ciekawe doświadczenie :)

Ryzyka tworzenia oprogramowania za pomocą vibe codingu

Chociaż współpraca z AI jak Cursor przynosi ogromne korzyści, istnieją również znaczące ryzyka, o których należy pamiętać:

1. Brak głębokiego zrozumienia kodu

Problem: Gdy kod jest generowany przez AI, programista może nie rozumieć wszystkich jego aspektów. W przypadku problemów produkcyjnych może być trudno je zdiagnozować i naprawić.

Rozwiązanie: Ważne jest, aby zawsze przeglądać i rozumieć generowany kod. Nie należy ślepo akceptować propozycji AI bez zrozumienia logiki działania.

2. Zależność od narzędzia

Problem: Projekt staje się zależny od konkretnego narzędzia AI. Jeśli Cursor zmieni sposób działania lub przestanie być dostępny, może być trudno kontynuować rozwój.

Rozwiązanie: Ważne jest dokumentowanie decyzji projektowych i utrzymywanie zrozumiałego kodu, który można rozwijać również bez AI.

3. Błędy i nieoptymalne rozwiązania

Problem: AI może generować kod, który działa, ale nie jest optymalny. Może zawierać niepotrzebne zależności, być nieefektywny lub mieć problemy z bezpieczeństwem.

Rozwiązanie: Wymagany jest rygorystyczny proces code review i testowania. Każdy fragment kodu powinien być przetestowany przed wdrożeniem.

4. Utrata umiejętności programistycznych

Problem: Zbyt duża zależność od AI może prowadzić do degradacji umiejętności programistycznych. Programista może przestać rozumieć podstawowe koncepcje.

Rozwiązanie: Ważne jest zachowanie równowagi - używać AI jako narzędzia wspomagającego, ale nie zastępującego umiejętności programistycznych.

5. Problemy z bezpieczeństwem

Problem: AI może generować kod z lukami bezpieczeństwa, szczególnie jeśli nie jest odpowiednio przeszkolone w zakresie bezpieczeństwa.

Rozwiązanie: Kod musi przejść audyt bezpieczeństwa, szczególnie jeśli dotyczy danych użytkowników lub płatności.... lub budujcie rozwiązania, dla których kwestie bezpieczeństwa jest pomijalne.

6. Problemy z utrzymaniem długoterminowym

Problem: Kod generowany przez AI może być trudny w utrzymaniu, szczególnie jeśli zmieni się zespół lub narzędzie AI.

Rozwiązanie: Ważne jest utrzymywanie dobrej dokumentacji i czytelnego kodu, który jest zrozumiały dla innych programistów ORAZ repozytorium kodu i promptów.

Podsumowanie - AI jako narzędzie, nie zamiennik

Współpraca z Cursorem przy tworzeniu strony CGBlue pokazała duży potencjał AI w programowaniu. Jednak kluczowe jest traktowanie AI jako narzędzia wspomagającego, a nie zamiennika umiejętności programistycznych.

Najważniejsze lekcje:

  • AI przyspiesza rozwój, ale wymaga ciągłej weryfikacji
  • Zrozumienie kodu jest kluczowe - nie można ślepo ufać AI
  • Code review i testowanie są jeszcze ważniejsze przy kodzie generowanym przez AI
  • Równowaga między automatyzacją a umiejętnościami jest kluczowa