Zbuduj stronę z AI. Przejdź od wybranego szablonu do własnej strony z Twoją marką i treściami.
Wybierz szablon strony, dostarcz treści firmy i zlecaj konkretne zmiany. Ten poradnik pomaga pracować z plikami, sprawdzić wynik i zaplanować brakujące połączenia.
Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
01 / Wybierz drogę
Czy strona oparta na plikach pasuje do mojego celu?
Tak, do strony firmy, portfolio lub prezentacji produktu, której pliki chcesz edytować z AI. Jeśli potrzebujesz kont użytkowników, płatności lub rozbudowanej redakcji, zachowaj albo wybierz odpowiednią usługę i użyj szablonu jako prezentacji strony.
Strona prezentacyjna
Zacznij od projektu HTML i podłącz potrzebny krok użytkownika.
Publikacja lub aplikacja
Wybierz system treści lub usługi aplikacji przed uznaniem frontendu za kompletne rozwiązanie.
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.
Ty
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 / Twój brief
Co przekazać AI przed edycją?
Twoje fakty, cel i zatwierdzone materiały. Pomijaj brakujące informacje, dopóki ich nie dostarczysz.
Zaznaczone lokalnie na tym urządzeniu; nic nie jest wysyłane.
Wybierz sposób użycia plików i pierwszą zmianę
Twój własny plan pracy
AI ChatPrzykładowy proces
HTML + instrukcja projektu
Ty
Mam index.html i RECREATE.md. Chcę dostosować tę stronę, a nie odtwarzać fikcyjną firmę. Na których plikach będziesz pracować?
AI · przykładowa odpowiedź
Edytuję index.html, a RECREATE.md potraktuję jako opis wyglądu. Twoje teksty, zdjęcia i polecenia mają pierwszeństwo przed przykładową firmą.
Ty
Zachowaj układ, użyj mojej oferty i kontaktu oraz usuń fikcyjne opinie.
Kroki do wykonania
Obecna strona
HTML jest plikiem do edycji przy personalizacji.
Kontekst projektu
RECREATE.md opisuje oryginalny układ i działanie.
Twój brief
Przekaż informacje o firmie i oczekiwane zmiany.
Efekt: wybrany projekt staje się Twoją stroną przez edycję rzeczywistych plików.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
03 / Użyj plików
Na którym pliku ma pracować AI?
Do edycji zacznij od dostarczonego index.html. RECREATE.md opisuje oryginalny projekt do odtworzenia. W obu przypadkach przekaż brief i zachowaj nienaruszoną kopię.
Pliki strony + instrukcje projektu
Otwórz rozpakowany folder
Użyj środowiska AI, które może czytać i edytować rzeczywiste pliki projektu.
Zachowaj zasoby razem
Zachowaj pliki dodatkowe i sprawdź zewnętrzne odnośniki do zdjęć lub fontów.
Czy jeden skopiowany prompt kończy całą stronę?
Pliki już dostarczają stronę. Skopiowane instrukcje mogą zlecić odtworzenie, ale personalizacja, kontrola i publikacja mogą wymagać kolejnych działań.
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.
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 / Pierwsza zmiana
Jakie powinno być pierwsze polecenie?
Powiedz AI, co gotowa strona ma przedstawiać o Twojej firmie. Podaj nazwę, ofertę, zdjęcia i link kontaktowy; zleć umieszczenie ich w wybranym szablonie z zachowaniem układu, który Ci pasuje.
›_ 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ź
Przygotowany podgląd wymienia nazwę firmy, nagłówek hero i wprowadzenie. Porównaj zakładki Treść i Oryginał, żeby zobaczyć te zmiany; pozostałe zdjęcia projektów są przykładowe.
Przygotowana rozmowa i wersje projektu. Bez połączenia z AI na żywo.
AI ChatPrzykładowy proces
Sprawdzenie zmienionej strony
Ty
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.
Ty
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ź i popraw
Skąd wiem, że zmieniło się to, co trzeba?
Porównaj wynik z poleceniem. Jeśli coś jest nie tak, opisz widoczny problem i oczekiwany rezultat. Sprawdź poprawioną wersję przed kolejnymi zmianami.
01
Przeczytaj zmiany
Sprawdź zatwierdzone fakty, teksty, ścieżki zdjęć i niespodziewane zmiany.
02
Otwórz na telefonie i komputerze
Sprawdź długie nagłówki, kadry zdjęć, nawigację i klawiaturę.
03
Zapisz zaakceptowaną wersję
Zachowaj oryginał i sprawdzone wersje jako punkt wyjścia do kolejnych zmian.
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
Cloudflare Pages · od folderu do strony online
Ty
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.
Ty
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.
06 / Podłącz i opublikuj
Co zostaje, gdy strona dobrze wygląda?
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.
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 →
Avenlo
Zobacz szablon
Aster Works
Zobacz szablon
Lumenloop
Zobacz szablon
Flowline
Zobacz szablon
Avenor
Zobacz szablon
Tandem Airworks
Zobacz szablon
Rillstone Studio
Zobacz szablon
Moss & Metric
Zobacz szablon
Asterline Studio
Zobacz szablon
LumenDesk
Zobacz szablon
Pivota Workflow
Zobacz szablon
Relaywise
Zobacz szablon
Avenlo
Zobacz szablon
Aster Works
Zobacz szablon
Lumenloop
Zobacz szablon
Flowline
Zobacz szablon
Avenor
Zobacz szablon
Tandem Airworks
Zobacz szablon
Rillstone Studio
Zobacz szablon
Moss & Metric
Zobacz szablon
Asterline Studio
Zobacz szablon
LumenDesk
Zobacz szablon
Pivota Workflow
Zobacz szablon
Relaywise
Zobacz szablon
