Polecenie /design w Claude Code: rysowanie interfejsów przed ich budową

Ludzie planują, Claude wykonuje

Anthropic przeanalizowało około 400 000 sesji Claude Code prowadzonych przez około 235 000 użytkowników i okazało się, że podział decyzji był nierówny. Ludzie podejmowali około 70% decyzji dotyczących planowania, czyli tego, co należy stworzyć. Claude podejmował około 80% decyzji dotyczących wykonania: który plik, jaka składnia, jakie polecenie. W ciągu siedmiu badań miesięcy liczba sesji związanych z naprawą uszkodzonego kodu spadła z 33% do 19%, natomiast korzystanie z oprogramowania operacyjnego i analiza wzrosły.

To rozkład wyjaśnia funkcję, którą Anthropic wprowadziło w tym tygodniu. Gdy agent przejmuje kontrolę nad wykonaniem, wąskie gardło przenosi się na tę część pracy, którą nadal wykonują ludzie, a w przypadku wszystkiego, co wymaga ekranu, planowanie odbywa się wizualnie. Zapisanie „stwórz stronę ustawień” nie może oznaczać nic konkretnego, jeśli nikt jeszcze nie widział tej strony. To jak opisywanie mebli w pokoju, do którego nikt nie wszedł.

Większość z nas tworzy coś, aby to sprawdzić. Pomysł, kod, renderowanie, niezadowolenie, przepisanie. Każdy odrzucony pomysł kosztuje nas najdroższą walutą, jaka istnieje.

Co się zmieniło

Claude Code i Claude Design mogą już ze sobą komunikować się. Musisz zarejestrować serwer MCP do projektowania i się zalogować:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login

Gdy połączenie zostanie nawiązane, projekt można włączyć do bazy kodu, a kod może stać się funkcjonalnym prototypem – komunikacja może odbywać się w obu kierunkach. Wszystko to istniało już przed tą tygodniem.

Nowością jest sam polecenie /design. Anthropic umieścił jego wczesną wersję prezentacyjną w Claude Code 17 sierpnia 2026 roku. Nate Parrott, projektant produktu, który stworzył Claude Design, ogłosił tę funkcję, a zespół Claude Code potwierdził to tego samego dnia. W interfejsie wiersza poleceń lub aplikacji na komputerze Claude tworzy teraz kilka edytowalnych mockupów interfejsu, zwanych artboardami, które są wyświetlane jako artefakt. Wybierasz jeden z nich, go modyfikujesz i prosisz Claude o jego stworzenie. Funkcja ta jest dostępna w planach Pro, Max, Team i Enterprise, a claude update ją pobiera.

„Dwa produkty mogą się synchronizować” w porównaniu z „tablice projektowe znajdują się w twoim terminalu” brzmi jak tematy związane z instalacjami hydraulicznymi, ale to zmienia koszt odrzuconej idei: wcześniej to czterysta linijek kodu JSX, a teraz około dziewięciu sekund przyglądania się. Ten proces staje się źródłem pomysłu – sześć wizualnych wariantów, pięć odrzuconych, jeden zaimplementowany.

Gdzie kiedyś odbywało się eksplorowanie

Przed użyciem tego narzędzia mieliśmy dwie opcje, a żadna z nich nie była tania.

Pierwszą było opisanie interfejsu w formie prozy i modlenie się o powodzenie. Wpisujemy trzy akapity na temat odstępów między elementami i hierarchii, Claude zwraca komponent, otwiera się localhost, ale coś idzie nie tak w sposób, którego prompt nie mógł przewidzieć. Wtedy musimy edytować kod, aby naprawić decyzję dotyczącą układu, którą można było podjąć po trzydziestu sekundach przyglądania się.

Drugi sposób polegał na otwarciu strony claude.ai/design, stworzeniu tam prototypu oraz dostosowaniu wyniku do rzeczywistych komponentów w repozytorium. To dobry podejście, które często nadal jest właściwe. Problemem jest przechodzenie między narzędziami, a właśnie to utrudnia eksplorację: wybieramy jedną drogę i pomijamy sześć innych, ponieważ otwarcie kolejnej karty wydawało się równoznaczne z dokonaniem ostatecznej decyzji.

