Przejdź do treści

Szablony stron HTML

Szablony stron HTML. Wybierz gotowy projekt i dostosuj go z pomocą AI (Claude, ChatGPT/Codex, Gemini i inne).

Zacznij od strony, którą już potrafisz wyobrazić sobie jako własną. Porównaj układ i zawartość paczki, a wybrany projekt dostosuj swoimi treściami i narzędziem AI.

Projekty demonstracyjne · zastąp fikcyjne treści własnymi.

AI ChatPrzykładowy proces
Twoja strona
Ty

Ułóż usługi, projekty i kontakt tej strony pod moją firmę.

AI · przykładowa odpowiedź

Przekaż ofertę, przykłady oraz kontakt. Mogę umieścić je w sekcjach szablonu i przenieść lub dodać sekcję, jeśli treści wymagają innej kolejności.

Ułóż treści swojej strony

  1. Zbierz materiały

    Użyj opisów usług, obrazów projektów i danych kontaktowych.

  2. Umieść w szablonie

    Zleć AI zastąpienie przykładów i zachowanie potrzebnych elementów wyglądu.

  3. Zmień kolejność lub dodaj stronę

    Przenieś ważną informację wyżej albo utwórz podstronę, jeśli potrzebuje więcej miejsca.

Potem: przeczytaj stronę jak odwiedzający i znajdź ofertę oraz kontakt.
Przykładowa rozmowa, bez sesji AI na żywo.

01 / Twoja strona

Co ma zrobić odwiedzający Twoją stronę?

Odwiedzający powinien móc poznać ofertę, zobaczyć Twoje prace lub sprawdzić produkt, a potem skontaktować się z Tobą. Wybierz szablon, który ma już miejsce na te informacje; teksty, zdjęcia i linki zmienisz z AI.

Przedstaw usługi

Wyjaśnij ofertę, dla kogo jest i jak się z Tobą skontaktować.

Pokaż swoje prace

Daj prawdziwym projektom miejsce na obrazy, opis Twojej roli i kontekst.

Przedstaw produkt

Wyjaśnij jego działanie i skieruj do rzeczywistej aplikacji lub demo.

AI ChatPrzykładowy proces
Zawartość ZIP
Ty

Co zrobić z HTML i RECREATE.md w pobranej paczce?

AI · przykładowa odpowiedź

Przekaż rozpakowany folder. Mogę przeczytać HTML i instrukcję projektu, rozpoznać zasoby, a potem edytować pliki wymagające zmian.

Otwórz projekt strony

  1. Rozpakuj projekt

    Zachowaj index.html, instrukcję i zasoby razem w dostarczonej strukturze folderów.

  2. Otwórz folder w AI

    Przekaż agentowi cały projekt, a nie tylko zrzut wyglądu strony.

  3. Opisz zmiany

    Dodaj teksty i zdjęcia oraz wskaż, które części wyglądu zachować.

Potem: otwórz podgląd projektu i opisz potrzebne zmiany.
Przykładowa rozmowa, bez sesji AI na żywo.

03 / Zawartość ZIP

Do czego służą pliki strony i instrukcja?

Plik HTML to strona, którą otworzysz i edytujesz. RECREATE.md wyjaśnia Twojemu AI jej projekt. Rozpakuj ZIP do jednego folderu i przekaż agentowi cały folder wraz z zasobami. Dokładna zawartość jest podana przy każdym produkcie.

Pliki strony + instrukcje projektu

Rozpakuj projekt

Zachowaj index.html, instrukcję i zasoby razem w dostarczonej strukturze folderów.

Otwórz folder w AI

Przekaż agentowi cały projekt, a nie tylko zrzut wyglądu strony.

Opisz zmiany

Dodaj teksty i zdjęcia oraz wskaż, które części wyglądu zachować.

Zobacz pliki źródłowe i szczegóły techniczne

Forma Studio: dołączona instrukcja odtworzenia

11-forma-studio/ RECREATE.md, first 8 lines (output contract)

Instrukcja opisuje tę konkretną stronę i jej strukturę. Czytaj ją razem z index.html; nie jest działającym CMS ani hostingiem.

# Recreate Forma Studio

## 1. Output contract

Build an English single-page fictional design studio in `index.html`, with inline CSS and plain inline JavaScript at the end of its body. No framework, build step, module loader or external JavaScript dependency is needed. Supply `assets/terra.webp`, `assets/index.webp` and `assets/vesper.webp` alongside it, using the supplied image files unchanged. These files are identical copies of the corresponding fixed remote images in §9. If the local copies are not included with these instructions, obtain their exact bytes from the corresponding §9 URLs and save them at these three local paths without conversion or regeneration. The rendered page uses the remote image URLs; the local copies are not an automatic offline fallback. Runtime is **network**: images and Google Fonts need internet access. Do not call the result offline self-contained.

