Zbuduj swoją stronę-wizytówkę na dwa sposoby

Cześć, to Built by You, the Lab. Dzisiaj zajmiemy się konkretnym efektem naszej pracy. Zbudujemy stronę internetową.

Przyglądaliśmy się prowadzeniu wywiadów i sprawdzaniu naszych pomysłów w trudnych warunkach. Teraz potrzebujemy jednak czegoś namacalnego — czegoś, co ludzie mogą zobaczyć, a ty możesz obserwować, jak z tego korzystają. Strony, którą można komuś wysłać albo wykorzystać podczas wywiadu. Strona internetowa jest więc eksperymentem i opublikujemy ją.

Na końcu kursu powstaje galeria projektów — taka półka, jak po hackathonie, z produktami, które uczestnicy samodzielnie zbudowali w zaledwie kilka godzin. Nasz kurs ma podobną półkę. Znajdą się na niej linki do wszystkich produktów, które zbudujecie i którymi, mam nadzieję, podzielicie się ze mną. Dzisiejsza strona trafi właśnie na tę półkę.

Powiem szczerze: obecnie budowanie czegokolwiek — strony, aplikacji, czegokolwiek — może wyglądać zupełnie inaczej u różnych osób. Nowe narzędzia, nowe połączenia, nowe MCP, nowa dokumentacja — wszystko zmienia się praktycznie co tydzień. To, co pokazuję w filmie, jest moją wersją na dziś. Za pół roku, za miesiąc, a może nawet jutro niektóre kroki będą wyglądać inaczej. I to jest w porządku, bo się uczymy. Przede wszystkim uczymy się, że najważniejsze są kontekst, małe kroki i sprawdzanie efektów po drodze. To pozostaje aktualne mimo zmian narzędzi.

Wybrałam więc dwie ścieżki, z których sama korzystam:

• Ścieżka Lovable. Budujesz w Lovable, wizualnie, w przeglądarce. Lovable to dziś chyba najszybsza droga do własnego linku. To rozwiązanie dla 99% osób. Po prostu wpisujesz, czego chcesz i jak ma to wyglądać, a narzędzie może to przygotować.
• Ścieżka Claude Code. Budujemy w Claude Code, w folderze na własnym urządzeniu, z własnymi plikami i kontrolą nad nimi. Na końcu sami publikujemy stronę. Trafia do sieci bez Lovable ani podobnych narzędzi.

Nie ma złego wyboru. Jeśli ciekawi cię, jak to wszystko działa, możesz próbować i robić to od nowa nawet codziennie. Zacznij od ścieżki, która bardziej ci odpowiada, i postaraj się nie kierować lękiem, że coś cię omija — czyli FOMO.

Możesz już otworzyć ten przewodnik, uruchomić wybrane AI i przeprowadzić eksperyment razem ze mną.

Co zmieniło się od nagrania (sprawdzono w listopadzie 2026 r.)

Ćwiczenie z filmu pozostaje takie samo. Kilka przycisków zmieniło miejsce. Jeśli twój ekran wygląda inaczej niż w filmie, zajrzyj najpierw tutaj — a potem zrób coś, co zawsze pomaga: zapytaj AI.

Claude Design

• Nadal nazywa się Claude Design. Otworzysz go z karty Design na dole paska bocznego claude.ai albo pod adresem claude.ai/design.
• Funkcja systemu projektowego jest w wersji beta i jest włączona w planach Pro, Max, Ultra i Team. Sam Claude Design działa też w planie bezpłatnym, ale do tego warsztatu i tak przyda się płatny plan — Claude Code go wymaga.
• Nadal możesz przekazać mu kilka akapitów, plik Figma, repozytorium kodu, logotypy, fonty i notatki. Użytkownicy Claude Code mają też polecenie /design-sync, które buduje system bezpośrednio na podstawie projektu — dziś nie będzie potrzebne.
• Gdy system będzie gotowy, włącz Opublikowany — dzięki temu nowe projekty i inne narzędzia będą mogły z niego korzystać.
• Opcje wysyłania zmieniły miejsce. Są teraz pod przyciskiem Eksportuj w prawym górnym rogu, a nie pod Udostępnij. Eksport zawiera: Wyślij do Lovable (a także Base44, Canva, Replit, Vercel, Wix i innych), Wyślij do lokalnego agenta programistycznego, Wyślij do Claude Code w przeglądarce oraz Zamiast tego pobierz ZIP. „Udostępnij” określa teraz tylko, kto może otworzyć twój projekt.

Lovable

• „Tryb agenta” nazywa się teraz Tryb budowania. Tryb planowania i Tryb czatu nadal są dostępne. Możesz je przełączać w dowolnej chwili w polu czatu.
• Połączenie Claude z Lovable konfiguruje się po stronie Claude, a nie w ustawieniach Lovable: w Claude kliknij + → Połączenia → Przeglądaj połączenia → wyszukaj Lovable → Połącz → zaloguj się. Potem Claude Design może przesłać projekt do nowego projektu w Lovable.
• Kontrola bezpieczeństwa uruchamia się teraz sama po otwarciu okna Opublikuj — trwa około dziesięciu sekund, po czym pojawia się komunikat „Nie znaleziono problemów z bezpieczeństwem” albo liczba wykrytych problemów. Przy kolejnych aktualizacjach przycisk ma nazwę Opublikuj zmiany.
• Podglądy urządzeń przełącza się nad podglądem strony: Widok komputera / Widok tabletu / Widok telefonu.
• Plan bezpłatny daje 5 kredytów na budowanie dziennie, maksymalnie 30 miesięcznie, i pozwala pokazać stronę maksymalnie 10 zaproszonym osobom. Publiczny link dla nieznajomych jest dostępny w planie Pro. Zanim zaczniesz, sprawdź lovable.dev/pricing — to często się zmienia.