Historia samego Parrotta wyjaśnia dlaczego. Pod koniec 2025 roku był jedynym projektantem w Claude Code dla VS Code, razem z dwoma inżynierami. W listopadzie pojawiła się wersja Opus 4.5, inżynierowie znacznie przyspieszyli pracę, więc on musiał dotrzymać ich tempa. Jego pierwszą próbą było wklejenie wyników z terminala i zrzutów ekranu do Claude i poproszenie o projekt – według jego słów nie poszło to dobrze. Rozwiązaniem było przekazanie Claude obrazka HTML zamiast pola tekstowego, ponieważ HTML to bogate medium wizualne, a Claude radzi sobie z jego obsługą niezwykle dobrze. To doprowadziło do powstania Claude Design, a /design przenosi ten sam proces tworzenia projektów do terminala, obok kodu.

Habity, które sprawiają, że to działa

Parrott opublikował swoje własne zasady dobrych praktyk w lipcu. Przenoszą się one niemal w całości na środowisko CLI i są bardziej przydatne niż jakakolwiek lista funkcji.

Pomyśl przed tym, jak sformułujesz zapytanie. On poświęca rzeczywisty czas na przygotowywanie zapytań przed rozpoczęciem projektowania – czasem dyktuje je, a czasem wpisuje do aplikacji Notatki w telefonie siedząc na kanapie. Określenie tego, czego chcesz, to odrębna czynność od samego żądania, a niejasne zapytanie powoduje marnotrawstwo zasobów na coś, co odrzucisz.

Opisz wygląd. Bez żadnych wskazówek Claude skłania się ku kilku ulubionym estetykom, które od razu byś rozpoznał. Podaj mu czcionki i kolory, twórz tablicę inspiracji albo poproś go o zaproponowanie kombinacji czcionek i kolorów, a następnie dyskutuj z nim, aż jedna z nich będzie odpowiednia. Już sama ta praktyka sprawia, że wynik przypomina twój produkt, a nie każdą stronę generowaną przez sztuczną inteligencję z ostatnich półtora roku.

Zacznij od szkiców, gdy wierność wizualna może poczekać. Są szybsze i pomagają Claude’owi skupić się na strukturze, a nie na detalach wizualnych. Podczas gdy nadal decydujesz się między paskiem bocznym a górnym do filtrów, gradienty tylko dodają zamieszania. Spróbuj ośmiu pomysłów strukturalnych, zanim dopracujesz jeden.

Zaproś dziesięć propozycji, a potem je połącz. Większość z nich nie będzie dobra, i to jest normalne. Parrott sugeruje wybrać opcję B w połączeniu z elementami z opcji D i poprosić o pięć wariacji łączących je ze sobą.

Ostatnie kroki wykonaj ręcznie. Bezpośrednie edycje na obrazku, takie jak przestawianie elementów, usuwanie, zmiana rozmiaru oraz edycja tekstu lub kolorów, nie kosztują żadnych tokenów. Prośba o dokonanie tych samych zmian jest droga, a ustawienie elementów łatwiej sprawdzić gołym okiem niż opisać. Przestań pisać zdania na temat odstępów.

Szkicuj i wskazuj. Jeśli masz w głowie układ bez słów, narysuj go na papierze i sfotografuj. Zamiast pisać akapit o tym, który element masz na myśli, kliknij go i opisz go ustnie.

Anatomia skutecznego polecenia

Te nawyki sprowadzają się do użytecznego wzoru składającego się z pięciu pol. Pominąwszy jedno z nich, doświadczysz przewidywalnej porażki.

Liczba. Liczba kierunków, których chcesz. Podaj konkretną liczbę, w przeciwnym razie otrzymasz losowy wynik. Sześć nadaje się do wireframe’ów, a trzy do wersji o wysokiej jakości.

Jakość. Wireframe czy wersja dopracowana? Określ to, ponieważ model ma tendencję do dążenia do doskonałości, a właśnie wtedy marnuje się czas i zasoby.

Obiekt. Jedna określona, nazwana powierzchnia, np. panel ustawień powiadomień, stan początkowy po pierwszym uruchomieniu lub widok szczegółów faktury. „Panel sterowania” jest zbyt ogólny.

Ograniczenia wynikające z kodu. Które istniejące komponenty muszą się pojawić. Właśnie tutaj przydaje się interfejs wiersza poleceń, ponieważ Claude potrafi je odczytać. Nazwij je w każdym razie – lepiej mieć coś określonego niż polegać na przypuszczeniach.

Kierunek estetyczny lub wyraźne odroczenie decyzji. Wymień fonty i kolory albo napisz „tylko struktura, na razie ignorować styl wizualny”. Milczenie to jedyna opcja, która zawsze przynosi negatywne skutki, ponieważ sprawia, że stosuje się domowy styl.

