Jak zbudować stronę z Claude Code? Zamień gotowy szablon w stronę swojej firmy, bez samodzielnego pisania kodu.
Zacznij od istniejącej strony. Sprawdź dostęp do Claude Code, otwórz cały projekt i skontroluj drobną zmianę przed kolejną. Zachowaj zaakceptowaną wersję do powrotu.
Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
01 / Konfiguracja
Z jakiego interfejsu Claude korzystam?
Użyj Claude Code z dostępem do folderu strony. Po instalacji i zalogowaniu według instrukcji Anthropic otwórz rozpakowany projekt i zleć edycję dostarczonego HTML. Konto AI jest osobne od zakupu szablonu.
Zaznaczone lokalnie na tym urządzeniu; nic nie jest wysyłane.
Przeczytaj index.html, RECREATE.md i zasoby w tym folderze. Zanim edytujesz, pokaż, gdzie są nagłówek, zdjęcia i linki kontaktowe.
AI · przykładowa odpowiedź
Sprawdzę pliki i wypiszę sekcje, ścieżki zdjęć oraz linki. Wskażę też formularze, które tylko demonstrują działanie.
Ty
Pracuj na istniejącym HTML. Teksty mojej firmy i zdjęcia są w folderze materials.
AI · przykładowa odpowiedź
Przypiszę materiały do istniejących sekcji i zapytam o brakujące treści, zamiast je wymyślać.
Kroki do wykonania
Otwórz folder
Rozpakuj projekt i udostępnij go agentowi.
Poznaj stronę
Przeczytaj HTML i instrukcję przed wymianą treści.
Dodaj własne materiały
Przekaż własne teksty, zdjęcia i prawdziwy kontakt.
Efekt: agent pracuje na rzeczywistych plikach Twojej strony.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
02 / Przekaż kontekst
Jak upewnić się, że Claude czyta właściwe pliki?
Najpierw poproś o przeczytanie index.html, RECREATE.md i zasobów dodatkowych. Poproś o opis struktury, zewnętrznych zależności i elementów tylko demonstrujących usługę.
Pliki strony + instrukcje projektu
Najpierw poznaj
Poproś o zrozumienie projektu bez zmiany plików.
Oddziel własny brief
Instrukcje opisują oryginał. Zatwierdzone teksty opisują nową firmę.
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.
03 / Pierwsza edycja
Jak dostosować stronę bez przepisywania wszystkiego?
Opisz treści, zdjęcia lub styl do wymiany i wprost zachowaj obecny układ. Claude może edytować te fragmenty index.html; nie musi odtwarzać całej strony z RECREATE.md, chyba że właśnie to zlecisz.
›_ 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
Claude Code · 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.
04 / Sprawdź i popraw
Co potwierdza właściwą zmianę?
Zapisane pliki i przeglądarka porównane z briefem. Sprawdź pierwszą wersję i zleć poprawkę widocznego problemu przed zaakceptowaniem kolejnej.
01
Przeczytaj zmiany plików
Sprawdź teksty, linki i nieoczekiwane zmiany.
02
Sprawdź oba widoki
Sprawdź ucięte nagłówki, złe kadry i zepsute menu telefonu.
03
Popraw zauważony problem
Opisz błąd i oczekiwany widok po poprawce.
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>
Zapisana wersja, do której możesz wrócić
11-forma-studio · LP18-restore.diff
Zapisana pierwsza zmiana została przywrócona w lokalnym pliku testowym; suma kontrolna była identyczna. To przykład przywrócenia pliku, nie punktu kontrolnego agenta ani cofnięcia wdrożenia.
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
Claude Code · Odnalezienie brakującego pliku
Ty
W podglądzie brakuje tego zdjęcia. Sprawdź adres obrazu i lokalną ścieżkę w index.html.
AI · przykładowa odpowiedź
Porównam odwołanie w HTML z plikami i sprawdzę, czy używa zewnętrznego adresu. Jeśli pliku nie ma, poproszę o niego zamiast wstawiać przypadkowe zdjęcie.
Ty
Właściwe zdjęcie jest w assets. Popraw odwołanie, zachowaj nazwę pliku i sprawdź kadr na telefonie.
Kroki do wykonania
Sprawdź odwołanie
Odczytaj ścieżkę obrazu w rzeczywistym HTML.
Odnajdź zasób
Porównaj lokalne pliki albo potwierdź ładowanie zewnętrznego adresu.
Otwórz ponownie podgląd
Sprawdź poprawione zdjęcie i kadr w przeglądarce.
Efekt: właściwe zdjęcie ładuje się z poprawnej ścieżki.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
05 / Brakujące pliki
Co jeśli Claude nie widzi pliku lub brakuje zdjęcia?
Sprawdź folder, ścieżki i uprawnienia. Następnie skontroluj zasoby lokalne i zewnętrzne w przeglądarce. Nie zastępuj brakującego kontekstu wymyślonym materiałem.
Czy mogę wycofać odrzuconą zmianę?⌃
Zachowaj oryginalny ZIP i zaakceptowany folder lub wersję Git. Powiedz agentowi, którą wersję lub zmianę przywrócić, a potem otwórz stronę i sprawdź treści oraz linki.
06 / Wybierz projekt
Od której strony chcę zacząć?
Porównaj rzeczywiste struktury treści. Poniższe projekty dają różne prezentacje; nie dowodzą identycznych wyników w każdym środowisku Claude.
Forma Studio
Pokaż prace, usługi i podejście studia z zatwierdzoną treścią. Przykładowe zapytania i newsletter potrzebują prawdziwych odbiorców.
Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.
index.html
RECREATE.md
assets/common-ground.png
assets/loop-radio.png
assets/mono-house.png
assets/serein.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.
AI ChatPrzykładowy proces
Claude Code · 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.
07 / Co pozostaje
Co wykracza poza zadanie w Claude Code?
Po edycji podłącz potrzebny formularz lub rezerwacje i zleć agentowi AI publikację folderu na odpowiednim hostingu. Zatwierdź dostęp do konta i wysłanie, sprawdź zwrócony adres online, a potem podłącz domenę. Hosting i dostęp do AI są osobne od szablonu.
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 →