Claude Code

• Aplikacja komputerowa to aplikacja Claude Desktop; Claude Code znajduje się w jej karcie Code. Instalacja na Macu: pobierz plik .dmg, otwórz go, zaloguj się i kliknij Code. Bez terminala, bez Node, bez wpisywania poleceń. Wymagany jest plan Pro lub wyższy.
• Nowa sesja: wybierz Lokalnie → Otwórz folder… → wskaż folder website/. Tryby uprawnień nazywają się teraz Ręczny, Akceptuj edycje, Planowanie, Automatyczny. Pozostań przy trybie Ręcznym: przed każdą edycją i każdym poleceniem pojawia się pytanie, a ty decydujesz.
• Dostępne modele to: Opus 5.5 (domyślny), Sonnet 5.5, Haiku 5.5. „Sonnet 5” z filmu został wycofany. Do małych zadań — pliku CLAUDE.md czy przeniesienia pliku — wybierz Haiku 5.5. Do budowy strony zostaw model domyślny.
• Sesje w chmurze nazywają się Claude Code w chmurze (claude.ai/code, „Claude Code w przeglądarce”). Właśnie tam prowadzi opcja „Wyślij do Claude Code w przeglądarce”.
• Procent wykorzystanego okna kontekstu znajdziesz na karcie Kontekst w panelu sesji.

Codex (agent, który aktualizuje canvas w filmie)

• W lipcu 2026 r. OpenAI włączyło aplikację Codex do aplikacji komputerowej ChatGPT. Codex jest teraz jednym z jej trybów, obok Czatu i Pracy. Jeśli z niego korzystasz: otwórz ChatGPT, przełącz się na Codex i otwórz folder swojego obszaru roboczego. Możesz też wykonać przygotowania w Claude Code — prompty są takie same.

GitHub, Netlify, Figma

• GitHub: bez zmian. Bezpłatny, z nieograniczoną liczbą prywatnych repozytoriów; rejestracja przez e-mail, Google lub Apple.
• Netlify: nadal bezpłatne. Plan bezpłatny opiera się teraz na 300 kredytach miesięcznie — na jedną stronę wystarczy z zapasem. Ścieżka importu to Dodaj nowy projekt → Importuj istniejący projekt → GitHub → autoryzuj → wybierz repozytorium → Wdróż stronę. Każde wysłanie zmian do GitHub nadal automatycznie uruchamia ponowną publikację. Jedna nowość: na niektórych nowych kontach strona jest domyślnie prywatna — jeśli obce osoby nie mogą otworzyć linku, ustaw stronę jako publiczną w jej ustawieniach.
• Figma: Plik → Zapisz kopię lokalną nadal daje plik .fig.

Jeśli coś na twoim ekranie nie pasuje ani do filmu, ani do tej listy — to normalne. Za każdym razem, gdy korzystasz z AI, nawet z tego samego AI i w tym samym procesie, działa ono trochę inaczej. Zrób zrzut ekranu, wyślij go do dowolnego czatu AI i zapytaj, co kliknąć.

Część 1: Co budujemy i jak to działa

Namacalny efekt pracy

Jedna strona. Twój produkt w jednym zdaniu, odbiorcy opisani ich własnymi słowami, problem opisany słowami klienta, wyjaśnienie, jak to działa, i jeden przycisk: dołącz do listy oczekujących. Bez płatności, bez zakładania kont. W tym tygodniu sprawdzamy pomysł, jeszcze nie uruchamiamy produktu. Lista oczekujących zachęca też ludzi do rozmowy z nami, kiedy wciąż coś tworzymy — tak jak było z tym kursem w chwili nagrywania filmu.

Dwie ścieżki obok siebie

Ten sam kontekst, ten sam projekt, a na końcu obu ścieżek opublikowana strona. Wybierz według tego, jak lubisz pracować.

O czym decydujesz ty, a co robi agent

Cały warsztat ma jeden rytm, taki sam jak wszędzie w tym kursie: najpierw plan, potem działanie. Każdy agent w tym kursie trzyma się tej samej zasady.

• Ty zbierasz kontekst, zapisujesz go w plikach i określasz, co znaczy „gotowe”.
• Agent czyta pliki, proponuje plan i buduje.
• Ty sprawdzasz zmiany przed ich zaakceptowaniem. Gdy AI coś zmienia, warto prowadzić dialog: proś o pokazanie zmian, sprawdzaj je na bieżąco i dopiero wtedy mów „tak”.

Najpierw używaj trybu planowania, nawet przy zadaniach takich jak aktualizacja canvasu. To najbezpieczniejszy i najbardziej produktywny sposób pracy.

Zasada prywatności na obu ścieżkach

