
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.
Ułóż treści swojej strony
- Zbierz materiały
Użyj opisów usług, obrazów projektów i danych kontaktowych.
- Umieść w szablonie
Zleć AI zastąpienie przykładów i zachowanie potrzebnych elementów wyglądu.
- Zmień kolejność lub dodaj stronę
Przenieś ważną informację wyżej albo utwórz podstronę, jeśli potrzebuje więcej miejsca.
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.
02 / Wybierz projekt
Porównaj, co prezentuje każdy z projektów.
Forma Studio i Offset pasują do portfolio, Morrow do zajęć i usług, a Relayline do prezentacji oprogramowania. Otwórz pełne podglądy i zobacz także sekcje pod hero. Wybierz układ najbliższy stronie, której potrzebujesz.

Forma Studio
Studio identyfikacji i projektowania cyfrowego: prace, podejście i usługi. Dodaj własne projekty.
Zobacz cenę i pliki ↗Sprawdź pliki
Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.
index.htmlRECREATE.mdassets/index.webpassets/terra.webpassets/vesper.webp
Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.

Relayline
Produkt usprawniający pracę: funkcje, scenariusze i zasady. Przygotuj dowody działania produktu.
Zobacz cenę i pliki ↗Sprawdź pliki
Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.
index.htmlRECREATE.mdassets/relayline-focus.pngassets/relayline-portrait.png
Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.

Morrow
Studio ruchu: zajęcia, studio i pierwsza wizyta. Dodaj prawdziwe informacje o zajęciach i kontakcie.
Zobacz cenę i pliki ↗Sprawdź pliki
Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.
index.htmlRECREATE.mdassets/favicon.svgassets/morrow-cabin.pngassets/morrow-fold.pngassets/morrow-group.pngassets/morrow-hero.pngassets/morrow-portrait.pngassets/morrow-still.png
Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.

Offset
Niezależna pracownia projektowa: prace, usługi i podejście. Przygotuj zdjęcia prac z prawem do publikacji.
Zobacz cenę i pliki ↗Sprawdź pliki
Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.
index.htmlRECREATE.mdassets/contour.svgassets/fern.pngassets/form-poster.svgassets/geometric-print.svgassets/glass.pngassets/packaging.pngassets/ribbon.png
Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.
Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
Zobacz pliki źródłowe i szczegóły techniczne
Relayline: Kolejność sekcji źródłowych
04-relayline/ index.html · main section order
Rzeczywista kolejność w aktualnym HTML. Oryginalne angielskie nagłówki, nie propozycja nowego układu.
01 #unnamed — Give every handoffa clear next step
02 #unnamed — (visual section)
03 #overview — Keep the contextwith the next step
04 #features — Small details. Clearer handoffs. Explore the building blocks of this fictional workspace.
05 #unnamed — The next person should be able to pick up the work without piecing together the whole story.
06 #scenarios — Different work.The same clear handoff.
07 #principles — Built around the personwho picks up next
08 #faq — FAQ
09 #try — A clear next step.Ready when you are.Morrow: Kolejność sekcji źródłowych
07-morrow/ index.html · main section order
Rzeczywista kolejność w aktualnym HTML. Oryginalne angielskie nagłówki, nie propozycja nowego układu.
01 #home — Make roomfor yourself.
02 #begin — Take it at your pace.
03 #unnamed — (visual section)
04 #classes — A little movement.A little space.
05 #studio — A shared space.Your own rhythm.
06 #retreat — A slower weekend.
07 #first-visit — You can start here.
08 #journal — A few thoughts onmoving, noticingand making space.| Pytanie odbiorcy | Miejsce w źródle | Co pokazuje oryginał | Co trzeba dodać do swojej strony |
|---|---|---|---|
| Co odbiorca ma wykorzystać lub zrozumieć? | Relayline #overview / #features / #scenarios | Opis procesu produktu prowadzi do trzech scenariuszy przekazania. | Dodaj rzeczywiste ekrany i obsługiwane zadania. Lokalna demonstracja nie jest backendem aplikacji. |
| Którą usługę wybrać? | Morrow #classes / #studio / #first-visit | Sześć typów zajęć sąsiaduje z opisem studia i pierwszej wizyty. | Dodaj zakres zajęć, lokalizację i dostępność. Rezerwacja i płatność wymagają oddzielnej usługi. |
Relayline
Morrow
Otwórz projekt strony
- 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ć.
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.
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.
Podłącz odbiór zapytań
- 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.
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.
Dostosuj szablon do swojej strony
- Otwórz pobrany projekt
Rozpakuj szablon i otwórz cały folder w agencie AI pracującym z plikami. Zachowaj ścieżki zasobów.
- Dodaj własne treści
Przekaż teksty, zdjęcia i identyfikację oraz wskaż części wybranego projektu do zachowania.
- 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.
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
Zastąp przykładowe wprowadzenie do studia i usługi dostarczonymi przeze mnie treściami. Zachowaj układ.
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.mdPrzygotowana rozmowa i wersje projektu. Bez połączenia z AI na żywo.
Opublikuj gotową stronę
- Przygotuj folder
Zachowaj gotowy HTML, skrypty i zasoby w ich dotychczasowych położeniach.
- Udziel dostępu do publikacji
Użyj swojego konta Cloudflare lub Vercel i pozwól agentowi wdrożyć stronę przez CLI lub API.
- Otwórz publiczny adres
Sprawdź stronę online, dodaj domenę i przetestuj linki, zdjęcia oraz kontakt.
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.
07 / Wybór dostępu
Jeden projekt czy kolejne strony w planach?
Single wybierz, gdy potrzebujesz jednego konkretnego projektu. PRO daje bibliotekę szablonów do tej i kolejnych stron oraz pozostałe materiały kreatywne objęte PRO. Yearly odnawia się co roku, Lifetime kupujesz jednorazowo. Opcje porównasz w cenniku poniżej.
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.
Masz projekt, który chcesz uczynić swoim?
Sprawdź pliki i warunki produktu, a następnie wybierz sposób zakupu.
Wybierz mój szablon stronyW 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.
Szablony stron HTML
Projekty stron, kod źródłowy i instrukcje dla AI.
Szablony Framer
Gotowe strony do dostosowania w Framerze.
Zdjęcia 4K+
Mockupy
Grafiki
Pakiety zdjęć
Tekstury
Nakładki na zdjęcia
LUT-y do kamer
Presety Lightroom i Photoshop
Nakładki wideo
Edytowalne mockupy PSD
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ć.


