Poniższe notatki pochodzą z prezentacji „Full Tutorial: From Design to Code with Claude Code in 40 Minutes” przeprowadzonej przez Meaghan Choi, design lead dla Claude Code w Anthropic. Wszystkie opisane przemyślenia, obserwacje i strategie pochodzą od prelegentki.

TL;DR

Rewolucja w handoff-ie: Zamiast przekazywać mock-upy z Figmy, designerzy tworzą draft PR-y z działającym kodem
Trzystopniowy workflow: eksploracja pomysłów, zrozumienie bazy kodu, budowanie i dopracowywanie
Claude.md jako personalny asystent: konfiguracja AI specjalnie dla potrzeb designerów z systemem oznaczania ryzyka
Płynność ról w zespole: zachowanie ekspertyzy przy większej elastyczności w odpowiedzialności
Praktyczne narzędzia: kluczowe skróty klawiszowe i workflow do natychmiastowego wdrożenia
Szybki development: funkcje powstają organicznie, od wewnętrznych prototypów do publicznych wydań
Współpraca z inżynierami: budowanie partnerstwa przez pair programming i code review

Fundamentalna zmiana w pracy designera

Meaghan Choi obecnie spędza tyle samo czasu w Claude Code co w Figma. Ta proporcja ilustruje radykalną zmianę w sposobie podejścia do projektowania produktów cyfrowych.

Jak zauważa Choi, jeszcze kilka lat temu efektywne łączenie designu i programowania było zarezerwowane dla nielicznych „jednorożców” w branży. Dzisiaj AI demokratyzuje tę umiejętność, czyniąc ją dostępną dla każdego projektanta.

Tradycyjny proces przekazywania mock-upów inżynierom ustępuje miejsca nowemu podejściu. Zamiast dokumentów projektowych designerzy dostarczają draft PR-y zawierające działający kod wraz z opisem intencji projektowych. W rezultacie znika frustracja związana z prośbami o drobne poprawki wizualne, a designer może samodzielnie implementować ostatnie 10% dopracowania.

Problem „długu społecznego” w zespołach

Choi często odnosi się do problemu „ostatnich 10% szlifu” – drobnych detali wizualnych, które decydują o jakości końcowego doświadczenia. Proszenie inżyniera o takie zmiany bywa niezręczne, ponieważ to zadania o niskim priorytecie (tzw. P2), które odrywają go od ważniejszych prac. Co gorsza, zdarza się że po wdrożeniu okazuje się, iż pomysł projektanta wcale nie wygląda tak dobrze jak na makiecie.

Według Choi, AI rozwiązuje ten problem „długu społecznego”, pozwalając projektantom samodzielnie i bez presji eksperymentować bezpośrednio w kodzie.

Choi podkreśla fundamentalną prawdę o roli designera: „Nasza praca to wzięcie wszystkich informacji i opinii zwrotnych od użytkowników, inżynierów, product managerów i przetłumaczenie tego na działające doświadczenie produktowe. Ale to działające doświadczenie produktowe to kod”. Dlatego im szybciej designer rozumie implementację w kodzie, tym bardziej realistyczne będzie reprezentowanie rzeczywistego doświadczenia użytkownika.

Trzystopniowy workflow w praktyce

Choi wyodrębnia trzy główne zastosowania Claude Code w codziennej pracy projektowej:

Zero-to-one exploration – eksploracja nowych pomysłów bezpośrednio w kontekście rzeczywistej bazy kodu. W przeciwieństwie do izolowanych prototypów, rozwiązania powstają z uwzględnieniem istniejącej architektury aplikacji.

Understanding the codebase – faza badawcza poprzedzająca każdy nowy projekt. Choi prowadzi szczegółowe rozmowy z Claude’em o obecnej implementacji, architekturze systemu, a nawet konfiguracji system promptów. Analizuje nie tylko strukturę kodu, ale schodzi głębiej, badając logikę systemowych promptów, by w pełni zrozumieć mechanizmy działania danej funkcji.