Wszystko, co wklejasz do narzędzia w chmurze, opuszcza twój laptop. Opis produktu — w porządku. Transkrypcje wywiadów z prawdziwymi nazwiskami, adresy e-mail, hasła, tokeny — nigdy. Nigdy nie przekazuj agentom AI danych wrażliwych, takich jak twój adres e-mail. Nie polecam, zdecydowanie nie polecam. A kiedy robisz zrzut ekranu, żeby poprosić AI o pomoc — a na pewno będziesz to robić — najpierw sprawdź, co na nim widać.

Część 2: Przygotowanie narzędzi

Przed warsztatem przygotuj poniższe rzeczy. Realny czas na całość: około 90 minut na jedną ścieżkę. Generowanie i łączenie narzędzi naprawdę zajmują czas i to normalne.

Dla wszystkich

• Twój obszar roboczy Obsidian ze Sprintu 2 — ten z folderem market (analiza komentarzy, mapa konkurencji, przegląd rynku) i folderem product.
• Twój lean canvas jako notatka w tym obszarze roboczym. Jeśli jeszcze go tam nie ma, to twój pierwszy mały krok (poniżej).
• Claude — plan Pro lub wyższy. Obejmuje zarówno Claude Design, jak i Claude Code.
• Agent AI, który potrafi czytać twój obszar roboczy. W filmie canvas i brief powstają w Codex, a strona w Claude Code. Do przygotowań nadaje się każde z nich. Codex jest teraz trybem w aplikacji komputerowej ChatGPT. Prompty w tym przewodniku są przygotowane z myślą o Claude Code, bo i tak potrzebujesz go do jednej ze ścieżek.

Ścieżka Lovable wymaga dodatkowo

• Konta Lovable na lovable.dev. Bezpłatny plan wystarczy, by zbudować i opublikować tę stronę.

Ścieżka Claude Code wymaga dodatkowo

• Konta GitHub na github.com. Jest bezpłatne i bardzo łatwe do założenia. Wystarczy utworzyć nazwę użytkownika i hasło albo zalogować się przez Google lub Apple — i gotowe.
• Konta Netlify na netlify.com. Zarejestruj się przez Google — będzie prościej.
• Aplikacji Claude Desktop z Claude Code w środku — karta Code. Claude Code działa na dwa sposoby: w terminalu na urządzeniu i w aplikacji komputerowej. My korzystamy z aplikacji komputerowej. Bez terminala, obiecuję.

Twój pierwszy mały krok — mniej niż pięć minut

Otwórz swój obszar roboczy i umieść w nim lean canvas, w folderze product/, pod nazwą, po której później go znajdziesz. lean-canvas.md będzie w porządku. Sama nazwa nie jest najważniejsza — ważne są zasady nazywania plików. Później będziesz przeszukiwać foldery i podziękujesz sobie za to.

Część 3: Przygotowania — kontekst, czyli coś dla wszystkich

Najpierw przygotowania. Niemal wszystko, czego potrzebujemy do naprawdę dobrej strony, już istnieje w naszym obszarze roboczym. W tej części sprawimy, by agent mógł faktycznie z tego skorzystać.

3.1 Zaktualizuj lean canvas danymi z rynku

Mamy lean canvas, stworzony jakiś czas temu metodą Running Lean. Mamy też aktualizacje — nowe informacje o rynku: analizę komentarzy, mapę konkurencji, konkurentów, przegląd rynku i podobne materiały. Teraz więc go aktualizujemy.

Otwórz agenta w swoim obszarze roboczym, wybierz folder projektu, przełącz na tryb planowania i wpisz:

Teraz ważna część. Najlepiej zweryfikować wynik — sprawdzić go, przeczytać — zanim go użyjemy. Zobacz, co się zmieniło. Jeśli wszystko ci odpowiada, zaakceptuj. Jeśli nie, powiedz, co jest nie tak, i pozwól agentowi spróbować ponownie.

To się zdarza. W filmie agent twierdzi, że brakuje danych canvasu, mimo że wybraliśmy folder. Rozwiązaniem jest najstarsza zasada instruowania AI: podaj bezpośrednią ścieżkę do pliku. Im bardziej zaawansowany model, tym mniej trzeba mu tłumaczyć. Ale gdy się potknie, bezpośredni link zawsze sprawdza się lepiej niż opis.

3.2 Zmień canvas w brief jednostronicowej witryny

Na podstawie tego lean canvasu zbudujemy stronę. Najpierw brief, czyli opis założeń.

W odpowiedzi otrzymasz: produkt w jednym zdaniu, odbiorców opisanych ich słowami i problem opisany słowami klienta. To efekt badania komentarzy. Gdy będziesz mieć wywiady, wykorzystasz je również do stworzenia briefu — i samych tekstów. Słowa prawdziwych ludzi, nie twoje.

Teraz ten plik jest jedynym źródłem prawdy. Utwórz nowy folder website/ w swoim obszarze roboczym i zapisz w nim brief jako site-brief.md. Możesz skopiować go samodzielnie albo poprosić o to agenta. Tak czy inaczej, przejdź do Obsidian i sprawdź, czy faktycznie tam jest.

Właśnie tak wygląda przekazywanie agentowi kontekstu.

3.3 Stwórz system projektowy w Claude Design