Target current Chromium with native dialog, named details, IntersectionObserver, backdrop-filter and svh support. The page should open directly from disk with network access and via a local HTTP server. All enquiry and email-preview actions are local browser demos with no submission, storage or backend. Generate the page and its three supplied asset files. Preserve the exact design and copy below, including all fictional/concept disclosures and testimonial-example labels. Do not create additional commercial claims, external destinations, animations or content.
AI ChatPrzykładowy proces
Działania odwiedzających
Ty

Chcę odbierać zapytania z tej strony. Co podłączyć?

AI · przykładowa odpowiedź

Wybierz e-mail, usługę odbierającą formularze lub link rezerwacji. Mogę podłączyć miejsce docelowe i pomóc sprawdzić testowe zgłoszenie. Komunikat w przeglądarce nie potwierdza odbioru.

Podłącz odbiór zapytań

  1. Wybierz odbiorcę

    Użyj adresu e-mail, usługi odbierającej formularze lub linku do rezerwacji.

  2. Zleć podłączenie AI

    Podaj miejsce docelowe i poproś o połączenie przycisku lub formularza. Prywatne dane dostępu ustawiaj w uprawnionym narzędziu, nie w publicznym HTML.

  3. Wyślij test

    Sprawdź odebraną wiadomość lub rezerwację w usłudze, a nie wyłącznie komunikat sukcesu na stronie.

Potem: sprawdź testową wiadomość lub rezerwację w swojej usłudze.
Przykładowa rozmowa, bez sesji AI na żywo.

04 / Działania odwiedzających

Czy kliknięcie rzeczywiście wyśle wiadomość?

Dopiero po podłączeniu kontaktu. Poproś AI o ustawienie przycisku do Twojego e-maila, połączenie formularza z usługą odbierającą zgłoszenia albo dodanie linku do rezerwacji. Wyślij testowe zapytanie i sprawdź, czy rzeczywiście je otrzymasz.

Wybierz odbiorcę

Użyj adresu e-mail, usługi odbierającej formularze lub linku do rezerwacji.

Zleć podłączenie AI

Podaj miejsce docelowe i poproś o połączenie przycisku lub formularza. Prywatne dane dostępu ustawiaj w uprawnionym narzędziu, nie w publicznym HTML.

Wyślij test

Sprawdź odebraną wiadomość lub rezerwację w usłudze, a nie wyłącznie komunikat sukcesu na stronie.

AI ChatPrzykładowy proces
Dostosowanie
Ty

Zastąp studio moją firmą, użyj moich tekstów i zdjęć, zachowaj układ.

AI · przykładowa odpowiedź

Otwórz rozpakowany folder szablonu i przekaż swoje treści oraz obrazy. Mogę zastąpić przykłady w dostarczonym HTML z zachowaniem wybranego wyglądu. Potem zobaczymy i dopracujemy lokalny podgląd przed publikacją.

Dostosuj szablon do swojej strony

  1. Otwórz pobrany projekt

    Rozpakuj szablon i otwórz cały folder w agencie AI pracującym z plikami. Zachowaj ścieżki zasobów.

  2. Dodaj własne treści

    Przekaż teksty, zdjęcia i identyfikację oraz wskaż części wybranego projektu do zachowania.

  3. Otwórz lokalny podgląd

    Poproś AI o pokazanie edytowanej strony. Dopracuj ją przed wyborem publikacji; do rozpoczęcia nie potrzebujesz już działającej strony ani projektu hostingu.

Potem: otwórz pierwszy spersonalizowany podgląd; hosting wybierzesz, gdy będziesz gotowy do publikacji.
Przykładowa rozmowa, bez sesji AI na żywo.

05 / Dostosowanie

Czy mogę poprosić AI o zmianę strony?

Tak. Otwórz pobrany projekt w agencie AI pracującym z plikami i napisz, czego chcesz: nazwy firmy, nowych tekstów, zdjęć, kolorów lub układu. Wskaż, co zachować, otwórz podgląd i zlecaj kolejne zmiany, aż strona będzie pasować do Ciebie.

Zobacz przygotowany przykład szablonu
Przykład edycji z AIFormwell
Ty

Zastąp przykładowe wprowadzenie do studia i usługi dostarczonymi przeze mnie treściami. Zachowaj układ.

AI · przykładowa odpowiedź

