Powrót do artykułów

Claude Design - przerabiamy swoją stronę

2026-05-27Autor: Piotr Szczepanik
Claude Design - przerabiamy swoją stronę
Subskrybuj

Otwierasz swoją stronę, krzywisz się i zamykasz przeglądarkę. Obiecujesz sobie, że ją zmienisz "jak będzie wolny czas". Czas nie nadchodzi, a strona dalej straszy karuzelą zdjęć, w którą ktoś ostatnio kliknął w 2019.

Znam to z autopsji. Redesign strony zwykle umiera w jednym z dwóch miejsc: w wycenie od agencji albo w pliku projektu, którego nikt potem nie otworzył. Pomiędzy tymi punktami jest kilka tygodni maili, brief, szablon i pytanie "a możemy zobaczyć trzy warianty?", na które odpowiedź brzmi "tak, ale dopłata".

W kwietniu 2026 Anthropic wypuścił narzędzie, które do tego całego rytuału podchodzi inaczej. Nazywa się Claude Design i siedzi pod osobnym adresem claude.ai/design. Nie jest to funkcja schowana w czacie, tylko oddzielny produkt z własnym płótnem, własnym eksportem i własnym licznikiem zużycia. Pod spodem działają modele Haiku, Sonnet, Opus. Na razie to research preview, więc spodziewaj się, że coś będzie nie działać (i tak będzie).

Dostęp mają subskrybenci planów płatnych. Za darmo nie ma. W Enterprise admin musi to najpierw włączyć, bo domyślnie jest wyłączone.

Dlaczego to ma znaczenie akurat przy istniejącej stronie

Zazwyczaj generatory "z promptu do designu" zaczynają od czystej kartki. Ładnie wygląda na demo, gorzej, kiedy masz stronę, która już istnieje, ma swoje kolory, logo, czcionki i klientów przyzwyczajonych do tego, jak wygląda guzik "kup teraz".

Claude Design ma trzy wejścia, które robią różnicę właśnie w takim scenariuszu.

Web capture. Możesz złapać elementy bezpośrednio z działającej strony, żeby prototyp wyglądał jak prawdziwy produkt, a nie jak abstrakcja. To znaczy, że nie odtwarzasz swojej strony z pamięci ani ze zrzutów ekranu. Pokazujesz Claude'owi, co już masz. Wchodzisz na swoją stronę i klikasz elementy. Później kopiujesz tekst, który narzędzie wygenerowało.

Wskazanie repozytorium. Możesz podpiąć kod swojej strony albo wgrać lokalny folder. Claude czyta to, żeby zrozumieć Twoją markę. Uwaga, ważne rozróżnienie: Claude Design czyta kod, ale go nie zmienia i nie odpala żadnych komend. Od grzebania w kodzie jest Claude Code, czyli zupełnie inne narzędzie.

System designu. Przy konfiguracji Claude buduje system na podstawie Twojego kodu i plików projektowych: paletę, typografię, komponenty, układy. Potem każdy nowy projekt automatycznie używa Twoich kolorów i czcionek. To jest ten moment, w którym przeprojektowanie istniejącej strony przestaje wyglądać jak losowy szablon, a zaczyna jak Twoja strona, tylko lepsza.

I tu pada zdanie, które Anthropic mówi wprost, a które warto wytatuować sobie na monitorze: bez systemu designu dostajesz output "funkcjonalny, ale generyczny". Czyli ładny, czysty i kompletnie bez charakteru. Jak hotelowy pokój w sieciówce, każdy podobny do siebie.

Jak wygląda robota, krok po kroku

Ekran jest podzielony na pół. Po lewej czat, po prawej żywe płótno z designem. Anthropic opisuje całą pętlę w pięciu ruchach: zakładasz projekt z kontekstem, opisujesz czego chcesz, oglądasz wynik, iterujesz przez czat i komentarze, eksportujesz albo udostępniasz.

Najpierw kontekst. Wrzucasz zrzuty obecnej strony, web capture, repozytorium, ewentualnie dokumenty w DOCX, PPTX czy XLSX. Im więcej realnego materiału, tym lepszy pierwszy szkic. Jak prompt jest "leniwy", Claude potrafi się zatrzymać i dopytać, zamiast malować pierwsze, co mu przyjdzie do głowy. To akurat dobra cecha, bo wyłapuje rzeczy, o których zapomniałeś napisać.

Dobry prompt łapie cztery rzeczy: cel, układ, treść i odbiorcę. Zamiast "zrób mi ładniejszą stronę" napisz coś w stylu:

Przeprojektuj stronę główną mojego sklepu z kawą.
Na górze sekcja z hasłem i jednym zdjęciem produktu, niżej trzy bestsellery,
pod tym sekcja "o palarni", na dole stopka z newsletterem.
Zachowaj moje kolory i logo. Ma być czysto, dużo powietrza, jeden ekran scrolla do pierwszego CTA.
Odbiorca: ludzie, którzy kupują kawę do domu, nie baristów.

Konkret bije ogólniki. "Trzy bestsellery i jeden ekran scrolla do CTA" da się narysować. "Coś nowoczesnego" nie.