Drugi plik dla naszej strony: projekt wyglądu. Raz, porządnie ustalamy, jak strona ma wyglądać, a potem korzystamy z tego na obu ścieżkach.

Opowiem, jak powstał mój system projektowy, bo ten sposób można wykorzystać ponownie. Pracowałam nad tym kursem z mentorką. Specjalizuje się w doradztwie dotyczącym marki i opowiedziała mi o teście mocnych stron charakteru. Zrobiłam go, dostałam swój profil mocnych stron, a mentorka przeanalizowała go własnymi narzędziami i stworzyła audyt mojej marki oparty na tych cechach. Częścią audytu były styl wizualny i styl komunikacji — kilka akapitów, dosłownie kilka. Przekazałam je do Claude Design, a on stworzył cały system: dla kogo jest, źródła, wszystkie pliki, komponenty, kolory i rekomendacje fontów. Po drodze zadawał mi pytania. Trochę to trwało.

Materiałem wejściowym jest więc wszystko, co prawdziwe o tobie i twoim produkcie. Wszystko jest kontekstem, prawda? Im więcej wiesz o sobie, produkcie i całej reszcie, tym lepiej.

• Kilka akapitów o twoim produkcie i o tym, jakie wrażenie powinien wywoływać.
• Plik .fig, jeśli masz projekty w Figma. W Figma: Plik → Zapisz kopię lokalną, a potem prześlij plik.
• Kod, jeśli jakiś masz — z GitHub albo ze swojego komputera.
• Fonty, notatki, opinia mentorki lub mentora — wszystko, co masz.
• Strony, które naprawdę ci się podobają. Świetny sposób na opisanie oczekiwanego projektu: wejdź na ulubioną stronę i poproś AI o opisanie jej marki, palety kolorów i całej reszty. Możesz połączyć inspiracje z wielu stron, wybrać to, co naprawdę lubisz, i stworzyć coś bardzo osobistego.

To nie zastępuje projektanta. Ale jeśli dopiero zaczynasz i działasz samodzielnie, to zupełnie w porządku. Claude Design jest narzędziem dla osób bez wiedzy technicznej.

Kiedy przekażesz już wszystko, po prostu kliknij Dalej. Generowanie trwa kilka minut, maksymalnie pięć. W efekcie otrzymujesz system projektowy.

Następnie wyeksportuj system do pliku, aby stał się kolejnym elementem kontekstu w twoim obszarze roboczym.

Zapisz go w swoim obszarze roboczym jako design-system.md. Trzymaj się swoich zasad nazewnictwa. Mamy teraz kolejny bardzo przydatny element kontekstu.

Szybszy skrót, jeśli nie chcesz przechodzić przez cały rytuał: poproś Claude Code, żeby opisał system projektowy prostymi słowami i zapisał go jako plik MD, a potem korzystaj z niego ponownie. Może być trochę mniej skuteczny niż komponenty, bo komponenty pokazują, jak wszystko działa. Ale jeśli chcesz szybciej zacząć, bez przechodzenia przez całość, to może być łatwiejsza droga.

Przygotowania są skończone, gdy: site-brief.md i design-system.md są w folderze website/, a ty masz za sobą lekturę obu plików.

Część 4: Ścieżka Lovable

Wybierasz ścieżkę Claude Code? Przejdź do części 5.

4.1 Wyślij system projektowy do Lovable

Wracamy do Lovable. Od tej chwili korzystamy z serwerów Lovable. Dlatego żaden brief ani żadna wprowadzana informacja nie powinny zawierać danych wrażliwych.

W Claude Design możesz wysłać to, nad czym pracujesz, do Lovable. Możesz też połączyć inne narzędzia, z których być może korzystasz — Base44, Replit, Vercel, Wix i inne. Dzisiaj pracujemy z Lovable.

Muszą być spełnione dwa warunki, a potem wystarczy kliknięcie:

1. Claude jest połączony z Lovable. W Claude: + → Połączenia → Przeglądaj połączenia → Lovable → Połącz → zaloguj się na swoje konto Lovable. Ja mam już to połączenie; robisz to tylko raz.
2. W Claude Design otwórz swój system projektowy, upewnij się, że opcja Opublikowany jest włączona, kliknij Eksportuj (w prawym górnym rogu) → Wyślij do Lovable.

Lovable zapisze style w projekcie — zobaczysz swoje kolory i typografię jako wzorzec wyglądu. Jeśli Claude zacznie robić z projektem coś innego, niż potrzebujesz — w filmie zaproponował system slajdów — powiedz wprost:

To wymaga czasu. Obecnie łączenie wszystkich narzędzi — MCP i tak dalej — bywa trochę trudne i po prostu trwa. W filmie trwało to wieczność. Potrzebujemy cierpliwości, a gdy mam jakiekolwiek trudności, pytam AI. Mój pierwszy nauczyciel AI powiedział na kursie „Jak zbudować chatbota AI z ChatGPT”: jeśli mam problem, nie panikuję, po prostu pytam AI. Stamtąd wzięłam tę zasadę.

4.2 Pierwszy prompt w trybie planowania

Przełącz na tryb planowania. Załącz site-brief.md albo po prostu wklej jego treść. Potem pierwszy prompt. Ostatnie zdanie robi połowę roboty.

Najpierw plan, potem działanie. Każdy agent w tym kursie trzyma się tej samej zasady.

