Szablony stron dla agentów AI. Zbuduj stronę swojej firmy, opisując AI zmiany w wybranym gotowym projekcie.
Wybierz projekt, który możesz obejrzeć. Pobierz pliki strony i instrukcje, a następnie dostosuj je do swojej firmy z agentem AI mającym dostęp do projektu.
Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
AI ChatPrzykładowy proces
Pliki
Ty
Pobrałem ZIP szablonu. Które pliki otworzyć i przekazać Ci?
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
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ć.
Potem: otwórz podgląd projektu i opisz potrzebne zmiany.
Przykładowa rozmowa, bez sesji AI na żywo.
01 / Pliki
Co dokładnie kupuję?
Kupujesz edytowalny projekt strony i instrukcję wyjaśniającą jej wygląd AI. Rozpakuj pobraną paczkę, zachowaj strukturę folderów i otwórz podgląd HTML. Pliki zależą od szablonu; prawdziwy przykład paczki poniżej pokazuje, czego szukać.
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
Rzeczywiste pliki projektu
11-forma-studio · Aktualnie sprawdzony ZIP
Aktualna paczka produktu sprawdzona 2 października 2026. Pliki i zewnętrzne zasoby dotyczą tego projektu; inne szablony się różnią.
Instrukcja opisuje oryginalną fikcyjną stronę. Oddziel jej rolę od zmian potrzebnych Twojej firmie.
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.
Jak przekazać ten projekt strony do narzędzia AI, którego już używam?
AI · przykładowa odpowiedź
Otwórz rozpakowany projekt jako mój folder roboczy i pozwól odczytać pliki. Poproś o znalezienie index.html, instrukcji i zasobów. Jeśli czat nie ma dostępu do folderu, załącz obsługiwane pliki albo wklej instrukcję i zapisz otrzymane pliki strony.
Przekaż agentowi dostęp do 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ć.
Potem: poproś o opis plików przed pierwszym poleceniem edycji.
Przykładowa rozmowa, bez sesji AI na żywo.
02 / Twoje narzędzie AI
Czy moje AI może pracować z folderem projektu?
Tak, z agentem odczytującym i edytującym lokalne pliki, np. Claude Code, Codex CLI, Cursor Agent lub Gemini CLI. Otwórz folder projektu i poproś o rozpoznanie index.html oraz instrukcji. W zwykłym czacie załącz obsługiwane pliki lub wklej instrukcję i zapisz wygenerowaną stronę.
Edytować index.html czy poprosić o nową wersję na podstawie RECREATE.md?
AI · przykładowa odpowiedź
Do zmiany treści w obecnym projekcie mogę edytować index.html bezpośrednio. Przy nowej implementacji przekaż RECREATE.md i poproś o odtworzenie wyglądu. Napisz, którą drogę wybierasz, zanim zmienię projekt.
Wybierz edycję lub odtworzenie
Zachowaj istniejącą stronę
Edytuj index.html, aby zmienić treści, obrazy, kolory lub sekcje.
Albo odtwórz projekt
Przekaż RECREATE.md do AI, jeśli chcesz nową implementację wyglądu.
Otwórz otrzymane pliki
Sprawdź podgląd wybranej drogi i dalej dostosuj treści.
Przy pierwszej stronie edycja zaczyna się od podglądu, który już wybrałeś.
Przykładowa rozmowa, bez sesji AI na żywo.
03 / Dwie drogi
Edytować pliki czy odtworzyć projekt?
Edytuj dostarczony HTML, gdy podoba Ci się projekt i chcesz własne teksty, zdjęcia albo kolory. Użyj RECREATE.md, gdy AI ma odtworzyć wygląd jako nową implementację. Przy pierwszej stronie najprościej zacząć od edycji dostarczonego projektu.
Zachowaj gotową stronę
Zleć konkretne zmiany tekstów, zdjęć lub stylu i sprawdź pliki.
Odtwórz ze specyfikacji
Porównaj nową stronę z oryginałem i sprawdź interakcje.
Zobacz pliki źródłowe i szczegóły techniczne
Droga A · zachowaj i zmień dostarczony plik
Authored task specimen · not a provider transcript
Wyciągi pochodzą ze sprawdzonego angielskiego oryginału. Kolejne przykłady to przygotowane zmiany plików, a nie sesja AI na żywo. Firmy i prace pozostają fikcyjne.
Przeczytaj index.html i RECREATE.md. Edytuj dostarczony HTML. Zastąp tylko nazwę studia i wskazany nagłówek. Zachowaj strukturę, przykładowe obrazy i lokalne interakcje. Wymień zmienione pliki.
Droga B · odtwórz przed personalizacją
RECREATE.md · experimental route still pending
Zapisane podglądy pokazują drogę A. Nie dowodzą udanego odtworzenia ani wyniku z pierwszego prompta.
W osobnym folderze odtwórz fikcyjną oryginalną stronę opisaną w RECREATE.md. Porównaj strukturę, zasoby i interakcje z dostarczonym źródłem przed personalizacją. Ta droga odtworzenia nie została wykonana w przykładzie.
04 / Wybierz projekt
Wybierz według strony, której potrzebujesz.
Forma Studio wybierz do portfolio studia, Morrow do usług i zajęć, a Veyra do prezentacji produktu. W każdym AI może zmienić treści oraz identyfikację. Jeśli potrzebujesz zapytań, rezerwacji lub rejestracji w aplikacji, podłącz odpowiednią usługę podczas dostosowania.
Forma Studio
Pokaż prace, usługi i podejście studia z zatwierdzoną treścią. Przykładowe zapytania i newsletter potrzebują prawdziwych odbiorców.
Zastąp studio moją firmą, użyj tych usług 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
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.
Potem: otwórz pierwszy spersonalizowany podgląd; hosting wybierzesz, gdy będziesz gotowy do publikacji.
Przykładowa rozmowa, bez sesji AI na żywo.
05 / Pierwsze polecenie
Powiedz AI, co ma się zmienić.
Napisz konkretnie: „Zastąp studio moją firmą, użyj tych usług i zdjęć, zachowaj układ, a główny przycisk połącz z formularzem kontaktowym”. Przekaż AI pliki oraz materiały. Potem dopracowuj poszczególne części, opisując to, co widzisz w podglądzie.
Zobacz przygotowany przykład szablonu
›_ Przykład edycji z AIFormwell
Ty
Dopasuj Formwell do fikcyjnego studia marki Alder. Zmień nazwę, nagłówek hero i wprowadzenie. Zachowaj układ i przykładowe grafiki projektów.
AI · przykładowa odpowiedź
Przygotowana wersja zmienia te trzy obszary treści. Grafiki projektów pozostają przykładowe; nie ma połączenia z AI na żywo.
Przygotowana rozmowa i wersje projektu. Bez połączenia z AI na żywo.
Zobacz pliki źródłowe i szczegóły techniczne
Mała zmiana, którą możesz sprawdzić
11-forma-studio/index.html · L28
Wyciągi pochodzą ze sprawdzonego angielskiego oryginału. Kolejne przykłady to przygotowane zmiany plików, a nie sesja AI na żywo. Firmy i prace pozostają fikcyjne.
Przed
<h1>Forma</h1>
Pierwsza przygotowana zmiana
<h1>Cedar</h1>
Przygotowana kolejna zmiana
<h1>Cedar</h1>
Oryginalny projekt · Forma Studio
Wyciągi pochodzą ze sprawdzonego angielskiego oryginału. Kolejne przykłady to przygotowane zmiany plików, a nie sesja AI na żywo. Firmy i prace pozostają fikcyjne.Otwórz pełny podgląd ↗
Przygotowana zmiana pliku
Przygotowana wersja zmienia wybrane teksty lub obrazy w tym samym projekcie. Zachowuje strukturę i przykładowe treści. Porównaj pliki przed podobną zmianą dla swojej firmy.Otwórz pełny podgląd ↗
AI ChatPrzykładowy proces
Sprawdź wynik
Ty
Pomóż sprawdzić edytowaną stronę przed zapisaniem wersji do publikacji.
AI · przykładowa odpowiedź
Możemy otworzyć podgląd i sprawdzić teksty, zdjęcia, menu, główne przyciski oraz telefon. Przy podłączonym formularzu wyślij test i potwierdź odbiór. Przed kolejnymi zmianami zachowaj kopię wersji, którą lubisz.
Sprawdź i zachowaj nową wersję
Przeczytaj treści
Sprawdź nazwy, ofertę, zdjęcia i dane kontaktowe w podglądzie.
Przetestuj działania i układ
Użyj menu i przycisków na telefonie oraz komputerze, potwierdź odbiór podłączonego formularza.
Zachowaj kopię
Zachowaj tę kompletną wersję projektu przed kolejną edycją lub publikacją.
Potem: opublikuj sprawdzony folder albo wróć do niego po kolejnej zmianie.
Przykładowa rozmowa, bez sesji AI na żywo.
06 / Sprawdź wynik
Co sprawdzić przed zachowaniem nowej wersji?
Otwórz podgląd i przeczytaj własne treści. Sprawdź widok telefonu, zdjęcia, menu oraz przyciski i wyślij testową wiadomość, jeśli podłączyłeś formularz. Zachowaj oryginalną paczkę oraz kopię wersji, którą lubisz, żeby móc do niej wrócić po kolejnych zmianach.
Zaznaczone lokalnie na tym urządzeniu; nic nie jest wysyłane.
AI ChatPrzykładowy proces
Przed zakupem
Ty
Skończyłem edycję. Po udzieleniu dostępu opublikuj projekt na Cloudflare i pomóż podłączyć domenę.
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ę
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.
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.
07 / Przed zakupem
Za co nadal odpowiadam?
Dostarczasz swoje treści, konto AI oraz konto hostingu. Po udzieleniu dostępu AI może pomóc w edycji i publikacji: poproś agenta pracującego z plikami o wdrożenie folderu na Cloudflare lub Vercel. Możesz też przekazać pełny ZIP pomocy hostingu lub osobie IT, zachowując foldery.
Czy dostęp do AI jest w cenie?⌃
Nie. Wybrane narzędzie, konto i warunki korzystania organizujesz osobno.
Czy mogę używać szablonu komercyjnie?⌃
Commercial Use obejmuje projekty firmowe i klienckie zgodnie z licencją. Potwierdź zasady przekazania edytowalnych plików przed obietnicą dla klienta.
Czy potrzebuję PRO do jednej strony?⌃
Możesz wybrać pojedynczy szablon. Porównaj Yearly i Lifetime, jeśli biblioteka przyda się przy kolejnych projektach.
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.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
