Claude Design to narzędzie, w którym opisujesz słowami stronę internetową, a model buduje gotowy projekt — z układem, tekstem, kolorami i animacją. Możesz przebudować istniejącą stronę albo zacząć od zera. Efekt bywa naprawdę dopracowany: ruchome tło, elementy 3D (czyli sprawiające wrażenie trójwymiarowych), sceny, które zmieniają się w miarę przewijania. Poniżej to, co realnie trzeba zrobić, żeby taką stronę złożyć i opublikować — oraz na czym uważać, bo to narzędzie potrafi szybko zjeść limit.
Zacznę od kilku pojęć. Claude Design to osobny produkt firmy Anthropic — to samo co Claude potrafi zrobić w projektowaniu, ale spakowane w wygodniejszy interfejs. Działa na modelu Opus 4.7, który ma mocniejsze rozumienie obrazu niż wcześniejsze wersje. Render to wyświetlenie strony tak, jak zobaczy ją użytkownik. Token to fragment tekstu, którym operuje model — i to za tokeny liczy się zużycie, więc o limitach piszę niżej osobno. Jedna rzecz na start: Claude Design działa wyłącznie w planie płatnym, na darmowym koncie go nie uruchomisz.
Dwa sposoby na start: przebudowa albo od zera
Jeśli masz już stronę, której kod leży w repozytorium na GitHubie (czyli w miejscu, gdzie przechowuje się pliki projektu) albo w folderze na dysku, wystarczy przekazać go Claude Design. To pierwsza droga — przebudowa istniejącej strony przy zachowaniu tego, co ważne: kolorów, tekstów, charakteru marki.
Druga droga to start od pomysłu. Tu warto najpierw porozmawiać ze zwykłym Claude i poprosić o specyfikację: na czym polega produkt, jak ma brzmieć sekcja powitalna (tzw. hero — pierwszy ekran, który widać po wejściu na stronę), jaka jest pozycja marki i jej styl. Claude zwróci gotowy opis — nazwę, charakter, paletę kolorów, listę sekcji. Ten opis przeklejasz później do Claude Design jako punkt wyjścia. Im więcej kontekstu podasz na początku, tym mniej poprawek później — a poprawki to właśnie miejsce, w którym przepala się najwięcej tokenów.
Tło z ruchomego wideo i szkic układu
Efektowne tło to często krótkie wideo grające w pętli. Schemat jest prosty: prosisz Claude o opis obrazu pasującego do marki, generujesz z niego grafikę w osobnym narzędziu, a potem zamieniasz tę grafikę w kilkusekundowy film. Ważny szczegół: w takim tle kamera ma się nie poruszać — to ma być spokojna, zapętlona animacja, nad którą zmieści się tekst. Claude Design przyjmuje pliki wideo, ale z limitem rozmiaru (rzędu 30–40 megabajtów), więc kilkudziesięciosekundowych filmów tam nie wrzucisz.
Zanim model zacznie budować, możesz naszkicować układ wprost w narzędziu — zaznaczyć, gdzie ma być tło, gdzie tekst powitalny, gdzie nawigacja i logo. To nie musi być ładne; chodzi o to, by model i ty patrzyli na to samo. Potem dorzucasz plik wideo, wklejasz specyfikację marki i jednym poleceniem opisujesz, co ma powstać. Model rusza, pokazuje swój tok myślenia i listę zadań — i to jest moment, żeby go obserwować. Jeśli idzie w złą stronę, lepiej zatrzymać go od razu, niż pozwolić mu zbudować coś niepotrzebnego, bo każdy taki krok kosztuje.
Poprawki w oknie podglądu zamiast nowych poleceń
Tu jest największa różnica wobec pisania kodu poleceniami. W Claude Design widzisz gotowy podgląd strony i poprawiasz go wprost na nim, na kilka sposobów:
- Komentarz do elementu. Klikasz w konkretny przycisk czy nagłówek i opisujesz zmianę. Model dostaje dokładną informację, o który element chodzi, więc się nie myli.
- Edycja w miejscu. Możesz wprost usunąć fragment, zmienić tekst albo jego rozmiar — zmiana dzieje się na żywo.
- Rysowanie. Możesz zakreślić obszar i dopisać uwagę, np. że przejście między sekcjami jest zbyt gwałtowne.
Osobno działa panel zmian (tweaks) — zestaw suwaków po prawej stronie, którymi w czasie rzeczywistym testujesz paletę kolorów, czcionkę, wielkość nagłówków, odstępy między sekcjami czy układ pierwszego ekranu. To pozwala sprawdzić „a jak by to wyglądało na niebiesko”, bez wysyłania kolejnego polecenia. Gdyby tę samą próbę robić poleceniami, każda wersja to osobne zapytanie, render i ewentualne cofanie — a tu po prostu przesuwasz suwak i zostawiasz to, co zostało zatwierdzone.
Jeśli brakuje ci pomysłów, możesz też poprosić model, by sam zaproponował, co dałoby się dodać i czym pobawić — różne kolory, panele, warianty. Inspirację bierze się czasem z gotowych przykładów; polecam serwis motionsites.ai z bibliotekami teł i całych scen. Schemat jest ten sam: kopiujesz opis sceny, którą lubisz, przekazujesz go Claude Design i prosisz o podmianę tła na własne wideo oraz tekstów i kolorów na swoje. To skraca drogę, ale warto traktować takie przykłady jako punkt wyjścia, nie gotowiec do skopiowania.
Publikacja: z podglądu na żywą stronę
Sam podgląd nikt poza tobą nie zobaczy — żeby strona była dostępna w internecie, trzeba ją opublikować. Droga jest taka: w Claude Design pobierasz projekt jako paczkę ZIP, otwierasz go w Claude Code (to narzędzie, w którym Claude pracuje przy plikach i poleceniach), a stamtąd wysyłasz go do repozytorium na GitHubie i łączysz repozytorium z usługą hostingu, np. Vercel. GitHub przechowuje pliki, Vercel udostępnia je w sieci pod adresem.
Po drodze czekają dwie typowe pułapki. Pierwsza: zanim cokolwiek opublikujesz, sprawdź, czy strona w ogóle działa, otwierając ją lokalnie — pod adresem typu localhost. To adres widoczny tylko na twoim komputerze; jeśli wyślesz go komuś, nie zobaczy twojej strony, tylko to, co sam ma uruchomione u siebie. Druga: po pierwszym wdrożeniu strona potrafi zwrócić komunikat „404 — nie znaleziono”. Typowa przyczyna to sytuacja, w której usługa hostingu szuka pliku startowego w głównym folderze, a ten ma inną nazwę; pomaga przemianowanie głównego pliku na index.html. W obu przypadkach wystarczy opisać problem Claude Code i poprosić o naprawę.
Dalej dochodzi wygodna zasada: masz teraz wersję roboczą (lokalną, którą poprawiasz w spokoju) i wersję publiczną. Zmiany robisz u siebie, a gdy są gotowe, wysyłasz je do GitHuba — usługa hostingu sama je podchwytuje i aktualizuje żywą stronę.
I jedna rzecz, którą łatwo przeoczyć: Claude Design i Claude Code nie dostosowują strony do telefonu automatycznie. Projekt powstaje pod ekran komputera. Jak strona wygląda na telefonie, sprawdzisz w przeglądarce (klawisz F12 i widok mobilny) — i dopiero gdy poprosisz o dopasowanie do urządzeń mobilnych, model przebuduje układ. Wersja na komputer przy tym nie ucierpi.
Limity: gdzie znika zużycie i jak je rozciągnąć
Claude Design ma własny, tygodniowy limit — osobny od zwykłej sesji. Potrafi się on wyczerpać szybko: na planie za 20 dolarów miesięcznie jedna większa strona i jeden system marki mogą go niemal domknąć; na najwyższym planie zmieści się kilka stron i projektów wideo, zanim zbliżysz się do końca. Traktuj to jako rząd wielkości z płatnych planów, nie oficjalne normy.
Najwięcej zużycia znika w kilku miejscach: gdy wszystko robisz najdroższym modelem zamiast lżejszego do drobiazgów, gdy budujesz system marki bez dobrego punktu wyjścia (samo „przetrawienie” materiałów zajmuje kilkanaście minut i sporo kosztuje), oraz gdy poprawiasz stronę długą wymianą poleceń zamiast korzystać z panelu zmian. Stąd kilka praktycznych nawyków:
- Dobry model do etapu. Opus 4.7 zostaw na planowanie i poważniejsze zmiany; lżejszy Sonnet 4.6 wystarcza do większości budowania, jeśli precyzyjnie opisujesz, czego chcesz.
- Jedna zmiana wizualna na polecenie. Gdy upchniesz w jednym poleceniu kilka dużych zmian, model zwykle robi dobrze tylko jedną–dwie, resztę pomija.
- Mów też, czego nie chcesz, i odwołuj się do konkretów. „Gęściej, w stylu interfejsów z 2023 roku” działa lepiej niż „zrób to ładnie”.
- Świeża sesja przy długich wątkach. Gdy projekt się ciągnie, a efektu wciąż nie ma, wyeksportuj go i otwórz na nowo — nie zaczynasz od zera, tylko poprawiasz gotowe na świeżym kontekście.
- Eksport, gdy reszta jest prostsza ręcznie. Cały projekt możesz wyprowadzić jako ZIP albo do innych narzędzi (Figma, Canva, PowerPoint) i dokończyć drobiazgi tam, jeśli pójdzie szybciej.
Jest jeszcze przejście awaryjne: gdy limit w Claude Design się skończy, a chcesz pracować dalej, wyeksportuj projekt do Claude Code i tam kontynuuj — masz tam osobne zużycie. Gdy limit Design się odnowi, wracasz do niego.
Co z tego zapamiętać
Claude Design skraca drogę od opisu do dopracowanej, „żywej” strony — z ruchomym tłem i elementami 3D — i pozwala poprawiać efekt wprost na podglądzie, zamiast zgadywać poleceniami. To wygoda, nie magia: nadal trzeba dać dobry punkt wyjścia, opublikować stronę przez GitHub i hosting, samodzielnie dopasować ją do telefonu i pilnować limitu, który ubywa szybciej, niż się wydaje. Sedno jest proste — im więcej kontekstu na starcie i im więcej poprawek w panelu zmian zamiast w nowych poleceniach, tym mniej przepalonego zużycia i mniej iteracji do celu.