Pojawią się pytania. Odpowiadaj tak jak ja, celowo trzymając się prostych rozwiązań:

• Nowy projekt czy istniejący? Nowy. Później możemy go przenieść, jeśli zechcemy.
• Który system projektowy? Ten z połączonego projektu Claude Design. Trzymaj się go dokładnie.
• Dokąd mają trafiać e-maile dotyczące listy oczekujących? Na twój adres e-mail, przez przycisk mailto — przycisk otwiera aplikację pocztową odwiedzającego. Żeby nie komplikować. Jeśli chcesz, później możesz poprosić AI o przygotowanie całego systemu do zarządzania listą oczekujących. Dzisiaj nie na tym się skupiamy.
• Dodatkowe sugestie narzędzia? Właściwie są dobre. Ale trzymajmy się briefu, wyślijmy odpowiedzi i zobaczmy, co się stanie.

Zatwierdź plan. Teraz trwa generowanie — możemy pójść po herbatę albo wygenerować coś własnego.

4.3 Uczciwie oceń pierwszy rezultat

Mój pierwszy rezultat: kurs, dołącz teraz, przestań rozmawiać z AI, zacznij coś budować — jak to działa — dołącz do listy oczekujących. Powiedziałabym, że dość przejrzyście. Trochę nudno. Zdecydowanie wymaga dalszej pracy. Jak wszystko.

Taki pierwszy rezultat jest normalny. Umiejętność polega na jego poprawianiu.

4.4 Przetestuj przycisk, sprawdź urządzenia, wprowadzaj małe zmiany

Najpierw przetestuj przycisk. Kliknij „Dołącz do listy oczekujących”. W filmie nie otworzył aplikacji pocztowej — zamiast tego przeniósł mnie do sekcji strony. Tak nie może być. Jeden prompt to naprawi.

Podczas naprawy sprawdź urządzenia. Nad podglądem jest przełącznik: Widok komputera, Widok tabletu, Widok telefonu. Sprawdź wszystkie trzy. U mnie wyglądało to całkiem zgrabnie.

Zmieniaj teksty małymi krokami. Sekcja główna, zdanie „wyślij krótką wiadomość, a dodamy cię do kolejnej grupy” — jedna zmiana naraz. Jeśli pisanie idzie wolno, użyj dyktowania; ja właśnie tak zrobiłam.

4.5 Opcjonalnie: przenieś stronę do istniejącego projektu

Jeśli masz już witrynę w Lovable i chcesz dodać do niej tę stronę, poproś o przeniesienie strony do drugiego projektu. Narzędzie zaproponuje opcje. Potem powiedz szczerze:

Najprostsza zaproponowana mi droga: otworzyć drugi projekt i poprosić o dodanie strony. Uczciwe ostrzeżenie z nagrania: podczas przenoszenia zmienił się kolor. Ciekawe. Ale to AI i nadal możemy to poprawić — poproś o przywrócenie koloru tła i ponownie przetestuj przycisk w nowym miejscu.

4.6 Opublikuj

Kliknij Opublikuj w prawym górnym rogu. Szybkie skanowanie bezpieczeństwa uruchomi się samo — trwa około dziesięciu sekund. Jeśli coś znajdzie, pozwól Lovable to naprawić; w filmie właśnie tak się stało, a poprawka została od razu opublikowana. Potwierdź, poczekaj na informację o opublikowaniu strony i skopiuj adres URL. Link jest publiczny. Otwórz go od nowa, jeszcze raz kliknij przycisk. Jeśli twoja strona jest częścią większej witryny, dodaj ją do menu. Od teraz każdą edycję kończysz przyciskiem Opublikuj zmiany.

To naprawdę ekscytujące. Zrobiliśmy to razem.

Jeśli wybierasz ścieżkę Lovable — budowanie jest już skończone. Przejdź do części 6.

Część 5: Ścieżka Claude Code

Wybierasz ścieżkę Lovable? Masz już wszystko gotowe — przejdź do części 6.

5.1 Folder i CLAUDE.md

Otwórz aplikację Claude Desktop i kliknij Code. Nowa sesja → Lokalnie → Otwórz folder… → folder twojego obszaru roboczego — ten, który utworzyliśmy jakiś czas temu, z całym kontekstem, który właśnie zebraliśmy. Możemy wejść poziom głębiej i otworzyć folder website/, bo będziemy pracować nad stroną. Zostaw tryb uprawnień Ręczny: narzędzie pyta, ty decydujesz.

Pierwszy plik: CLAUDE.md. To notatka, którą każda nowa sesja czyta przed rozpoczęciem pracy, więc nie musisz wszystkiego tłumaczyć od nowa. To małe zadanie — prostszy model w zupełności wystarczy. W filmie był to Sonnet 5; dziś wybierz Haiku 5.5 z listy modeli, a do budowania wróć do domyślnego modelu (Opus 5.5).

Sprawdź, czy plik faktycznie jest w folderze.

5.2 Umieść pakiet projektowy w folderze

Teraz wysyłamy ten sam system projektowy do Claude Code. W Claude Design otwórz swój system projektowy → Eksportuj (w prawym górnym rogu). Zobaczysz Wyślij do lokalnego agenta programistycznego, Wyślij do Claude Code w przeglądarce oraz Zamiast tego pobierz ZIP.

