Gotowy projekt dopasowany do Twojej firmy

Dopasuj szablon do swojej firmy. Zmień gotowy projekt w stronę z Twoją marką, ofertą i zdjęciami.

Zachowaj użyteczną strukturę i wymień treści przykładowej firmy. Daj agentowi AI z dostępem do plików zatwierdzone materiały, zmieniaj po jednym elemencie i sprawdzaj stronę oczami odbiorcy.

Przygotowuję brief marki Zobacz zmianę wyglądu

Primefolio

Forma Studio

Orbit

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

01 / Zachowaj lub wymień

Co jest projektem, a co przykładową treścią?

Układ, hierarchia i interakcje dają strukturę. Nazwy, projekty, ceny i opinie należą do przykładowej historii, dopóki nie zastąpisz ich zatwierdzonymi faktami.

Zachowaj przydatne elementy

Zachowaj sekcje jasno przedstawiające ofertę.

Usuń niepotwierdzone dowody

Nie używaj fikcyjnych twierdzeń o klientach jako swoich.

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

Rzeczywiste pliki projektu

02-primefolio · Aktualnie sprawdzony ZIP

Aktualna paczka produktu sprawdzona 2 października 2026. Pliki i zewnętrzne zasoby dotyczą tego projektu; inne szablony się różnią.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Co opisują oryginalne instrukcje

02-primefolio/RECREATE.md · L5

Instrukcja opisuje oryginalną fikcyjną stronę. Oddziel jej rolę od zmian potrzebnych Twojej firmie.

Build one complete `index.html` for **Forma North — Independent digital design**. Use semantic HTML, one inline stylesheet and one inline classic JavaScript block at the end of the body. No framework, build step, package manager, bundler, JavaScript library or application backend is required. Implement the page and every state described below, including all six project stories, all three editorial notes, thirteen capabilities, the full-width studio menu and the local downloadable project brief.

AI ChatPrzykładowy proces

Dostosowanie istniejącej strony

Zmień nazwę firmy, nagłówek i opisy usług na przesłane teksty. Zachowaj układ i wymień tylko wskazane zdjęcia.

AI · przykładowa odpowiedź

Edytuję istniejący HTML, zachowam pozostałe sekcje i pokażę zmienione pliki.

Podłącz główny przycisk do mojej strony rezerwacji. Użyj przesłanego adresu.

AI · przykładowa odpowiedź

Zmieniam link przycisku, a potem sprawdzam go oraz nowy nagłówek w przeglądarce.

Kroki do wykonania

Przekaż treści
Podaj dokładne teksty, nazwy zdjęć i adresy linków.
Dostosuj szablon
Zleć edycję obecnych plików i zachowanie elementów, które Ci pasują.
Sprawdź podgląd
Przeczytaj nowe treści i kliknij właściwe linki na telefonie i komputerze.

Efekt: Twoja firma w wybranym projekcie strony.

Przykładowy przebieg pracy. Bez połączenia z AI na żywo.

02 / Materiały marki

Co powinien zawierać brief dostosowania?

Przekaż agentowi nazwę firmy, ofertę, adres kontaktu, logo i zdjęcia. Dodaj oczekiwane kolory i sekcje do zachowania albo usunięcia. Dzięki temu wymieni przykładową firmę i dopasuje wybrany projekt do Twojej marki.

Konkretnie opisz treściPrzypisz każde zdjęcie i tekst do sekcji.Nazwij priorytetyPowiedz, co odbiorca ma najpierw zrozumieć i co zrobić dalej.

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

Zapisz co zachować, zmienić i usunąć

Twój własny plan pracy

AI ChatPrzykładowy proces

Zmiana kolejności sekcji szablonu

Przenieś moje usługi przed portfolio, usuń przykładowy cennik i zachowaj kontakt na końcu.

AI · przykładowa odpowiedź

Zmieniam kolejność istniejących sekcji HTML i aktualizuję kotwice menu. Sprawdzę linki i odstępy mobilne.

Najpierw pokaż nową kolejność. Zachowaj zdjęcia i opisy projektów.

Kroki do wykonania

Wskaż sekcje
Powiedz agentowi, co przenieść, usunąć lub dodać.
Zmień stronę
Edytuj obecną strukturę i kotwice nawigacji.
Sprawdź kolejność
Przeczytaj całą stronę na komputerze i telefonie.

Efekt: Twoja firma w wybranym projekcie strony.

Przykładowy przebieg pracy. Bez połączenia z AI na żywo.

03 / Hierarchia treści

Czy zmienić też kolejność, nie tylko kolory?

Tak. Zleć agentowi przesunięcie, usunięcie lub dodanie sekcji w obecnym HTML. Np. przenieś usługi przed portfolio, usuń niepotrzebny cennik i podłącz kontakt do swojej strony rezerwacji.

Zmień kolejność treści

Zleć AI przesunięcie usług, realizacji lub opinii do kolejności potrzebnej odbiorcy.

Podłącz przycisk

Podaj agentowi właściwy adres kontaktu, rezerwacji lub płatności, z którego korzystasz.

04 / Zmiany wyglądu

Jak zmienić wygląd bez utraty czytelności?

Zmieniaj świadomie kolory, fonty i zdjęcia, sprawdzając efekt na prawdziwych treściach. Skontroluj kontrast, długie nagłówki, kadry i dostępne fonty.

Przykład edycji z AIFormwell

W przygotowanej wersji Alder użyj jasnego liliowego tła i ciemnofioletowych tekstów. Zachowaj układ i treści.

AI · przykładowa odpowiedź

Przygotowany podgląd zmienia kolory tła i tekstów przy zachowaniu układu. Porównaj zakładki Kolory i Treść, a potem sprawdź czytelność na własnych tekstach.

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.

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

