Claude Design — co to jest, ile kosztuje, jak zacząć

Zanim zapłacisz komuś za stronę albo spędzisz weekend na kodzie, możesz ją zobaczyć. W Claude Design opisujesz ją kilkoma zdaniami — „strona mojej pracowni, zapisy na warsztaty, ciepłe kolory” — a Claude rysuje makietę, którą poprawiasz jak dokument. Tak powstały makiety czterech darmowych narzędzi na tej stronie.

Claude Design to część Claude od Anthropic, w której opisujesz zwykłymi zdaniami, co chcesz zobaczyć, a Claude rysuje pierwszą wersję: makietę strony, ekran aplikacji, klikalny prototyp, prezentację albo jednostronicową ulotkę. Działa w przeglądarce i w aplikacji Claude — nie trzeba niczego pobierać — w zwykłej rozmowie, w zakładce Artifacts i w Claude Code. Od 16 września 2026 jest dostępny we wszystkich planach, także w darmowym (tak podają informacje o zmianach w Claude), i korzysta z tych samych limitów co reszta Claude. Jest dla każdego, kto chce zobaczyć, jak będzie wyglądać jego strona albo aplikacja, zanim ją zbuduje — nie trzeba umieć projektować.

Stan na 19 października 2026. Wszystkie fakty o produkcie bierzemy z oficjalnych stron Anthropic: ogłoszenia premiery, strony produktu, centrum pomocy i bloga Claude. Claude Design zmienia się szybko — w kwietniu był osobną aplikacją pod adresem claude.ai/design, od września działa w środku Claude — więc ten tekst aktualizujemy. Na końcu pokazujemy, jak sami użyliśmy go przy narzędziach SzybkoPisz.

Co to jest Claude Design

Anthropic pokazał Claude Design 17 kwietnia 2026 jako produkt z działu Anthropic Labs, na początku w wersji testowej dla płatnych planów. Pomysł jest prosty: zamiast rysować w programie graficznym, rozmawiasz o projekcie. Claude przygotowuje wersję na płótnie, Ty wskazujesz, co poprawić, a gotowy projekt eksportujesz albo przekazujesz dalej — do prezentacji, do kolegi z zespołu albo do programu, który zrobi z niego działającą stronę.

Różnica wobec zwykłego czatu: odpowiedzią nie jest opis ani kod do skopiowania, tylko widoczny projekt, który otwiera się obok rozmowy. Możesz w nim kliknąć element i zostawić przy nim komentarz, przeciągnąć go, zmienić tekst. Według Anthropic takie projekty to jeden z rodzajów „artefaktów”, czyli rzeczy, które Claude dla Ciebie robi i które można pokazać innym. Wszystkie zbierają się w zakładce Artifacts.

Co można zrobić w Claude Design

W ogłoszeniu premiery i na stronie produktu Anthropic wymienia te rodzaje prac. Dla zaczynającego najważniejsze są pierwsze dwie pozycje — to one odpowiadają na pytanie „jak to będzie wyglądać”.

Projekt może opierać się na Twoim systemie projektowym, czyli zestawie kolorów, krojów pisma i gotowych elementów marki. Claude potrafi go zbudować z plików, z repozytorium na GitHubie albo z kodu istniejącej aplikacji. Na początek nie jest potrzebny: pierwszy projekt zrobisz bez niego, a do tematu wrócisz, gdy będziesz chciał, żeby kolejne makiety wyglądały spójnie.

Gdzie działa i w których planach

Ile kosztuje Claude Design i czy jest darmowy

Osobnej opłaty za Claude Design nie ma. Jest dostępny w planach Free, Pro, Max, Team i Enterprise, a w firmach na planie Enterprise włącza się domyślnie od 15 października 2026. Projektowanie zużywa ten sam limit co rozmowy i Claude Code — według pomocy Anthropic osobnego, tygodniowego przydziału na projekty już nie ma. Większe zadanie, na przykład cała prezentacja, zużywa więcej. Gdy limit się skończy, projektowanie wraca po jego odnowieniu, chyba że masz włączone dodatkowe kredyty.

W praktyce: pierwszą makietę zrobisz za darmo, a jeśli projektujesz codziennie albo równolegle budujesz w Claude Code, szybciej dojdziesz do granicy darmowego planu. Ile kosztują plany płatne w złotych i jak działają limity, rozpisujemy w tekście ile kosztuje Claude Code — plany i limity.

Pierwszy projekt krok po kroku