Poprawki bez pisania elaboratów

Pierwszy szkic to szkic, nie wyrocznia. Do dopieszczania masz kilka dróg i każda służy do czego innego.

Czat bierze duże zmiany: ciemniejszy motyw, dwa albo trzy alternatywne układy. Komentarze wpinasz w konkretny element, więc nie musisz tłumaczyć "ten guzik, no ten na górze po prawej, nie, ten drugi". Klikasz i piszesz. Tekst poprawiasz bezpośrednio na płótnie, bez promptowania. A do odstępów, kolorów i układu Claude generuje suwaki, którymi kręcisz na żywo.

Mały problem z wersją preview: komentarze potrafią czasem zniknąć, zanim Claude je przeczyta. Obejście jest proste, wklejasz treść do czatu. Irytujące, ale lepiej wiedzieć, zanim oprzesz całą recenzję na komentarzach.

Co potem zrobisz z gotowym designem

Tu robi się ciekawie, bo design w Claude Design nie jest ślepą uliczką. Eksport masz pod kilka rzeczy: kod strony, Canva, PDF, PPTX w kilku wersjach albo czysty HTML. Eksport kryje się pod przyciskiem "Share".

Najmocniejsze jest przekazanie do Claude Code. Kiedy projekt jest gotowy do zbudowania, Claude pakuje wszystko w paczkę z intencją projektową, którą Claude Code odbiera jedną instrukcją. Powstaje zamknięta pętla: pomysł, prototyp, kod produkcyjny. Dla kogoś, kto przerabia istniejącą stronę, to właśnie ten ostatni kawałek zwykle boli najbardziej, bo "ładny obrazek w Figmie" a "wdrożony front" to dwa różne światy.

Gdzie to się sypie, czyli czego nie przemilczę

Research preview to research preview. Anthropic sam wymienia listę usterek: znikające komentarze, błędy zapisu w widoku kompaktowym, mulenie przy dużych repozytoriach, błędy czatu. Lekarstwa są przyziemne. Komentarz wklej do czatu, przełącz się na pełny widok, podepnij podkatalog zamiast całego monorepo, otwórz nowy tab czatu.

Dla firm większy problem leży gdzie indziej, w zarządzaniu. Na dziś nie ma logów audytowych ani raportowania zużycia dla adminów, narzędzie działa tylko w przeglądarce, a limity są tygodniowe i przypisane do użytkownika, nie do wspólnej puli zespołu. Wgrane materiały są przechowywane trwale, a Claude Design nie obsługuje wymogów rezydencji danych. Jak pracujesz z wrażliwymi materiałami marki albo produktu, to nie są drobiazgi.

Dla kogo to ma sens przy redesignie

Jeśli masz stronę, markę i choćby szczątkowy system wizualny, a brakuje Ci czasu, designera albo budżetu na agencję, Claude Design daje Ci pierwszy szkic w godzinę zamiast w miesiąc. Web capture i podpięcie kodu sprawiają, że punktem startu jest Twoja realna strona, a nie szablon ze stocka. Eksport do HTML albo paczka do Claude Code domyka drogę od pomysłu do wdrożenia.

Jeśli pracujesz z twardą biblioteką komponentów, dokładnymi specyfikacjami, dalej będziesz potrzebować prawdziwego narzędzia projektowego. Tu chodzi o wczesny etap, kiedy najważniejsze jest zobaczyć kierunek i go pokazać, a nie dopinać ostatni szlif.

Najlepsza rada na koniec jest nudna i dlatego prawdziwa: zanim zaczniesz, zbuduj system designu z tego, co już masz. Kwadrans roboty, a różnica między "Twoją stroną, tylko lepszą" a "generycznym hotelowym pokojem" zaczyna się dokładnie w tym miejscu.

Zmieniłem wygląd ogarnij.praktyczne.ai

Mój darmowy kurs "Ogarnij AI" miał bardzo generyczny wygląd. Chodziło o treść, a nie o wodotryski wizualne. W "wolnej chwili" miałem to zmienić. Oczywiście ta chwila nie nastała. Przy okazji testowania Claude Design zrobiłem to na przykładzie właśnie tej strony.

Jak to przeprowadziłem

  1. W Claude Design skorzystałem z funkcji "Web capture" wskazałem najważniejsze elementy z głównej strony ogarnij.praktyczne.ai.
  2. Wysłałem leniwy prompt w stylu: "Przeprojektuj wygląd tej strony. Zastosuj motyw komiksowy".
  3. Otrzymałem całkiem przyjemny punkt startowy.
  4. Dostosowałem detale kolorystyczne i iterowałem by dopiąć szczegóły. Po godzinie dałem sobie spokój bo nie wszystkie szczegóły mi się udało poprawić.
  5. Zrobiłem zrzut designu.
  6. Uruchomiłem v0 - tam mam ogarnij.praktyczne.ai - wrzuciłem zrzut ekranu i poprosiłem o zmianę wyglądu strony.

Efekt możesz zobaczyć na https://ogarnij.praktyczne.ai.