Building and polishing – finalne dopracowywanie funkcji, zwykle po tym jak inżynierowie zbudowali podstawową infrastrukturę. Na tym etapie designerzy mogą autonomicznie implementować szczegółowe poprawki wizualne.

Prelegentka odnosi się do klasycznego modelu „double diamond” w projektowaniu, jednak podkreśla istotną różnicę. Claude Code przynosi największą wartość w pierwszych trzech fazach procesu projektowego dla osób nietechnicznych, ponieważ umożliwia dostęp do rzeczywistej bazy kodu już na etapie konceptualizacji.

Praktyczna demonstracja workflow

Podczas prezentacji Choi przeprowadziła demonstrację na przykładzie aplikacji Claude Cafe. Proces rozpoczęła od podstawowej komendy kierowanej do Claude’a: „help me run this locally”.

Kluczowym elementem jej podejścia jest systematyczność. Planning mode zawsze stanowi pierwszy krok – przed każdą zmianą Claude przygotowuje szczegółowy plan działania z podziałem na zrozumiałe etapy. Następnie wykorzystuje visual feedback loop poprzez eksport projektu jako PNG i instrukcje dopasowania implementacji do mock-upu.

Pomocne okazują się również dodatkowe funkcje:

Background bash (Control+B) – uruchamianie serwera deweloperskiego w tle podczas kontynuowania rozmowy z Claude
Auto-accept mode – pozwala Claude’owi autonomicznie wprowadzać zmiany w kodzie
Live preview – obserwowanie modyfikacji w czasie rzeczywistym w localhost

Choi formułuje ważną zasadę: kod stanowi najwyższą możliwą wierność prototypu. Feedback zebrany na podstawie statycznego obrazka różni się fundamentalnie od tego, który otrzymujemy gdy ktoś może wejść w interakcję z działającym prototypem. W rezultacie praca bezpośrednio w kodzie pozwala na znacznie szybsze tworzenie interaktywnych wersji, co prowadzi do zbierania bardziej wartościowych opinii na wczesnym etapie. Decyzja między wykorzystaniem Figma a implementacją w kodzie zależy od złożoności planowanych zmian oraz czasu potrzebnego na ich wykonanie. Czasami pyta Claude’a o oszacowanie trudności: „jak skomplikowane będzie wprowadzenie tej zmiany?”. Jeśli modyfikacja zajmuje minutę w Figma, ale 30 minut w kodzie, narzędzie projektowe może okazać się lepszym wyborem.

W praktyce prezentacje projektów w zespole przybierają różne formy – od prototypów Figma, przez w pełni działające aplikacje, po lokalne podglądy. Kod powinien być traktowany jako kolejna opcja prezentacji własnej pracy, podobnie jak wcześniej designerzy wybierali między mock-upami o niskiej i wysokiej wierności.

Claude.md jako personalny asystent projektanta

Choi opracowała spersonalizowany plik Claude.md, który funkcjonuje jako globalna konfiguracja dla wszystkich repozytoriów. Claude Code obsługuje hierarchiczne pliki Claude.md – istnieją pliki na poziomie workspace współdzielone przez zespół (struktura, architektura) oraz personalne pliki użytkownika.

System oznaczania ryzyka modyfikacji (🟢 niskie ryzyko, 🟡 średnie ryzyko, 🔴 wysokie ryzyko) pomaga w bezpiecznym poruszaniu się po kodzie. Choi dodała te oznaczenia po spowodowaniu swojego pierwszego incydentu w środowisku produkcyjnym. Jak relacjonuje: „wszyscy mówili mi, że zdarza się to każdemu, kto wypuszcza kod do produkcji”.

Plik zawiera instrukcje kierowane specjalnie do projektantów, które Choi utworzyła we współpracy z Claude’em poprzez iteracyjne udoskonalanie. Ta personalizacja sprawia, że wyniki Claude’a różnią się znacząco od standardowych odpowiedzi – są bardziej szczegółowe oraz dostosowane do potrzeb osoby bez głębokiej wiedzy technicznej.