Poniżej przebieg według oficjalnej pomocy, przełożony na sytuację kogoś, kto robi to pierwszy raz. Weź coś małego i prawdziwego: stronę swojej usługi, ekran aplikacji, o której myślisz, zaproszenie na wydarzenie.

1. Otwórz Claude i zacznij projekt

   Zaloguj się na claude.ai albo w aplikacji Claude. Napisz w rozmowie, że chcesz projekt, albo wybierz w zakładce Artifacts szablon Design. Jeśli nic się nie pojawia, sprawdź w ustawieniach, czy masz włączone wykonywanie kodu i tworzenie plików — artefakty bez tego nie działają.

2. Opisz cel, odbiorcę, układ i treść

   Pomoc Anthropic radzi podać cztery rzeczy: po co jest projekt, dla kogo, jak ma być ułożony i co ma się w nim znaleźć. Im konkretniej, tym mniej poprawek. Claude może dopytać o szczegóły — odpowiedz, zamiast prosić „zrób cokolwiek”.

3. Dołóż to, co już masz

   Zrzut ekranu strony, która Ci się podoba, logo, tekst oferty z pliku, zdjęcie szkicu narysowanego na kartce. Claude Design przyjmuje obrazy i dokumenty (Word, PowerPoint, Excel), a w ogłoszeniu premiery Anthropic opisuje też pobieranie elementów z działającej strony.

4. Poproś o dwa, trzy warianty

   Gdy nie wiesz, czego chcesz, poproś o kilka wersji i wybierz kierunek. Nate Parrott, projektant Anthropic, który budował Claude Design, radzi na blogu Claude zaczynać od szkieletu (ang. wireframe), gdy wygląd jeszcze nie jest ważny: powstaje szybciej, a Ty oceniasz układ, a nie ozdoby.

5. Poprawiaj na trzy sposoby

   Duże zmiany („przenieś cennik nad opinie”, „zrób wersję na telefon”) pisz w czacie. Drobne — kliknij element i zostaw przy nim komentarz. Ostatnie szlify, jak tekst, odstępy czy położenie, zrób sam na płótnie: przeciągnij, zmień rozmiar, wyrównaj.

6. Eksportuj albo udostępnij

   Przycisk Export w prawym górnym rogu daje plik .zip, PDF, PPTX, Google Slides, samodzielny plik HTML albo przekazanie do Claude Code. Przycisk Share wysyła link — projekt jest prywatny, dopóki go nie udostępnisz, a odbiorcy możesz pozwolić tylko oglądać, komentować albo edytować.

Jak opisać projekt, żeby wyszedł za pierwszym razem

Najczęstszy błąd na starcie to jedno zdanie w stylu „zrób mi ładną stronę dla firmy”. Claude zrobi wtedy coś poprawnego, ale niekoniecznie Twojego: we wspomnianym wpisie Nate Parrott pisze, że bez wskazówek Claude wybiera jedną ze swoich ulubionych estetyk, i radzi od razu podać kroje pisma i kolory. Lepszy opis mieści się w kilku linijkach i odpowiada na cztery pytania z pomocy Anthropic — to zwykłe pisanie, a nie projektowanie (dlaczego opis zadania to pisanie). Tak wygląda przykład, który możesz skopiować i przerobić:

Zaprojektuj stronę główną mojej pracowni ceramiki w Krakowie.
Cel: ludzie mają zapisać się na warsztaty dla początkujących.
Odbiorcy: dorośli 25–45 lat, pierwszy raz przy kole garncarskim.
Układ: duże zdjęcie u góry z przyciskiem „Zapisz się”, pod nim
3 rodzaje warsztatów, opinie uczestników, mapa dojazdu, stopka.
Styl: ciepły, spokojny, beżowe i ceglaste kolory, dużo światła.
Wersja na telefon jest ważniejsza niż na komputer.
Pokaż 2 warianty układu, najpierw bez dopracowanych kolorów.

Pisz po polsku i polskimi treściami — makieta z prawdziwymi nagłówkami pokaże więcej niż wypełniacz „lorem ipsum”, bo od razu widać, czy tekst mieści się w przycisku i czy strona nie robi się za długa. Jeśli coś trudno opisać, narysuj to na kartce, zrób zdjęcie telefonem i dołącz do rozmowy.

Z praktyki: makiety narzędzi SzybkoPisz