Przygotowany przykład zmienia teksty studia i zachowuje układ. Sprawdź sformułowania oraz ścieżkę kontaktu przed użyciem własnej wersji.

index.html · RECREATE.md
Formwell · przygotowany podgląd HTML
Otwórz pełny podgląd ↗

Przygotowana rozmowa i wersje projektu. Bez połączenia z AI na żywo.

AI ChatPrzykładowy proces
Przed publikacją
Ty

Strona jest gotowa. Opublikuj folder na Cloudflare przez CLI lub API po udzieleniu dostępu do konta.

AI · przykładowa odpowiedź

Mogę przygotować kompletny folder i wgrać go przez CLI lub API Cloudflare po udzieleniu dostępu do konta. Zachowamy index.html i ścieżki zasobów. Potem możemy otworzyć otrzymany adres i podłączyć domenę.

Opublikuj gotową stronę

  1. Przygotuj folder

    Zachowaj gotowy HTML, skrypty i zasoby w ich dotychczasowych położeniach.

  2. Udziel dostępu do publikacji

    Użyj swojego konta Cloudflare lub Vercel i pozwól agentowi wdrożyć stronę przez CLI lub API.

  3. Otwórz publiczny adres

    Sprawdź stronę online, dodaj domenę i przetestuj linki, zdjęcia oraz kontakt.

Alternatywa: przekaż pełny ZIP pomocy hostingu lub osobie IT i zapytaj o wgranie strony oraz podłączenie domeny.
Przykładowa rozmowa, bez sesji AI na żywo.

06 / Przed publikacją

Czego jeszcze potrzebuje moja strona?

Potrzebuje Twoich finalnych treści, działających linków kontaktowych i hostingu. Poproś agenta AI pracującego z plikami o publikację gotowego folderu na Cloudflare lub Vercel, udzielając dostępu do swojego konta. Możesz też przekazać ZIP pomocy hostingu lub osobie IT. Zachowaj strukturę folderów.

Zaznaczone lokalnie na tym urządzeniu; nic nie jest wysyłane.

Formwell / Pliki strony + instrukcje projektu

Wypróbuj prawdziwy szablon przed wyborem.

Pobierz oryginalny projekt Formwell. Przekaż jego pliki i RECREATE.md odpowiedniemu narzędziu AI, poproś o małą zmianę i sprawdź wynik.

Darmowa próbka to Formwell. Oryginalny projekt i instrukcja są po angielsku. Ceny produktów pozostają bez zmian.

Pobierz ZIP Formwell Pobierz RECREATE.md ↗

Masz projekt, który chcesz uczynić swoim?

Sprawdź pliki i warunki produktu, a następnie wybierz sposób zakupu.

Wybierz mój szablon strony

WYBIERZ SWÓJ DOSTĘP

Jeden szablon. Albo biblioteka na kolejne pomysły.

Wybierz dostęp pasujący do projektów, które planujesz.

Pojedynczy szablon

Do strony, którą tworzysz teraz.

138,97 PLN/ szablon

  • Wybrany projekt strony
  • Pliki źródłowe i instrukcje dla AI
  • Jednorazowa płatność
Wybierz mój szablon

PRO Yearly

Do projektów, które zrealizujesz w tym roku.

718,74 PLN/ rok

  • Pełna biblioteka szablonów stron
  • Zdjęcia, mockupy, presety, LUT-y i tekstury
  • Rok dostępu do biblioteki PRO
  • Automatyczne odnowienie co rok. Możliwa rezygnacja w dowolnym momencie.
Specjalna oferta Lifetime

PRO Lifetime

Do tej strony i Twoich kolejnych projektów.

Poprzednia cena2.870,37 PLN

953,60 PLN/ jednorazowo

  • Pełna biblioteka szablonów stron
  • Zdjęcia, mockupy, presety, LUT-y i tekstury
  • Dostęp Lifetime do biblioteki PRO
  • Jedna płatność. Bez corocznych odnowień.

Ceny dla licencji Commercial Use. Cena i podatki są potwierdzane w koszyku. Narzędzie AI, domena i hosting są osobno.

W PRO YEARLY I LIFETIME

Twoja strona to dopiero początek.

Oba plany obejmują całą bibliotekę OneDollarStock: szablony stron, zdjęcia, mockupy i materiały kreatywne do Twoich kolejnych projektów.

PRO Yearly daje dostęp, gdy Twoja subskrypcja jest aktywna. PRO Lifetime daje stały dostęp z jednorazową płatnością.

Liczby oznaczają produkty, nie pojedyncze pliki. Kategorie mogą się pokrywać.