W filmie skorzystałam z sesji w przeglądarce. Prawda jest taka: sesja w chmurze nie może zapisywać bezpośrednio na twoim Macu. Przekazywanie AI linków prowadzących do twojego laptopa też nie jest zbyt bezpieczne, bo ktoś mógłby je wykorzystać — więc dobrze, że tak jest. Może za to przekazać ci plik ZIP — pakiet projektowy. Zaproponuje polecenia terminala. Nie korzystamy z terminala. Nie.

Dziś najkrótszą drogą jest Zamiast tego pobierz ZIP — prosto na twojego Maca, bez sesji w chmurze po drodze. Obie drogi kończą się tak samo: plikiem ZIP w folderze website/.

Pobierz ZIP do folderu website/. Rozpakuj go — kliknij dwukrotnie. Nic trudnego. Otwórz folder i sprawdź, czy zawiera pliki.

Potem wróć do Claude Code. Spójrz, jak bardzo zapełniony jest kontekst — to wartość procentowa na karcie Kontekst. 5% jest w porządku; świeża sesja spokojnie wystarczy na zbudowanie całej strony.

5.3 Zbuduj stronę i sprawdź ją pod adresem lokalnym

Po drodze pojawią się prośby o uprawnienia — czytaj, czego narzędzie potrzebuje, i zezwalaj. W filmie samo weryfikuje układy: sprawdza sekcję główną na komputerze, sprawdza wyrównanie. Wie, jak wykonywać swoją pracę. Podoba mi się to.

Otwórz w przeglądarce podany adres lokalny. Kliknij każdy przycisk. Przeczytaj teksty.

Mój pierwszy rezultat: powiedziałabym, że trochę zbyt spokojny. Trochę za długi. Ale to w porządku. Drobne poprawki wprowadzamy po publikacji — nie dopieszczaj strony, której nikt jeszcze nie może odwiedzić.

W twoim folderze znalazły się: index.html, plik stylów, zasoby — a także brief, CLAUDE.md i pakiet projektowy. Wszystkie te pliki przechowują całą naszą pamięć. Nowa sesja może w każdej chwili podjąć pracę. Właśnie o to chodzi w pracy w folderze.

Teraz możemy porównać. Kto poradził sobie lepiej — Claude Design z Lovable czy Claude Design z Claude Code? Która wersja bardziej ci się podoba? Naprawdę jestem ciekawa.

5.4 GitHub — pamięć strony

Umieszczamy stronę w internecie i korzystamy z GitHub. GitHub jest czymś w rodzaju pamięci strony: każda wersja zostanie tam zapisana.

Potrzebujesz konta GitHub — bezpłatnego, zakładanego przez e-mail — a całą resztę zrobi AI.

Narzędzie sprawdza stan repozytorium, przygotowuje wszystkie pliki do zapisu, tworzy prywatne repozytorium, wysyła pliki i sprawdza, czy tam są. Ty zatwierdzasz każdy krok. Potem wejdź na github.com i zobacz swój projekt na liście. Nie korzystam z GitHub zbyt często, nie mam wielu repozytoriów — ale to jedno tam jest. Widzisz, to naprawdę łatwe.

Jeśli po drodze coś pójdzie nie tak, wiesz, co robić: po prostu poproś AI o pomoc.

5.5 Netlify — umieść stronę w sieci

Zarejestruj się na netlify.com przez Google. Uczciwie odpowiedz na pytania wprowadzające — osoba zupełnie początkująca, chcę opublikować stronę, menedżer produktu — cokolwiek jest prawdą.

Następnie:

1. Dodaj nowy projekt → Importuj istniejący projekt → GitHub.
2. Autoryzuj Netlify w GitHub. GitHub może poprosić o kod weryfikacyjny — w ten sposób dba o nasze bezpieczeństwo.
3. Wybierz repozytorium. Zainstaluj w nim Netlify. Ustawienia budowania zostaną wykryte automatycznie — domyślne są w porządku, Claude Code już je przygotował.
4. Wdróż stronę. Trwa wdrażanie. Kilka minut.

I mamy link. Długi, ale bezpłatny, a my mamy coś, co można pokazać. Sprawdź stronę — dostosowuje się do zmniejszanego okna, do tabletu, do telefonu. Otwórz ją na telefonie. Prawdziwa strona, prawdziwy świat.

Jeśli znajoma osoba po otwarciu linku widzi komunikat „nie znaleziono strony” albo ekran logowania, twoja nowa strona Netlify jest domyślnie prywatna. Otwórz ustawienia strony i zmień ją na publiczną.

5.6 Wprowadź zmianę i zobacz automatyczną publikację

Wróć do Claude Code i wprowadź jedną małą zmianę — w filmie był to nagłówek sekcji głównej. Potem poleć zapisanie zmiany jako commit i wysłanie jej do repozytorium. Netlify zauważy zmianę i samo ponownie opublikuje stronę. Przejdź do Netlify → Wdrożenia: pierwsze, drugie, z opisem zmiany. To wydaje się naprawdę przydatne.

Mamy teraz dwie wersje tej samej rzeczy, obie działają w sieci, ale na różne sposoby. I połączyliśmy GitHub. To może trochę onieśmielać. Wiem. Wiem, bo ja też nie jestem osobą techniczną.