Tak pracowaliśmy nad darmowymi narzędziami w tym serwisie. 16 i 17 października 2026 w Claude Design powstały makiety czterech stron: testu szybkości pisania, licznika słów, licznika znaków i testera klawiatury. Opisaliśmy każdą stronę tak jak w przykładzie wyżej: komu ma służyć, co ma się dziać po wpisaniu tekstu, co ma być widać na telefonie.

Pierwsze wersje nie były gotowe do wdrożenia i nie musiały być. Ich zadaniem było pokazać układ, zanim ktokolwiek napisze linijkę kodu. Właściciel obejrzał makiety, wskazał, co zmienić, i dopiero poprawione wersje przenieśliśmy do kodu serwisu, przetestowaliśmy i wdrożyliśmy. Wszystkie cztery strony działają, są wymienione na liście darmowych narzędzi i możesz porównać je z tym, co opisujemy.

Najwięcej dała nam rzecz niewidoczna w gotowym produkcie: rozmowa o wyglądzie odbyła się na makiecie, a nie na działającym kodzie. Zmiana układu w makiecie to jeden komentarz. Ta sama zmiana w gotowej aplikacji to poprawianie kodu, testów i ponowne wdrożenie. Jak krok po kroku przenieść makietę do działającej aplikacji, opisujemy w osobnym studium przypadku na code2saas.

Claude Design a Figma, Canva i Lovable

To narzędzia, które często pojawiają się w tym samym zdaniu, ale robią różne rzeczy. Nie ma tu zwycięzcy — jest pytanie, czego potrzebujesz teraz.

Najuczciwsza rada dla zaczynającego: jeśli i tak płacisz za Claude albo korzystasz z darmowego planu, zacznij od Claude Design, bo nie musisz niczego instalować ani uczyć się interfejsu. Jeśli zatrudniasz projektanta, on najpewniej pracuje w Figmie — makieta z Claude Design może być wtedy dobrym materiałem na pierwszą rozmowę, a nie zamiennikiem jego pracy.

Ograniczenia, o których warto wiedzieć

• Nie ma jeszcze historii wersji. Zanim spróbujesz zupełnie innego kierunku, poproś Claude o zapisanie bieżącego projektu — inaczej powrót do poprzedniej wersji bywa trudny.
• Wspólna edycja jest podstawowa. Dwie osoby edytujące projekt naraz to według pomocy Anthropic funkcja, która może działać zawodnie. Lepiej: jedna osoba edytuje, reszta komentuje.
• Komentarze czasem nie docierają. Jeśli Claude nie reaguje na komentarz przy elemencie, wklej tę samą uwagę do czatu.
• Duże repozytoria spowalniają pracę. Gdy podłączasz kod dużej aplikacji, pomoc radzi robić to z poziomu Claude Code.
• Nowe elementy dodajesz myszą. Wstawienie na płótno nowej warstwy tekstu, kształtu czy notatki wymaga myszy albo gładzika — na telefonie raczej oglądasz i poprawiasz, niż projektujesz od zera.
• Makieta to nie aplikacja. Klikalny prototyp pokazuje, jak będzie, ale nie zapisuje danych, nie loguje użytkowników i nie przyjmuje płatności. To trzeba zbudować osobno.

Od makiety do działającej strony

Gotowy projekt możesz przekazać do Claude Code — narzędzia, które pracuje na plikach Twojego projektu i pisze kod (co to jest Claude Code i jak z nim pracować). Według Anthropic Claude Design pakuje wtedy projekt w paczkę, a Claude Code zaczyna od niej, zamiast odtwarzać wygląd ze zrzutu ekranu. W pomocy są dwie drogi: wysłanie do Claude Code na komputerze albo do Claude Code w przeglądarce. Jeśli jeszcze go nie masz, zacznij od tekstu jak zainstalować Claude Code krok po kroku.

Co dalej

• Zrób pierwszą makietę. Weź opis pracowni ceramiki z tego tekstu, podmień na swoją usługę i poproś o dwa warianty.
• Zdecyduj, czy budujesz sam. Czym i za ile — mapa narzędzi AI do kodowania dla zaczynających, a o tym, co dzieje się po pierwszym tygodniu — vibe coding: co to jest i jak zacząć bez ściany.
• Przenieś makietę do kodu. Zainstaluj Claude Code, a potem przekaż mu projekt przyciskiem Export.

Opis zadania dla Claude Code to ten sam rodzaj pracy co opis makiety — im sprawniej piszesz, tym szybciej idzie. Drogę od pomysłu do działającej rzeczy pokazuję w kursie VIBE, a pisanie poćwiczysz w darmowym trenerze pisania.