Case study: filmowa strona restauracji wygenerowana przez Claude za pierwszym razem

„Ogień i Zioła” to fikcyjna polska restauracja z Poznania, której stronę w całości zbudował Claude z jednego promptu, a my opublikowaliśmy ją na Hostilo, bez żadnych poprawek. W przeciwieństwie do naszego case study z Tetrisem, gdzie dopracowanie logiki zajęło kilka rund, tu wszystko zadziałało od razu. Oto dokładny prompt i wyjaśnienie, skąd ta różnica.

Założenia

Celem była elegancka strona restauracji w stylu magazynu: pełnoekranowa, filmowa sekcja główna, przyklejona nawigacja, sekcja z historią, interaktywne zakładki menu w czterech kategoriach, profil szefa kuchni, widżet rezerwacji z prawdziwą walidacją formularza, galeria zrobiona samym CSS, godziny otwarcia i lokalizacja, zapis na newsletter i stopka. Wszystko w jednym pliku HTML, bez zewnętrznych bibliotek, bez obrazków, bez backendu.

Dokładny prompt (skopiuj i wypróbuj sam)

To pełny, niezmieniony prompt wysłany do Claude, w oryginale po angielsku. Nic nie zostało dodane później; to właśnie on dał gotową stronę:

Działający przykład

Zobacz efekt: restauracja.hostilo.page

Dlaczego tu wystarczyło jedno podejście

Nasze case study z Tetrisem wymagało kilku rund poprawek: prawdziwa logika interaktywna (wykrywanie kolizji, obracanie klocków, punktacja) ma przypadki brzegowe, które wychodzą dopiero przy uruchomieniu kodu. Strona restauracji to inny rodzaj projektu: dużo treści i układu, mało logiki. Jedyne interaktywne elementy, czyli przełączanie zakładek i walidacja formularza, to proste, dobrze znane wzorce, z którymi każdy dobry model radzi sobie niezawodnie.

Sporo pracy wykonał też sam prompt. Wymieniał każdą sekcję wprost, zamiast ogólnie opisywać stronę, od razu podawał ograniczenia techniczne (jeden plik, bez zewnętrznych bibliotek, obrazków i API) i określał ton („filmowo, elegancko, ciepło i premium”), zamiast zostawiać styl przypadkowi. To połączenie, czyli dużo treści, jasne ograniczenia i wyraźny ton, to dokładnie ten wzorzec, który opisujemy w poradniku o promptach do stron w jednym pliku.

Od Claude do działającego linku

Publikacja wyglądała tak samo jak w każdym innym przykładzie na tym blogu, niezależnie od tego, jak rozbudowana była strona: skopiuj cały HTML z Claude, wklej go do edytora Hostilo, kliknij Zapisz. Strona była online od razu, bez budowania i bez osobnej konfiguracji hostingu dla animacji, zakładek czy walidacji formularza. To wszystko jest po prostu HTML, CSS i JavaScript w jednym pliku.

Wniosek

Nie każdy projekt z AI wymaga iteracji i nie każdy jej unika; zależy to od tego, o co prosisz. Bogate wizualnie strony z treścią i prostymi, standardowymi interakcjami (zakładki, formularze, płynne przewijanie) zwykle wychodzą za pierwszym razem, zwłaszcza przy szczegółowym, dobrze ułożonym prompcie. Projekty z prawdziwą logiką, jak gry, kalkulatory i wszystko, co ma stan i przypadki brzegowe, częściej wymagają kilku rund. Tak czy inaczej, sama publikacja to jeden szybki krok, gdy kod już działa.

Najczęstsze pytania

Jakie narzędzie AI zbudowało tę stronę restauracji?
Claude, na podstawie jednego szczegółowego promptu. Pełna treść promptu jest w tym artykule.

Czy były potrzebne poprawki?
Nie. W przeciwieństwie do case study z Tetrisem ta strona działała poprawnie za pierwszym razem, bez dodatkowych promptów.

Czy Ogień i Zioła to prawdziwa restauracja?
Nie. To fikcyjna restauracja stworzona po to, by pokazać, co jeden prompt AI potrafi zrobić z bogatą wizualnie stroną pełną treści.

Czy formularz rezerwacji naprawdę rezerwuje stolik?
Nie. Sprawdza wymagane pola i pokazuje realistyczny komunikat sukcesu, w całości w przeglądarce. Nie stoi za nim backend ani system rezerwacji, bo prompt tego nie wymagał.

Dlaczego ta strona wyszła za pierwszym razem, a Tetris wymagał poprawek?
Ten projekt to głównie treść i układ z prostymi interakcjami (zakładki, walidacja formularza), a Tetris to prawdziwa logika gry z przypadkami brzegowymi, jak wykrywanie kolizji. Projekty oparte na logice zwykle wymagają więcej iteracji niż projekty wizualne.