/design 6 wireframe options for the invoice detail view.
Reuse DataTable and StatusPill from src/components.
Structure only, no styling yet.

Porównaj to z tym, co ludzie zwykle wpisują najpierw, /design an invoice page. Polecenie jest takie samo, ale wynik jest zupełnie inny.

Własne zalecenia Anthropic dotyczące formułowania promptów dla Claude Design pokrywają się z tymi radami i warto je mieć przy sobie: określ cel, układ, treść oraz grupę odbiorców. Pięć wymienionych powyżej elementów służy do uzyskania różnorodności, natomiast wersja Anthropic nadaje się do stworzenia jednego dobrego wyniku, więc używaj jej, gdy już wiesz, czego chcesz.

Szybki test, czy prompt spełnił swoją funkcję: przejrzyj otrzymany wynik i sprawdź, czy opcje różnią się pod względem hierarchii, czy tylko koloru. Sześć wersji opartych na tej samej architekturze informacji wskazuje na prompt zbyt wąski lub na zbyt wczesne żądanie dopracowania. Celem jest sześć naprawdę różnych odpowiedzi na pytanie „co jest priorytetem na tym ekranie”. Płacisz za różne decyzje, a nie za różne palety kolorów.

Łączenie twojego rzeczywistego systemu projektowego

/design-sync integruje twój lokalny system projektowy z Claude Design, dzięki czemu generowane elementy pochodzą bezpośrednio z twoich komponentów, a Claude nie tworzy klas przycisków od zera. Może czytać dane z repozytorium GitHub, plików projektowych, załadowanych materiałów lub lokalnej bazy kodu, a system można nazwać od razu: /design-sync Acme DS.

Dwa aspekty wymagają planowania. W dokumentacji Anthropic podano, że pierwsze synchronizowanie sprawdza każdy komponent i może trwać kilka godzin w przypadku dużego repozytorium, więc należy je rozpocząć przed lunchem, a nie tuż przed prezentacją. Centrum pomocy wskazuje również, że duże bazy kodu mogą powodować opóźnienia, i zaleca łączenie ich za pośrednictwem Claude Code zamiast przeglądarki. Ponadto, ponieważ implementacja obecnie koncentruje się na projektach React, Vue i Svelte, te projekty wymagają, aby Claude czytał komponenty bezpośrednio w trakcie sesji.

Jedna trudność administracyjna: Claude Design jest wyłączony domyślnie w planach Enterprise, więc administrator musi go włączyć, zanim cokolwiek to zadziała.

Ile to kosztuje

Claude Design nie ma już własnego limitu do śledzenia. Użycie zasobów pochodzi z puli dzielonej z Claude Chat, Claude Code i Cowork, a Anthropic jasno wskazuje, że złożone projekty, duże bazy kodu oraz liczne iteracje wymagają większych zasobów. Wcześniej istniał oddzielny tygodniowy limit, ale już go nie ma.

W interfejsie CLI odczuwa się to bardziej niż w wersji internetowej. Zanim zlecisz stworzenie kilku pełnych mockupów, sesja zawiera już zindeksowaną bazę kodu oraz trwającą rozmowę. Gdy osiągniesz swój limit, Claude Design będzie niedostępny, dopóki nie zostanie on przywrócony.

Sposobem na obniżenie kosztów jest odwrócona lista dobrych praktyk: ograniczone funkcje zamiast rozwiązań wieloekranowych, szkice przed wersją o wysokiej rozdzielczości oraz ręczne edycje na płótnie graficznym dla ostatnich 10%, które są bezpłatne.

Czego nie robi /design

Parrott jasno określa zakres zadań. Claude Code służy do pisania oprogramowania produkcyjnego, natomiast Claude Design obejmuje resztę – czyli wczesne koncepcje, współpracę oraz uzyskanie zgody przed rozpoczęciem pracy nad projektem. Powiedział to jeszcze przed pojawieniem się /design; płótno graficzne w terminalu usuwa te granice. Nadal obowiązuje inny podział: rozbieżności z jednej strony, konwergencja z drugiej, obie w ramach jednej sesji.

Polecenie to nie przejmuje kontroli nad pętlą budowania. Dodaje natomiast krok planowania wizualnego przed nią. Można eksplorować różne opcje na planszy, wybrać jedną i wrócić do zwykłego Claude Code w celu implementacji, testowania, refaktoryzacji oraz wykonywania pozostałych czynności niezbędnych do stworzenia oprogramowania.

