Tworzenie strony internetowej z AI: praktyczny przewodnik po inżynierii promptów dla deweloperów

Budowanie strony wizytówki w weekend z pomocą asystenta AI: praktyczny przewodnik dla programistów

Tworzenie jednej strony internetowej z wykorzystaniem asystenta AI Claude Code demonstruje nowe podejście do rozwoju stron. Ta metoda pozwala stworzyć w pełni funkcjonalny projekt w ograniczonym czasie bez angażowania zewnętrznych specjalistów, wykorzystując tylko podstawową znajomość HTML/CSS i umiejętności inżynierii promptów.

Etap przygotowawczy: treść i struktura

Przed rozpoczęciem kodowania należy przygotować treść i przemyśleć architekturę projektu. Asystent AI może pomóc w generowaniu tekstów, jeśli zapewni się mu wystarczający kontekst: historię rozmów, materiały z wystąpień, opisy projektów. Aby stworzyć biografię, można poprosić o trzy warianty: krótki, średni i rozbudowany, co znacznie przyspiesza proces przygotowywania treści.

Struktura strony musi być szczegółowo opracowana przed napisaniem pierwszego prompta. Zalecana architektura dla strony wizytówki mówcy obejmuje:

• Stały sidebar o szerokości 300px
• Główną treść z sekcjami
• Sekcję hero ze zdjęciem i podstawowymi danymi
• Blok biografii
• Karty z tematami wystąpień
• Sekcję osiągnięć z liczbami
• Galerię zdjęć i wideo
• Informacje kontaktowe

Formułowanie promptów: od szkieletu do szczegółów

Kluczowa zasada pracy z asystentem AI — opis końcowego rezultatu, a nie procesu. Pierwszy prompt powinien stworzyć podstawowy szkielet projektu z poprawną strukturą i semantyką.

Przykład skutecznego prompta startowego:

Stwórz jedną stronę internetową wizytówkę dla mówcy.

