Narzędzia AI Zasób

Strona 3D w Claude Design — checklista

Lista kroków od opisu do opublikowanej strony z ruchomym tłem i elementami 3D w Claude Design — z punktami kontrolnymi i miejscami, w których ucieka limit. Otwierasz ją w trakcie pracy i odhaczasz.

To jest wersja do trzymania pod ręką. Otwierasz ją w trakcie składania strony w Claude Design i odhaczasz kroki — od pomysłu, przez tło i poprawki, po publikację. Każdy punkt zaczyna się od czasownika i da się sprawdzić, że został wykonany.

Zasada przewodnia jednym zdaniem: im więcej kontekstu na starcie i im więcej poprawek w panelu zmian zamiast w nowych poleceniach, tym mniej przepalonego zużycia.

0. Zanim zaczniesz

  • Sprawdź, że masz plan płatny — na darmowym koncie Claude Design się nie uruchomi.
  • Zapamiętaj trzy pojęcia, które wracają niżej:
  • Render — wyświetlenie strony tak, jak zobaczy ją użytkownik.
  • Token — fragment tekstu, którym operuje model; za tokeny liczy się zużycie.
  • Opus 4.7 — model, na którym działa Claude Design (mocniejsze rozumienie obrazu niż wcześniejsze wersje).
  • Zdecyduj, którą drogą startujesz: przebudowa istniejącej strony czy start od pomysłu (patrz krok 1).

1. Wybierz drogę startu

  • Jeśli masz już stronę, której kod leży w repozytorium na GitHubie albo w folderze na dysku, przekaż go Claude Design — to droga przez przebudowę, z zachowaniem kolorów, tekstów i charakteru marki.
  • Jeśli zaczynasz od pomysłu, najpierw porozmawiaj ze zwykłym Claude i poproś o specyfikację: na czym polega produkt, jak ma brzmieć sekcja powitalna (hero — pierwszy ekran po wejściu na stronę), jaka jest pozycja marki i jej styl.
  • Sprawdź, że Claude zwrócił gotowy opis — nazwę, charakter, paletę kolorów, listę sekcji — i zachowaj go do przeklejenia do Claude Design jako punkt wyjścia.
  • Podaj na początku jak najwięcej kontekstu: im więcej teraz, tym mniej poprawek później (a poprawki przepalają najwięcej tokenów).

2. Przygotuj tło i naszkicuj układ

  • Poproś Claude o opis obrazu pasującego do marki.
  • Wygeneruj z tego opisu grafikę w osobnym narzędziu, a potem zamień ją w kilkusekundowy film grający w pętli.
  • Sprawdź, że w tle kamera się nie porusza — to ma być spokojna, zapętlona animacja, nad którą zmieści się tekst.
  • Pilnuj rozmiaru pliku wideo: Claude Design przyjmuje wideo z limitem rzędu 30–40 megabajtów, więc kilkudziesięciosekundowych filmów tam nie wrzucisz.
  • Naszkicuj układ wprost w narzędziu — zaznacz, gdzie ma być tło, gdzie tekst powitalny, gdzie nawigacja i logo. Nie musi być ładny; ma sprawić, że ty i model patrzycie na to samo.
  • Dorzuć plik wideo, wklej specyfikację marki i jednym poleceniem opisz, co ma powstać.
  • Obserwuj, jak model rusza — pokazuje tok myślenia i listę zadań. Jeśli idzie w złą stronę, zatrzymaj go od razu, zamiast pozwolić mu zbudować coś niepotrzebnego (każdy krok kosztuje).

3. Poprawiaj na podglądzie, nie poleceniami

W Claude Design widzisz gotowy podgląd strony i poprawiasz go wprost na nim. To największa różnica wobec pisania kodu poleceniami.

  • Skomentuj element. Kliknij konkretny przycisk czy nagłówek i opisz zmianę — model dostaje dokładną informację, o który element chodzi.
  • Edytuj w miejscu. Usuń fragment, zmień tekst albo jego rozmiar; zmiana dzieje się na żywo.
  • Zakreśl i dopisz uwagę. Zaznacz obszar i dodaj komentarz, np. że przejście między sekcjami jest zbyt gwałtowne.
  • Do prób wyglądu używaj panelu zmian (tweaks) — suwaków po prawej stronie. Testuj nimi paletę kolorów, czcionkę, wielkość nagłówków, odstępy między sekcjami i układ pierwszego ekranu w czasie rzeczywistym, zamiast wysyłać osobne polecenie na każdą wersję.
  • Zostaw w panelu tylko to, co zatwierdzasz.
  • Gdy brakuje ci pomysłów, poproś model, żeby sam zaproponował, co dałoby się dodać i czym pobawić.
  • Po inspirację możesz sięgnąć do serwisu motionsites.ai (biblioteki teł i scen): skopiuj opis sceny, którą lubisz, przekaż go Claude Design i poproś o podmianę tła na własne wideo oraz tekstów i kolorów na swoje. Traktuj taki przykład jako punkt wyjścia, nie gotowiec do skopiowania.