Może istnieć zaledwie od kilku dni, co jest widoczne. Projekty przechodzą do etapu budowania, ale nadal muszą być ręcznie zapisywane. /design nie występuje w oficjalnej dokumentacji poleceń Claude Code, podczas gdy /design-login i /design-sync są tam wymienione. Zachowanie tego narzędzia prawdopodobnie się zmieni.

Którą powierzchnię używać

Używaj /design w Claude Code, gdy wyniki mają zostać wkrótce umieszczone w repozytorium, które masz zaktualizowane. Kluczowym elementem jest bliskość kodu.

Korzystaj z claude.ai/design, gdy odbiorcą jest osoba: prezentacja, jednostronicowy dokument, strona docelowa lub prototyp do testowania użytkowników – w zasadzie cokolwiek, co interesariusz może otworzyć w przeglądarce bez terminala. Narzędzie to eksportuje pliki PDF, PPTX, samodzielne pliki HTML oraz .zip i przesyła prace do Canvy, Miro, Replit, Vercel oraz narzędzi pokrewnych do Figma, między innymi.

Istnieją dwie ścieżki przetwarzania, dzięki czemu praca rozpoczęta w jednej może zostać przeniesiona do drugiej. Projektant bez lokalnego środowiska programistycznego powinien traktować aplikację internetową jako bazę operacyjną, a przekazywanie prac jako most łączący oba środowiska. Inżynier, który myśli w kategoriach repozytoriów, korzysta z opcji /design.

Jeśli Figma jest twoim źródłem prawdy

Wybór nie jest obowiązkowy. 17 lutego 2026 roku Figma i Anthropic wprowadziły Code to Canvas – narzędzie, które przesyła renderowaną interfejs użytkownika z Claude Code do Figma w postaci klatek, które można edytować, a nie jako statyczne zrzuty ekranu. Zainstaluj ten plugin:

claude plugin install figma@claude-plugins-official

Następnie otwórz /mcp w sesji, połącz się z zdalnym serwerem Figma i zaloguj. Jeśli pojawi się wpis figma-desktop, wyłącz go, ponieważ jest to lokalny serwer tylko do odczytu i koliduje z zdalnym. Po tym kliknięcie „wyślij to do Figma” uruchamia funkcję generate_figma_design.

Część osób napotkała tu problemy. Tematy na forum społecznościowym Figma opisują sytuacje, gdy proces utknął w nieskończonej pętli przetwarzania, co skończyło się pustymi plikami, chociaż przynajmniej jeden programista udało się to rozwiązać po uproszczeniu strony. Przed obiecywaniem czegokolwiek projektantowi przetestuj to na czymś tymczasowym.

Krótko mówiąc, /design przeprowadza eksplorację zanim powstanie jakikolwiek kod, natomiast Code to Canvas bierze już istniejący kod i umieszcza go z powrotem na tablicy do omówienia przez zespół.

Pierwsze uruchomienie

Wybierz funkcję, nad którą pracujesz, ale której jeszcze nie zaimplementowałeś, i ogranicz jej zakres: panel, okno modalne, strona ustawień. Uruchom claude update, otwórz sesję w odpowiednim repozytorium i zacznij od:

/design 6 wireframe options for a notification preferences panel.
Use our existing card and toggle components. Structure only,
no color or polish yet.

Przejrzyj wszystkie sześć i upewnij się, że rzeczywiście nie zgadzają się co do hierarchii. Odrzuć cztery. Poproś o pięć wersji remiksowanych tych dwóch, które pozostały. Wybierz zwycięzcę, poproś o jedną wersję o wysokiej jakości z dokładnie określonymi fontami i kolorami, a także ręcznie popraw rozstaw elementów na obrazku, a nie poprzez opisy. Powiedz „wdroż to” dopiero wtedy.

Zmierz czas. Całe badanie powinno zająć mniej czasu niż jedna runda pytań typu „czy możesz przenieść przyciski na prawą stronę” w kodzie, a układ, który ostatecznie uzyskasz, to taki, który sam wybrałeś i nie pogodziłeś się z innym.

To jest prawdziwa zmiana – mniejsza i bardziej praktyczna niż te rozmowy o transformacji branży, które zwykle towarzyszą takim publikacjom. Kodowanie przy użyciu AI już wcześniej sprawiło, że wdrożenie stało się tanie. Teraz też złe pomysły można łatwo odrzucić. Agent zajmuje się większością aspektów technicznych, a możliwość ich zobaczenia doskonali twoje rozumienie tego, co należy zrobić – co zawsze było twoją rolą.