Który link udostępniać. Netlify nadaje każdemu wdrożeniu osobny, niezmienny link oraz jeden adres strony, pod którym zawsze jest najnowsza wersja. Udostępniaj adres strony. Jeśli po otwarciu linku nie widzisz swojej zmiany, to skopiowany został link do konkretnego wdrożenia — zapytaj Claude Code: „jaki jest mój stały adres URL Netlify?”.

5.7 Dodatek: zbuduj stronę na podstawie zrzutu ekranu

Na końcu filmu jest jeszcze jeden sposób. Aby stworzyć galerię projektów kursu, nie pisałam specyfikacji. Zrobiłam zrzut ekranu strony wzorcowej i wrzuciłam go do Claude Code: stwórz galerię produktów, które powstaną podczas kursu, i użyj zrzutu jako wzoru struktury. Ten sam folder, GitHub już połączony. Kilka minut później: Zbudowane przez uczestników, naprawdę opublikowane. Każdy projekt tutaj zaczął się od pomysłu osoby bez wiedzy technicznej, a potem został przetestowany, zbudowany z AI i udostępniony publicznie. Zobacz, co stworzyli uczestnicy. To naprawdę urocze. Uwielbiam to.

Korzystaj z tego sposobu, gdy spodoba ci się układ jakiejś strony.

Część 6: Opublikuj, a potem pokaż

Niezależnie od wybranej ścieżki masz już publiczny link. Teraz trzy kroki.

Otwórz go na telefonie. Prawdziwe urządzenie, prawdziwe wrażenia. Dostosowywanie się strony do mniejszego ekranu to twój test jakości. Jeszcze raz kliknij przycisk na opublikowanej stronie.

Wyślij go. To ten namacalny efekt, którego brakowało podczas wywiadów — strona, którą można komuś wysłać albo oprzeć na niej rozmowę i obserwować, co ludzie faktycznie robią. Wyślij ją trzem osobom z wywiadów z jednym pytaniem: czy chcesz się zapisać? Odpowiedź, e-mail, pytanie zwrotne — to dane, których nie ma w twoim canvasie.

Dodaj go do podsumowania etapu. Wklej adres opublikowanej strony i jedno zdanie do notatki podsumowującej Sprint 3, wykonaj samoocenę i oznacz etap jako ukończony. A na samym końcu kursu, na stronie zgłaszania projektów do galerii, zaproszę cię do podzielenia się tym, co powstało, i opowiedzenia o tym kilku słów — tak jak zrobiły osoby uczestniczące w hackathonie. Właśnie po to to robimy: żeby doprowadzić cię do momentu, w którym pokazujesz swój projekt i publikujesz go dla świata.

Dwa zdania o prywatności, bo strona jest już publiczna. Bez danych klientów, bez nazwisk rozmówców, bez niczego, czego nie pokażesz nieznajomej osobie. A jeśli twoja lista oczekujących zbiera adresy e-mail, dodaj prostą informację w stopce: „Używamy twojego adresu e-mail wyłącznie do kontaktu w sprawie tego produktu. Bez spamu; w każdej chwili możesz poprosić o usunięcie z listy”.

Część 7: Sprawna praca — co robić, gdy nie idzie tak jak w filmie

Sprawne korzystanie z tych narzędzi nie polega na pisaniu. Polega na zarządzaniu. Dajesz kontekst, określasz, co znaczy „gotowe”, i sprawdzasz. Oto co robię, gdy coś idzie nie tak.

Gdy utkniesz w dowolnym narzędziu, zapytaj AI. Użyj dowolnego czatu — ChatGPT, Claude, jakiegokolwiek czatu z AI. Wyślij zrzut ekranu. Zapytaj, co robić, dokąd przejść, jak coś znaleźć. Nie wysyłaj niczego wrażliwego — adresów e-mail, haseł, tokenów, czegokolwiek takiego, co może być na ekranie. Uważaj na to.

Za każdym razem jest inaczej. Za każdym razem, gdy korzystasz z AI, nawet tego samego i w tym samym procesie, nie działa ono dokładnie tak samo. A już na pewno działa inaczej u różnych osób, bo prosicie o różne rzeczy i inaczej formułujecie pytania. Jeśli więc twój ekran nie pasuje do filmu, to nie błąd. Kontekst, małe kroki, sprawdzanie — to jest ta część, która się powtarza.

Łączenie narzędzi wymaga czasu. MCP, zgody, kody weryfikacyjne, „nadal się generuje”. Cierpliwość jest częścią przygotowań. Idź po herbatę.

Proś o pokazanie zmian. Przed zaakceptowaniem każdej edycji — canvasu, briefu, strony — zapytaj: co się zmieniło i dlaczego? Potem to przeczytaj. Najpierw tryb planowania.

Jedna zmiana na prompt. I mów, czego nie zmieniać. „Niczego innego nie zmieniaj” to całkowicie uprawnione zdanie.

Jeśli agent nie może znaleźć pliku, podaj bezpośrednią ścieżkę. Nie opis — ścieżkę.

Jeśli model zużywa twój limit. Małe zadania — CLAUDE.md, zmiana nazwy, przeniesienie pliku — powierz prostszemu modelowi. Większy zostaw do budowania.