Mała zmiana, którą możesz sprawdzić

02-primefolio/index.html · L53

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 id="hero-title" class="hero-heading"><span>Clear thinking.</span><span>Fresh <span class="muted" style="display:inline">digital form.</span></span></h1>

Pierwsza przygotowana zmiana
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Considered <span class="muted" style="display:inline">digital design.</span></span></h1>

Przygotowana kolejna zmiana
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Design <span class="muted" style="display:inline">with purpose.</span></span></h1>

Oryginalny projekt · Primefolio

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

Sprawdzenie zmienionej strony

Porównaj zmienioną stronę z moim poleceniem. Sprawdź nagłówek, ścieżki zdjęć, menu i kontakt na komputerze i telefonie.

AI · przykładowa odpowiedź

Wypiszę różnice i sprawdzę to, co rzeczywiście wyświetla przeglądarka. Sam zapis pliku nie potwierdza efektu wizualnego.

Na telefonie nagłówek jest ucięty. Popraw to bez zmiany tekstu.

AI · przykładowa odpowiedź

Poprawię układ mobilny i ponownie sprawdzę tę samą szerokość telefonu. Potem możesz zaakceptować wynik.

Kroki do wykonania

Porównaj zmiany
Sprawdź swoje teksty, zdjęcia i zakres polecenia.
Otwórz podgląd
Sprawdź komputer i telefon; kliknij menu i kontakt.
Opisz problem
Powiedz agentowi, co jest źle, i zleć ponowne sprawdzenie poprawionego widoku.

Efekt: sprawdzona wersja gotowa do dalszej edycji lub publikacji.

Przykładowy przebieg pracy. Bez połączenia z AI na żywo.

05 / Sprawdź w kontekście

Co sprawdzić po dostosowaniu projektu?

Porównaj zapisane zmiany z briefem i sprawdź całą stronę. Ładny zrzut nie wystarcza do sprawdzenia linków, interakcji i kolejności na telefonie.

01
Sprawdź prawdziwe treści
Sprawdź nazwy, twierdzenia, prawa do zdjęć i cel działania.
02
Sprawdź zmieniony projekt
Sprawdź komputer, telefon, klawiaturę, kadry i zasoby.
03
Zachowaj sprawdzoną wersję
Zapisz pliki i popraw zauważone problemy przed publikacją.

06 / Wybierz strukturę

Który projekt ułatwi planowanie dostosowania?

Wybierz układ z potrzebnymi sekcjami. Portfolio studia, doradztwo, zajęcia i historia produktu wymagają różnych treści.

Primefolio

Portfolio projektów cyfrowych; źródło i instrukcja służą przykładowi zmiany marki w tym samym projekcie.

Zobacz cenę i pliki ↗

Sprawdź pliki

Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.

Forma Studio

Pokaż prace, usługi i podejście studia z zatwierdzoną treścią. Przykładowe zapytania i newsletter potrzebują prawdziwych odbiorców.

Zobacz cenę i pliki ↗

Sprawdź pliki

Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.

index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp

Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.

Orbit

Wyjaśnij usługę doradczą i podejście. Prezentacja nie dostarcza automatyzacji konsultingu.

Zobacz cenę i pliki ↗

Sprawdź pliki

Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.

index.html
RECREATE.md
assets/bridge.webp
assets/connect.webp
assets/folio.webp
assets/lens.webp
assets/loop.webp
assets/relay.webp

Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.

Veyra

Przedstaw produkt głosowy, przykłady i sposoby pracy. To nie jest gotowa aplikacja zamiany głosu na tekst.

Zobacz cenę i pliki ↗

Sprawdź pliki

Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.

index.html
RECREATE.md

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.

AI ChatPrzykładowy proces

Cloudflare Pages · od folderu do strony online

Moja strona jest gotowa. Opublikuj ten folder na Cloudflare Pages przez Wrangler. Najpierw powiedz, jakiego dostępu do konta i zgody potrzebujesz.

AI · przykładowa odpowiedź

Sprawdzę pliki i ścieżki zdjęć. Zaloguj się do swojego Cloudflare i zatwierdź utworzenie lub aktualizację projektu Pages, zanim wyślę pliki.

Zgadzam się na publikację w nowym projekcie Pages. Nie zmieniaj obecnej domeny, dopóki nie sprawdzę podglądu.

AI · przykładowa odpowiedź

Po zatwierdzonym wysłaniu podam adres zwrócony przez Cloudflare i sprawdzę zdjęcia oraz linki. Domenę możemy podłączyć po akceptacji podglądu.

Kroki do wykonania

Przekaż projekt agentowi
Użyj agenta AI z dostępem do plików i terminala; trzymaj index.html oraz zasoby razem.
Zatwierdź wysłanie
Zaloguj się do hostingu i zatwierdź konkretny projekt. Agent może użyć obsługiwanego CLI lub API.
Sprawdź rzeczywisty adres
Otwórz zwrócony adres; własną domenę podłącz po sprawdzeniu strony.

Efekt: Twoja strona pod publicznym adresem, a następnie pod własną domeną.

Przykładowy przebieg pracy. Bez połączenia z AI na żywo.

07 / Po dostosowaniu

Co pozostaje osobno po dostosowaniu?

Podłącz potrzebny kontakt lub rezerwacje, potem zleć agentowi AI publikację gotowego folderu. Potrzebuje zatwierdzonego dostępu do hostingu i zgody na wysłanie plików. Sprawdź publiczny adres przed podłączeniem albo zmianą własnej domeny.

Przygotuj brief strony dla AI Opublikuj zatwierdzoną wersję Sprawdź licencję i przekazanie klientowi

Formwell / Pliki strony + instrukcje projektu