Wszystkie wpisy

Najlepsze prompty AI do zbudowania strony w jednym pliku

Najbardziej przydatne zdanie, jakie możesz dodać do każdego promptu o stronę, brzmi: „jako jeden samodzielny plik HTML, z CSS i JavaScriptem w środku, bez zewnętrznych zależności”. To jedno zdanie decyduje, czy dostaniesz kod do wklejenia i opublikowania od razu, czy kod rozbity na pliki, który wymaga budowania.

Dlaczego sformułowanie ma znaczenie

ChatGPT, Claude i Gemini zbudują stronę z samego opisu, ale domyślnie czasem zakładają prawdziwy projekt: osobne pliki HTML, CSS i JavaScript albo strukturę jak we frameworku. Nie ma w tym nic złego, ale to zbędne utrudnienie, jeśli chcesz po prostu wkleić stronę na hosting i ją udostępnić. Gdy powiesz modelowi dokładnie, jakiej formy wyniku oczekujesz, problem znika, zanim się pojawi.

Formuła promptu

Każdy prompt o stronę zbuduj z trzech części:

1. Czym jest strona: konkretnie cel i treść, nie tylko temat.
2. Wymóg formatu: „jako jeden plik HTML z CSS i JavaScriptem w środku, bez zewnętrznych zależności”.
3. Kierunek stylu: kolory, nastrój albo porównanie („czysto i minimalistycznie”, „ciemny motyw”, „jak nowoczesny landing aplikacji SaaS”).

Gotowe prompty

Skopiuj dowolny z nich do ChatGPT, Claude albo Gemini i dopasuj szczegóły:

Portfolio: „Stwórz jeden plik HTML (CSS i JS w środku, bez zewnętrznych zależności) z portfolio grafika freelancera. Dodaj sekcję główną z imieniem i specjalizacją, siatkę 4 kart projektów i sekcję kontaktu. Ciemny motyw, czysta bezszeryfowa typografia.”

Landing page: „Napisz landing page w jednym pliku HTML dla aplikacji do produktywności o nazwie Focus. Dodaj nagłówek, trzy karty funkcji, cennik z dwoma pakietami i formularz zapisu na newsletter. Cały CSS i JS w środku, bez zewnętrznych zależności, responsywnie na telefony.”

Strona z listą oczekujących: „Zbuduj jeden plik HTML ze stroną listy oczekujących dla startupu na wczesnym etapie. Nagłówek, opis w jednym zdaniu, pole e-mail z przyciskiem i mały licznik «Dołączyło już ponad 500 osób». Tylko CSS i JS w środku.”

Strona wydarzenia: „Stwórz stronę wydarzenia w jednym pliku HTML dla jednodniowych warsztatów. Dodaj datę, miejsce, krótką agendę i przycisk zapisu. Ciepła paleta kolorów, bez zewnętrznych zależności.”

Prosta gra: „Zbuduj małą grę w przeglądarce w jednym samodzielnym pliku HTML, prostą wersję gry [nazwa]. Tylko czysty JavaScript i CSS w środku, sterowanie strzałkami, bez zewnętrznych bibliotek.”

Trzy nawyki, które utrzymują porządek w kodzie

Zawsze dopisz „responsywnie na telefony”, jeśli strona ma działać na smartfonach; model nie zakłada tego domyślnie. Zmian proś w kolejnych wiadomościach, zamiast przepisywać cały prompt: modele lepiej radzą sobie z „zrób przycisk na niebiesko i dodaj stopkę” niż z drugim gigantycznym promptem. A jeśli model i tak odda kilka plików, wystarczy jedno zdanie: „połącz to w jeden plik HTML ze wszystkim w środku”.

Najczęstsze pytania

Jaka instrukcja w prompcie do strony jest najważniejsza?
Wyraźna prośba o wynik w postaci jednego, samodzielnego pliku HTML z CSS i JavaScriptem w środku i bez zewnętrznych zależności. Od tej jednej instrukcji zależy, czy kod da się od razu wkleić na hosting.

Czy to działa tak samo w ChatGPT, Claude i Gemini?
Tak. Wszystkie trzy asystenty AI na prośbę napiszą kompletną stronę w jednym pliku HTML; struktura promptu z tego poradnika działa w każdym z nich.

Co zrobić, gdy AI i tak podzieli kod na kilka plików?
Poproś wprost o połączenie wszystkiego w jeden plik HTML z CSS i JavaScriptem w środku. To działa niezawodnie także po fakcie.

Czy tymi promptami zbuduję coś interaktywnego, a nie tylko statyczną stronę?
Tak. Jeden plik HTML może zawierać pełną logikę w JavaScripcie, więc gry, kalkulatory i interaktywne narzędzia powstają tak samo jak statyczny landing.