Jeśli przenoszenie zmieniło kolory. To AI. Poproś o ich przywrócenie. Potem ponownie przetestuj przycisk.

Trzy pytania przed zaakceptowaniem zbudowanej strony: Co się zmieniło? Co budzi twoją największą niepewność? Co z briefu zostało pominięte?

Część 8: Jak zacząć — plan na siedem dni

Nie musisz robić całego warsztatu za jednym podejściem. Oto tempo, które wybrałabym, gdybym dopiero zaczynała.

Dzień 1 — Kontekst. Umieść lean canvas w swoim obszarze roboczym. Zaktualizuj go na podstawie folderu market w trybie planowania. Przeczytaj, co się zmieniło. Nic więcej.

Dzień 2 — Brief. Stwórz site-brief.md. Przeczytaj go na głos. Czy opis problemu brzmi jak słowa twoich klientów? Jeśli nie, popraw słowa, nie wygląd.

Dzień 3 — System projektowy. Kilka szczerych akapitów w Claude Design albo jedna strona, którą uwielbiasz. Wyeksportuj MD. Wybierz swoją ścieżkę i zapisz wybór.

Dzień 4 — Budowanie. Ścieżka Lovable: połącz narzędzia, pierwszy prompt w trybie planowania, odpowiedzi na pytania, zatwierdzenie. Ścieżka Claude Code: folder, CLAUDE.md, pakiet projektowy, budowanie, adres lokalny.

Dzień 5 — Publikacja. Lovable: Opublikuj, skopiuj URL. Claude Code: GitHub, potem Netlify. Otwórz stronę na telefonie. Przetestuj przycisk na opublikowanej stronie.

Dzień 6 — Wysyłanie. Trzy osoby z wywiadów, po jednym pytaniu. Obserwuj, co robią.

Dzień 7 — Przegląd i zamknięcie. Jedna mała poprawka na podstawie obserwacji. Wklej URL i jedno zdanie do podsumowania Sprintu 3, wykonaj samoocenę i oznacz etap jako ukończony.

Zacznij dziś: otwórz swój obszar roboczy, umieść w nim lean canvas i wyślij prompt aktualizujący. To wszystko. Cała reszta z tego wyniknie.

Gotowe, gdy…

• Adres opublikowanej strony otwiera się na twoim telefonie.
• Przycisk „Dołącz do listy oczekujących” otwiera aplikację pocztową — sprawdzone na opublikowanej stronie, nie w podglądzie.
• Każde słowo na stronie jest prawdziwe — odbiorcy opisani ich słowami, problem ich słowami, na podstawie canvasu i badania komentarzy.
• Wygląd jest zgodny z twoim systemem projektowym, a nie domyślnymi ustawieniami narzędzia.
• Ścieżka Claude Code: wiesz, który link jest stały.
• Twój URL i jedno zdanie są w podsumowaniu Sprintu 3.
• Link trafił do co najmniej trzech osób z wywiadów.

Twoja lista kontrolna

Odhaczaj kolejne rzeczy — małe kroki też się liczą.

Teraz — zanim zamkniesz tę kartę

• Umieść lean canvas w swoim obszarze roboczym — w product/, zgodnie ze swoimi zasadami nazewnictwa; poproś agenta o aktualizację na podstawie folderu market, w trybie planowania, i przeczytaj, co się zmieniło.
• Przygotuj brief — agent + canvas + folder → site-brief.md w nowym folderze website/. Odbiorcy opisani ich słowami, problem ich słowami, wezwanie do działania = dołącz do listy oczekujących.
• Stwórz system projektowy — kilka szczerych akapitów w Claude Design albo jedna strona, którą uwielbiasz; wyeksportuj MD do swojego obszaru roboczego. Wybierz ścieżkę i zapisz wybór.

W tym tygodniu

• Przejdź całą drogę do publikacji — wybraną ścieżką, aż do działającego publicznego URL. Przetestuj przycisk na opublikowanej stronie. Otwórz ją na telefonie.
• Tylko ścieżka Claude Code: jedna zmiana, commit i push — sprawdź, czy aktualizacja pojawiła się pod stałym linkiem. To ten link udostępniasz.
• Wyślij link trzem osobom z wywiadów — strona to ten namacalny element, którego brakowało w rozmowach. Obserwuj, co robią.
• Zamknij podsumowanie Sprintu 3 — URL opublikowanej strony + jedno zdanie; samoocena; oznaczenie jako ukończone. Na końcu kursu właśnie ten projekt trafi do galerii.

Dalej — podsumowanie Sprintu 3, potem Sprint 4

Wklej adres opublikowanej strony i jedno zdanie o tym, czym jest, do notatki podsumowującej Sprint 3. Dodaj dwie refleksje: co zmieniło się po zobaczeniu strony w sieci i o co zapytasz pierwsze trzy osoby, którym ją wyślesz? Zapisz, jak po drodze korzystasz z AI. Wykonaj samoocenę etapu, a potem oznacz go jako ukończony.

W następnym sprincie zbudujemy produkt stojący za tą stroną — twój osobisty kontekst jako bot w Telegram, w tym samym obszarze roboczym i z tymi samymi nawykami.

Dziękuję, że tu jesteś. Bardzo chciałabym zobaczyć twój działający projekt opublikowany w galerii.