Ewolucja ról w zespołach produktowych

Według Choi narzędzia AI prowadzą do większej płynności ról w zespołach produktowych. Odpowiedzialności stają się bardziej elastyczne, jednak ekspertyza w poszczególnych dziedzinach pozostaje kluczowa.

Przykład rozwoju funkcji Agents ilustruje ten nowy model pracy. Inżynier (Sid) zbudował prototyp podczas weekendu, następnie funkcja trafiła do wewnętrznej wersji Claude Code. Choi zaproponowała ulepszenia UX i wizualne, zespół przekazał uwagi, a po osiągnięciu stabilności funkcja została udostępniona publicznie.

W Anthropic wszyscy pracownicy używają Claude Code, dlatego stanowią najlepszych testerów własnego produktu. Funkcje ewoluują organicznie – na przykład tryb „learn” zaczął jako niestandardowa komenda slash zbudowana przez członka zespołu, który zauważył jej potencjalną przydatność dla innych.

Nie istnieją specyfikacje ani formalne procesy dla mniejszych funkcji. Rozwój przebiega naturalnie, a opinie zwrotne zespołu wskazują moment gotowości do publicznego wydania.

Praktyczne wskazówki dla projektantów

Kluczowe skróty klawiszowe:

Shift+Tab – przełączanie między trybem planowania a auto-accept
Control+V – wklejanie obrazów do pokazania Claude’owi nad czym się pracuje
Escape – natychmiastowe zatrzymanie działań Claude’a
Double Escape – powrót do historii poprzednich komend
–resume – powrót do poprzedniej sesji
/memory – aktualizacja personalnego Claude.md

MCP serwery

Rozszerzenia takie jak Figma MCP czy Playwright MCP dodają Claude’owi dostęp do dodatkowych narzędzi. Choi zaleca konsultację z zespołem inżynieryjnym w sprawie dostępnych serwerów MCP w organizacji.

Przewodnik dla początkujących

Choi rekomenduje projektantom rozpoczęcie nauki od Claude AI z artifacts, a następnie przejście do Claude Code. Kluczowe znaczenie ma partnerstwo z inżynierami – zespoły chętnie współpracują, ponieważ projektanci posiadający umiejętności kodowania przyspieszają całokształt pracy.

W Anthropic kultura „anyone can code” ułatwia ten proces, jednak w innych firmach Choi zaleca spędzenie całego dnia na pair programming z inżynierem. Takie podejście pomaga zrozumieć niepisane zasady wypuszczania kodu, konfigurację środowiska deweloperskiego oraz oczekiwania dotyczące wdrożeń.

Unikanie pułapki standardowych stylów AI

Choi ostrzega przed powszechnym problemem – modele AI często generują podobne style wizualne (purpurowe tła, standardowe komponenty Shadow CN Tailwind CSS). Jej rozwiązanie polega na całkowitym unikaniu używania Claude’a do zupełnie nowych projektów bez wizualnych podstaw. Zamiast tego zawsze dołącza screenshoty istniejących części aplikacji lub materiałów inspiracyjnych z instrukcją „zrób podobnie do tego”.

Podstawowe kroki do podjęcia:

Rozpocznij od Claude AI z artifacts (zrozumienie generowania kodu)
Przejdź do Claude Code po opanowaniu podstaw
Znajdź partnera inżyniera do współpracy i nauki
Naucz się podstaw terminala/CLI lub poproś inżyniera o wprowadzenie
Rozważ ukończenie kursu intro to React i Tailwind CSS (dla zmian front-endowych)

Choi podkreśla, że vibe coding stanowi odrębną umiejętność, różniącą się od tradycyjnego programowania. Obecna społeczność AI-assisted development charakteryzuje się otwartością na dzielenie wiedzą. X (Twitter) oraz GitHub stanowią główne miejsca nauki i wymiany doświadczeń.