4. Opublikuj stronę

Sam podgląd zobaczysz tylko ty. Żeby strona była dostępna w internecie, przeprowadź ją przez publikację.

  • Pobierz projekt z Claude Design jako paczkę ZIP.
  • Otwórz paczkę w Claude Code (narzędzie, w którym Claude pracuje przy plikach i poleceniach).
  • Wyślij projekt do repozytorium na GitHubie i połącz repozytorium z usługą hostingu (np. Vercel) — GitHub przechowuje pliki, Vercel udostępnia je w sieci pod adresem.
  • Najpierw sprawdź stronę lokalnie, otwierając ją pod adresem typu localhost, zanim cokolwiek opublikujesz. Pamiętaj, że localhost widać tylko na twoim komputerze — wysłanie tego adresu komuś nie pokaże mu twojej strony.
  • Jeśli po pierwszym wdrożeniu zobaczysz komunikat „404 — nie znaleziono”, przemianuj główny plik na index.html. Typowa przyczyna to sytuacja, w której hosting szuka pliku startowego w głównym folderze, a ten ma inną nazwę.
  • W obu przypadkach możesz opisać problem Claude Code i poprosić o naprawę.
  • Dalej pracuj na dwóch wersjach: poprawiaj wersję roboczą u siebie, a gdy zmiany są gotowe, wyślij je do GitHuba — hosting sam je podchwyci i zaktualizuje wersję publiczną.

5. Dopasuj do telefonu

  • Pamiętaj, że Claude Design i Claude Code nie dostosowują strony do telefonu automatycznie — projekt powstaje pod ekran komputera.
  • Sprawdź wygląd na telefonie w przeglądarce: klawisz F12 i widok mobilny.
  • Dopiero gdy poproszysz o dopasowanie do urządzeń mobilnych, model przebuduje układ. Wersja na komputer przy tym nie ucierpi.

6. Pilnuj limitu

Claude Design ma własny, tygodniowy limit — osobny od zwykłej sesji. Potrafi się 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. Traktuj te liczby jako rząd wielkości z płatnych planów, nie oficjalne normy.

Najwięcej zużycia ucieka, gdy wszystko robisz najdroższym modelem, gdy budujesz system marki bez dobrego punktu wyjścia i gdy poprawiasz stronę długą wymianą poleceń. Stąd nawyki, które warto odhaczyć:

  • Dobierz model do etapu. Opus 4.7 zostaw na planowanie i poważniejsze zmiany; do większości budowania wystarcza lżejszy Sonnet 4.6, jeśli precyzyjnie opisujesz, czego chcesz.
  • Wprowadzaj jedną zmianę wizualną na polecenie. Gdy upchniesz w jednym poleceniu kilka dużych zmian, model zwykle zrobi dobrze tylko jedną–dwie, resztę pominie.
  • 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”.
  • Otwórz świeżą sesję przy długich wątkach. Gdy projekt się ciągnie, a efektu wciąż nie ma, wyeksportuj go i otwórz na nowo — poprawiasz gotowe na świeżym kontekście, nie zaczynasz od zera.
  • Wyeksportuj, 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.

Na co uważać

  • Niezatrzymany model. Gdy idzie w złą stronę, zatrzymaj go od razu — każdy zbędny krok kosztuje token.
  • Za duże lub ruchome wideo. Przy tle pilnuj limitu rzędu 30–40 MB, a kamera w nagraniu ma stać — bez ruchu.
  • Adres localhost wysłany komuś. Widać go tylko na twoim komputerze; nie wyśle nikomu twojej strony.
  • „404” po wdrożeniu. Najczęściej brak pliku index.html w głównym folderze — przemianuj plik startowy.
  • Telefon jako założenie. Strona nie dopasuje się do telefonu sama; sprawdź to i poproś o dopasowanie osobno.
  • Poprawki poleceniami zamiast suwakami. Próby wyglądu rób w panelu zmian — każda wersja przez polecenie to osobne zapytanie i render.
  • Gotowy przykład wzięty żywcem. Sceny z motionsites.ai to punkt wyjścia, nie gotowiec do skopiowania.

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.