Wygląd: ciemny motyw (tło #0a0a0a), czcionka Raleway przez Google Fonts, kolor akcentujący #3182CE.

Układ: dwie kolumny. Lewa - sticky sidebar 300px: okrągłe zdjęcie, imię, stanowisko, media społecznościowe. Prawa - główna treść z sekcjami: Bio, Tematy wystąpień (karty), Osiągnięcia (liczby), Galeria (siatka zdjęć), Kontakty.

Wymagania: tylko HTML, CSS i vanilla JS. Bez frameworków i zależności zewnętrznych poza Google Fonts.

Po uzyskaniu podstawowego szkieletu rozpoczyna się proces iteracyjnego udoskonalania. Każda iteracja powinna rozwiązać konkretne zadanie:

• Typografia i paleta kolorów
• Responsywny design
• Elementy interaktywne
• Animacje i mikrointerakcje

Aspekty techniczne implementacji

Responsywny layout i kompatybilność międzyprzeglądarkowa

Adaptacja mobilna wymaga osobnej uwagi. Po iteracjach na desktopie należy wyraźnie poprosić o wersję mobilną:

Na urządzeniach mobilnych (ekran < 768px) układ się rozbija: sidebar i treść stoją obok siebie, treść ucieka za ekran. Potrzebne: sidebar umieścić u góry, poziomo (zdjęcie i kontakty w rzędzie), główna treść poniżej na pełną szerokość.

Ważne kwestie kompatybilności międzyprzeglądarkowej:

• Sprawdzenie w kilku przeglądarkach (Chrome, Safari, Firefox)
• Uwzględnienie prefiksów dla właściwości CSS
• Testowanie na tabletach (768-1024px)

Optymalizacja wydajności

Po zakończeniu części wizualnej konieczne jest przeprowadzenie optymalizacji. Typowe problemy i ich rozwiązania:

• Optymalizacja obrazów:

- Konwersja PNG do WebP

- Zmiana rozmiaru do wymaganych wymiarów

- Wykorzystanie lazy loading

• Optymalizacja ładowania zasobów:

- Asynchroniczne ładowanie Google Fonts

- Preload dla krytycznych zasobów

- Opóźnione ładowanie iframe

• Metryki wydajności:

- LCP (Largest Contentful Paint)

- FID (First Input Delay)

- CLS (Cumulative Layout Shift)

Przykład prompta do optymalizacji:

Strona pokazuje 38 punktów w PageSpeed Insights. Główne problemy: duże obrazy (12 MB zdjęcie profilowe), blokujące zasoby, brak lazy loading dla wideo. Zoptymalizuj ładowanie: skonwertuj obrazy do WebP, dodaj preload dla głównego zdjęcia, zaimplementuj opóźnione ładowanie iframe.

Wdrożenie i infrastruktura

Opcje hostingu

• Netlify/GitHub Pages — darmowo, łatwa konfiguracja
• Własny VPS — pełna kontrola, wymaga konfiguracji

Problemy przy wdrażaniu na VPS

• Rejestr nazw plików (Linux jest wrażliwy na wielkość liter)
• Ścieżki absolutne i względne
• Uprawnienia dostępu i izolacja użytkowników
• Organizacja struktury projektów

Rekomendacje, aby uniknąć problemów:

• Używaj małych liter w nazwach plików
• Unikaj spacji i znaków specjalnych
• Dokumentuj infrastrukturę
• Używaj systemu kontroli wersji (Git)

Co jest ważne

• Podejście iteracyjne: Dziel rozwój na małe zadania, każda iteracja powinna rozwiązać konkretny problem
• Kontrola jakości: Sprawdzaj kod w kilku przeglądarkach, używaj narzędzi analizy wydajności
• Dokumentacja: Zapisz zmiany i decyzje architektoniczne dla możliwości cofnięcia
• Optymalizacja: Wydajność to osobne zadanie, wymagające specjalnej uwagi po zakończeniu części wizualnej

Praca z kodem: najlepsze praktyki

Struktura projektu

Zorganizuj pliki w logiczne grupy:

projekt/
├── index.html
├── style/
│   ├── main.css
│   ├── mobile.css
│   └── animations.css
├── skrypty/
│   └── main.js
├── obrazy/
│   ├── zoptymalizowane/
│   └── oryginalne/
└── zasoby/
    └── czcionki/

Metodologia CSS

Używaj znaczących nazw klas zgodnie z metodologią BEM:

.karta-mowcy {
    /* style karty */
}

.karta-mowcy__obraz {
    /* style obrazu wewnątrz karty */
}

.karta-mowcy__obraz--zazwglony {
    /* modyfikator dla zaokrąglonego obrazu */
}

JavaScript dla interaktywności

Zaimplementuj podstawową interaktywność bez frameworków:

// Animacja pojawiania się elementów podczas przewijania
const opcjeObserwatora = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const obserwator = new IntersectionObserver((wpisy) => {
    wpisy.forEach(wpis => {
        if (wpis.isIntersecting) {
            wpis.target.classList.add('animuj-wejście');
        }
    });
}, opcjeObserwatora);

// Zastosowanie do wszystkich elementów z klasą .animuj-przy-przewijaniu
document.querySelectorAll('.animuj-przy-przewijaniu').forEach(el => {
    obserwator.observe(el);
});

Częste błędy i ich rozwiązanie

• Zbyt ogólne prompty — sieć neuronowa generuje szablonowy kod
• Brak ograniczeń — AI dodaje niepotrzebne zależności
• Pominięcie etapu optymalizacji — piękna, ale wolna strona
• Ignorowanie wersji mobilnej — utrata znaczącej części odbiorców

Narzędzia do kontroli jakości

• PageSpeed Insights — analiza wydajności
• Lighthouse — kompleksowa kontrola
• BrowserStack — testowanie międzyprzeglądarkowe
• Git — kontrola wersji i możliwość cofnięcia

— Editorial Team