Biblioteka przydatnych promptów

Na podstawie prezentacji Choi można wyodrębnić kluczowe prompty stosowane w codziennej pracy:

Uruchamianie i konfiguracja

„help me run this locally”
Zastosowanie: Na początku pracy z nowym repozytorium lub po pobraniu zmian

Planowanie i analiza

„can you provide an overview of the plan and your approach? Also break down this task into easy to understand steps and changes”
Zastosowanie: Przed każdą większą zmianą, szczególnie przy niepewności architektury. Choi podkreśla, że to jej standardowy krok wymuszający tryb planowania, który zapobiega zbyt pochopnemu działaniu AI i pozwala zweryfikować, czy dobrze zrozumiało polecenie

„how hard is this going to be to change?”
Zastosowanie: Przy podejmowaniu decyzji między implementacją w Figma a w kodzie

„how would you design this differently?”
Zastosowanie: Podczas poszukiwania alternatywnych podejść do problemu

Analiza istniejącego kodu

„how it currently works, how it was implemented today, down to what the system prompt is and how it’s configured, how it’s architected”
Zastosowanie: Na początku pracy z nową funkcją lub przed refaktoringiem

Implementacja wizualna

„can you update the header and image alignment so it looks more like this mock?” [+ załączony obraz]
Zastosowanie: Przy konkretnym projekcie do zaimplementowania

„hey, look at the existing setting page, specifically this setting, and re implement it this way”
Zastosowanie: Podczas dodawania nowej funkcji podobnej do istniejącej

„make it look something similar to this” [+ screenshoty inspiracji]
Zastosowanie: Aby uniknąć generycznych stylów AI

Konsystencja z systemem projektowym

„look at the existing component library before it finalizes any implementation decisions to make sure that we’re following design systems best practices”
Zastosowanie: Dodanie do personalnego Claude.md dla automatycznej konsystencji

Dodatkowe wyjaśnienia

„I often prompt for additional explanations”
Zastosowanie: Gdy Claude komunikuje się jak z inżynierem, a potrzebne są prostsze wyjaśnienia

Choi podkreśla fundamentalną zasadę: traktowanie Claude’a jak partnera w rozmowie, nie jak narzędzie do wykonywania poleceń.

Kluczowy wniosek

Narzędzie do kodowania przed kodowaniem

Standardowe myślenie: Narzędzia do AI-assisted coding są przydatne dopiero w fazie implementacji, gdy istnieje gotowy projekt i specyfikacja.

Rzeczywistość: Claude Code przynosi największą wartość w fazach explore, discover i design – jeszcze przed napisaniem pierwszej linii kodu produkcyjnego. Jak zauważa Choi: „Ludzie zakładają, że Claude Code to tylko development, ale kroki 1, 2 i 3 to właśnie tam narzędzie błyszczy dla osób nietechnicznych.”

Znaczenie tego podejścia: Traktowanie AI coding jako narzędzia do myślenia o produkcie (nie tylko pisania kodu) zapewnia dostęp do rzeczywistej architektury już na etapie konceptualizacji. Pomysły projektowe od razu konfrontują się z realnością techniczną.

Test praktyczny: Przy rozpoczynaniu następnego projektu, zamiast przechodzić bezpośrednio do Figma, najpierw zadaj Claude Code pytania o działanie podobnych funkcji w kodzie i sprawdź wpływ tych informacji na pierwotne koncepcje.

Ten wpis stanowi część kolekcji notatek z wartościowych podcastów, webinarów i innych materiałów edukacyjnych. Oryginalne źródło to transkrypt prezentacji „Full Tutorial: From Design to Code with Claude Code in 40 Minutes” autorstwa Meaghan Choi.

Tag: Projektowanie W Kodzie

Claude Code dla designerów – jak AI zmienia workflow od projektu do kodu #EN280