Claude Code w jedno popołudnie zamienia pomysł w klikalny prototyp: prawdziwe ekrany, prawdziwe linki, przyciski, które gdzieś prowadzą. Problem zaczyna się przy udostępnianiu, bo folder na laptopie to nie link, który można wysłać klientowi, PM-owi czy uczestnikowi testów. Poproś Claude Code: „opublikuj ten prototyp”, a uruchomi jedno polecenie, które zwraca działający adres HTTPS i link do zachowania. Bez konta, bez Gita i bez potoku builda do skonfigurowania.
Jak to działa
- Zbuduj prototyp z Claude Code. Zwykłe strony HTML albo mała aplikacja React lub Vite. Poproś o osobną stronę dla każdego ekranu, aby każdy miał własny adres, który można otworzyć i dodać do zakładek.
- Poproś Claude Code o udostępnienie. Uruchomi
npx -y lobsite --yesw folderze. Wysyłane są tylko zbudowane pliki i nic po drodze nie zadaje pytań. - Wyślij link. Claude przekaże adres i link do przejęcia. Otwórz link do przejęcia i zaloguj się, aby zachować prototyp dłużej niż 6 godzin; adres się nie zmienia.
Proś o prototyp, nie o makietę
Kilka linii na początku sesji oszczędza rundę poprawek przed udostępnieniem. Wklej to do Claude Code razem ze swoim briefem:
Build this as a static, clickable prototype:
- One HTML page per screen, linked with relative paths (about.html, not /about.html).
- Fake data in the page itself; no backend, no API keys, no login.
- Every button and link goes somewhere, even if it's a "not built yet" screen.
- Works on a phone as well as a laptop.
When it's done, share it with `npx -y lobsite --yes` and give me the link.
Najważniejsze są ścieżki względne: dzięki nim te same pliki otwierają się z laptopa, z adresu podglądu, a później z Twojej własnej domeny.
Jeden link na iterację
Prototypy zmieniają się po każdym przeglądzie. Niech link, który już wysłałeś, dalej działa, a nową wersję postaw obok:
npx -y lobsite --yes --preview
Wdrożenie podglądowe dostaje własny adres, a główny link nadal pokazuje wersję, którą ludzie przeglądają. Wyślij podgląd osobie, która prosiła o zmianę. Gdy zostanie zaakceptowana, npx lobsite promote <id> czyni ją wersją główną, a wycofanie cofa ją w jednym kroku, jeśli opinie pójdą w drugą stronę. Na darmowym koncie wdrożenia z ostatnich 7 dni zachowują adresy podglądu (30 dni w Standard), więc „v2” i „v3” wciąż będą do porównania przy następnym przeglądzie.
Kto może go zobaczyć
- Bez konta prototyp nie jest indeksowany przez wyszukiwarki i zostaje usunięty po 6 godzinach, jeśli go nie przejmiesz.
- Adresy podglądu nigdy nie są indeksowane, w żadnym planie.
- W Standard dodasz hasło w ustawieniach strony. Pyta o nie każdy adres strony, łącznie z podglądami i własną domeną. Recenzenci wpisują je raz na przeglądarkę, a jego zmiana wylogowuje wszystkich. Hasło jest w panelu, nie w projekcie, więc nigdy nie trafi do repozytorium.
Zwykle o to chodzi w pytaniu „czy możemy to zostawić między nami a klientem?”. Rzeczy naprawdę poufnych nie wkładaj do prototypu wcale.
Testowanie z użytkownikami
Hostowany prototyp to URL, a tyle potrzebuje większość narzędzi do testów. Wklej adres do Maze, Lyssna lub UserTesting jako zadanie na stronie albo wyślij go bezpośrednio uczestnikom. Każdy ekran ma własną ścieżkę, więc zadanie może zaczynać się na /checkout.html, a sukcesem może być „dotarcie do /thanks.html”.
Potrzebujesz odpowiedzi z samego prototypu, np. z ekranu rejestracji lub ankiety? Skieruj formularz na /_lobsite/forms/feedback, a gdy prototyp będzie na koncie, zgłoszenia przyjdą e-mailem z filtrem spamu. Zobacz formularze.
Wdrożenie bez konta działa przez 6 godzin. Link do przejęcia pozwala je zatrzymać, za darmo.
Podgląd przed publikacją. Wycofanie jednym kliknięciem, razem z przekierowaniami.
W planie Standard każdy adres strony prosi o hasło. Recenzenci wpisują je raz na przeglądarkę.
Żadnych pytań pod agentem i linia Tell the user: z adresem URL i linkiem do przejęcia.
Skieruj formularz na /_lobsite/forms/contact. Filtr spamu w zestawie.
Także na darmowych kontach: dodaj jeden rekord DNS, a strona przeniesie się na Twoją domenę. Każda strona ma HTTPS w każdym planie.
Prototypy z Claude Code: Lobsite i typowe sposoby udostępniania
| Lobsite | Link do artefaktu Claude | Netlify Drop | GitHub Pages | |
|---|---|---|---|---|
| Kto wysyła | Claude Code, jednym poleceniem | Ty, z claude.ai | Ty, przeciągając folder | Claude Code, przez commit i push |
| Konto na start | Brak przez 6 godzin | Konto Claude | Brak przez mniej więcej godzinę | Konto GitHub i repozytorium |
| Wiele stron i buildy React | Tak, cały folder | Jedna strona na artefakt | Tak | Tak, z workflow do builda |
| Link na iterację | --preview, z promote i rollback |
Za każdym razem nowy artefakt | Za każdym razem nowa strona lub nowe wdrożenie | Brak wbudowanego |
| Hasło | Tak, w Standard | Tylko zasady udostępniania w zespole | W płatnych planach Netlify | Nie |
Link do artefaktu Claude wystarczy dla jednego ekranu. Gdy prototyp to folder stron napisanych przez Claude Code w Twoim projekcie, hosting przyjmujący folder bez zmian oszczędza kopiowanie i wklejanie.
Najczęstsze pytania
Czy mogę hostować prototyp z Claude Code za darmo?
Tak. Bez konta działa przez 6 godzin. Przejmij go linkiem od Claude, a zostanie online na darmowym koncie, pod tym samym adresem.
Linki w moim prototypie działają lokalnie, ale psują się online. Dlaczego?
Zwykle przez ścieżki bezwzględne: /about.html wskazuje na początek domeny, a ten różni się między laptopem a hostowanym adresem. Poproś Claude Code o linki względne (about.html, ./img/logo.png), a potem wdróż ponownie. Wysłane zostaną tylko zmienione pliki.
Czy działa prototyp w React z trasami?
Tak. Włącz tryb jednostronicowy przez spa = true w lobsite.toml albo Aplikacja jednostronicowa w ustawieniach strony, aby linki do /settings lub /orders/42 otwierały aplikację zamiast 404.
Czy mogę umieścić prototyp klienta na jego własnej domenie?
Tak. Darmowe konta obejmują jedną własną domenę: dodaj jeden rekord DNS, a prototyp przeniesie się tam, z HTTPS.
Czy Claude Code może zaktualizować prototyp po przeglądzie?
Tak. lobsite.toml pamięta stronę, więc to samo polecenie z dowolnej sesji aktualizuje ten sam adres. Dodaj jedną linię do CLAUDE.md, by każda sesja robiła to tak samo; zobacz Wdrażanie strony z Claude Code.