Czteroetapowy pipeline projektowy AI

Fala premier modeli z kwietnia 2026 — Claude Design (2026-04-17), GPT Image 2 (2026-04-21) oraz GPT-5.5 Thinking / Pro (2026-04-23) — zmienia sposób, w jaki mały zespół może dostarczać UI. Żaden pojedynczy model nie jest najlepszy w każdym kroku, ale złożone we właściwej kolejności potrafią skrócić drogę od “szkicu na serwetce” do “produkcyjnego kodu z udokumentowanym systemem projektowym” z tygodni do popołudnia.

Ta strona opisuje tę kompozycję: czteroetapowy pipeline, który przekazuje pojedynczy pomysł produktowy w dół łańcucha specjalistów, gdzie każdy z nich produkuje weryfikowalny artefakt dla następnego.

Dlaczego pipeline z wieloma modelami pokonuje jedno narzędzie

Każdy model ma inny kształt mocnych stron. GPT Image 2 renderuje wiernie na poziomie pikseli makiety UI, w tym mały tekst, gęste układy oraz wielojęzyczne etykiety — rzeczy, na których wykładały się starsze modele dyfuzyjne. GPT-5.5 Pro łączy okno kontekstu 1M z silnym rozumowaniem o HTML/CSS/JS, więc może jednocześnie utrzymać w głowie makietę, materiały referencyjne oraz długi, jednoplikowy prototyp. Claude Design myśli systemowo — skale typografii, tokeny kolorów, warianty komponentów, macierze stanów — i pakuje wynik w pakiet przekazania (handoff bundle). Claude Code, Codex i Cursor są świadome repozytorium, więc finalne tłumaczenie do Twojego stacku respektuje istniejący już kod.

Uruchom je w sekwencji, a każde przekazanie jest najlepszą wersją siebie. Spróbuj użyć któregokolwiek z nich do całej pracy, a dostaniesz typowe tryby porażki: model obrazu, który nie potrafi rozumować o maszynach stanów, model tekstowy bez zmysłu wizualnego, narzędzie projektowe, które nie zna Twojego systemu budowania, lub agent kodujący, który wymyśla układ od zera.

Pipeline w jednym spojrzeniu

1. Makieta

GPT Image 2 w ChatGPT. Wizualne ideowanie z referencji i briefu. Wynik: 01-mockup.png (4K).

2. Prototyp HTML

GPT-5.5 Pro / Thinking w ChatGPT. Jednoplikowy index.html z realistycznym tekstem i każdym stanem interaktywnym. Wynik: 02-prototype.html.

3. System projektowy

Claude Design. Wyciąga tokeny, komponenty oraz warianty stanów; produkuje wieloekranowy flow. Wynik: pakiet 03-handoff/.

4. Kod + dokumentacja

Claude Code, Codex lub Cursor. Tłumaczy pakiet przekazania na tokeny, szkielety komponentów i DESIGN.md. Wynik: PR.

Jakie subskrypcje są potrzebne

• Etapy 1–2 używają modeli OpenAI. Użyj ChatGPT Pro (preferowany — daje GPT-5.5 Pro oraz Image 2 w pełnym 4K) lub ChatGPT Plus z Thinking jako fallback (GPT-5.5 Thinking i Image 2 w 1K/2K).
• Etap 3 używa Claude Design. Dostępny dla subskrybentów Claude Pro, Max, Team oraz Enterprise (research preview).
• Etap 4 używa Claude Code, Codex CLI lub Cursor — wybierz to, w czym już pracujesz.

---

Etap 1 — GPT Image 2: wizualne ideowanie

GPT Image 2 jest dobry w tym, w czym starsze modele obrazów były słabe: czytelny tekst UI, ustrukturyzowane układy oraz spójna typografia w obrębie jednej kompozycji. To czyni go realnym narzędziem do pierwszego szkicu produktowego UI, nie tylko generatorem moodboardów.

1. Otwórz świeży wątek w ChatGPT. Pro jest preferowany, ponieważ Image 2 renderuje w 4K — mały tekst UI pozostaje czytelny, gdy go powiększysz. W Plus z Thinking dostaniesz 1K/2K, co wystarcza do wczesnego ideowania.

2. Załącz referencje — do 16. Zrzuty ekranu konkurencji, Twój istniejący brand guide, screenshot Twojego obecnego produktu, dwa-trzy obrazy moodboardowe. Image 2 używa ich jako kontekstu wizualnego, nie tylko inspiracji.

3. Promptuj z jawną strukturą. Nie proś o “stronę pricingową SaaS” — opisz regiony, wibrację typografii i treść. Przykład:

   Wygeneruj makietę UI produktu w 4K dla strony cennika z trzema planami
   (Free, Pro, Team). Układ trójkolumnowy, hojne marginesy, bezszeryfowe
   nagłówki (zbliżone do Inter), ciepło-neutralne tło. Każda karta pokazuje:
   nazwę planu, cenę z sufiksem /mc, czteroliniową listę cech z odhaczeniami,
   jeden przycisk CTA. Karta Pro lekko podniesiona z subtelną akcentową
   obwódką. Nagłówek ma placeholder logo po lewej oraz Sign In / Get Started
   po prawej. Dopasuj ton wizualny do dołączonych referencji.

4. Iteruj w języku naturalnym. “Zacieśnij odstępy w drugiej karcie.” “Zamień ciepły szary na chłodniejszy neutralny.” “CTA Pro potrzebuje więcej kontrastu.” Image 2 trzyma kompozycję stabilnie między edycjami, więc możesz dopracowywać bez zaczynania od zera.

5. Zapisz artefakt. Wyeksportuj finalny obraz jako design/01-mockup.png w swoim projekcie. To wejście do etapu 2 — musi mieszkać tam, skąd możesz go załączyć.

Notatka

Zanim przejdziesz dalej, uruchom pętlę oceny. Makieta 6/10 wyprodukuje prototyp 6/10. Zobacz Pętla oceny i iteracji.

---

Etap 2 — GPT-5.5 Pro / Thinking: pełny prototyp HTML

To tutaj makieta staje się klikalną rzeczą. Okno kontekstu 1M w GPT-5.5 Pro ma tu znaczenie — może utrzymać Twoją makietę, materiały referencyjne, brief oraz długi jednoplikowy wynik HTML jednocześnie, więc nie gubi szczegółów w trakcie.

1. Zostań w tym samym wątku. Nie otwieraj nowej rozmowy. Model już ma makietę, referencje oraz język, którego użyłeś przy iteracji — to jest kontekst, który chcesz nieść dalej.

2. Załącz 01-mockup.png i poproś o jednoplikowy prototyp. Ograniczenie do jednego pliku ma znaczenie: zmusza model do podjęcia konkretnych decyzji w jednym miejscu i daje Ci artefakt, który otwiera się w każdej przeglądarce bez konfiguracji.

   Zbuduj index.html, który dopasowuje się do załączonej makiety
   pikselowo wiernie. Ograniczenia:
   - Jeden samowystarczalny plik HTML. Tailwind przez CDN to jedyna
     zewnętrzna zależność.
   - Semantyczny HTML (header, main, section, footer; właściwa hierarchia
     nagłówków).
   - Realistyczny tekst — bez lorem, bez "Cecha 1 / Cecha 2".
   - Każdy element interaktywny ma stany hover, focus, active i disabled.
     Pokaż disabled wyszarzonym CTA planu Free.
   - Tylko vanilla JS — odtwórz interaktywność inline. Bez Reacta,
     bez kroku build.
   - Mobile-first responsive: 1 kolumna na mobile, 3 kolumny od md w górę.

3. Recenzuj klikając, nie czytając. Otwórz 02-prototype.html w przeglądarce, przeleć przez całość Tabem, najedź na wszystko, zmień rozmiar okna. Błędy, które tu znajdziesz, są tanie do naprawy; te same błędy po wybraniu frameworka i biblioteki komponentów są drogie.

4. Iteruj w tym samym wątku. “Uniesienie karty Pro przy hover wydaje się ciężkie — spróbuj miększego cienia.” “Dodaj pierścień focus dopasowany do akcentu marki.” Każda iteracja zastępuje plik; commituj każdą wersję do folderu prototype/, jeśli chcesz później porównywać A/B.

5. Zapisz artefakt. design/02-prototype.html. To jest to, nad czym Claude Design będzie rozumować w etapie 3.

Dlaczego HTML przed jakimkolwiek frameworkiem? Prototyp jest kontraktem o układzie, tekście i stanach. Walidacja tego kontraktu w czystym HTML nic nie kosztuje. Walidacja go po podłączeniu Reacta, wybraniu biblioteki routingu i frameworka komponentów kosztuje dni. Pipeline przesuwa każdą decyzję maksymalnie w lewo.

---

Etap 3 — Claude Design: system projektowy + pakiet przekazania

GPT-5.5 wyprodukował jedną dobrze zaprojektowaną stronę. Zadaniem Claude Design jest zamienić tę pojedynczą stronę w system — tokeny, skale, komponenty, macierze stanów — i zastosować ten system w pozostałej części flow produktu.

1. Otwórz Claude Design i załącz oba pliki: 01-mockup.png oraz 02-prototype.html. Claude Design akceptuje obraz i HTML jako wejście, a użycie obu daje mu więcej sygnału o tym, co jest zamierzone, a co przypadkowe w prototypie.

2. Poproś go o wyciągnięcie systemu, nie skopiowanie. Prompt wykonuje pracę odróżniania “odstępy, których akurat użyłem” od “reguły odstępów, której projekt przestrzega”:

   Wyciągnij system projektowy z tych dwóch artefaktów:
   - Skala typograficzna (rozmiary, wagi, wysokości linii, zamierzone
     zastosowanie).
   - Tokeny kolorów (semantyczne nazwy jak "surface", "accent",
     "text-muted", nie tylko wartości hex).
   - Skala odstępów (mały zestaw wartości używanych konsekwentnie).
   - Warianty komponentów (karty, przyciski, inputy) z każdym stanem.
   - Macierz stanów na komponent (default, hover, focus, active, disabled,
     loading, error).
   Następnie zastosuj ten system w 6-ekranowym flow: strona cennika
   (oryginalna), checkout, dashboard konta, ustawienia rozliczeń,
   modal upgrade'u planu oraz pusty stan "subscription paused".

3. Iteruj wewnątrz Claude Design. Użyj edycji inline (“zmień tę kartę, by używała tokena drugorzędnej powierzchni”) oraz czatu (“pierścień focus jest niespójny między ekranami — wybierz jeden i zastosuj”) aż do momentu, gdy system jest naprawdę spójny. To etap, na którym system przechodzi z “prawie dobry” w “faktycznie dobry” — nie pomijaj go.

4. Wyeksportuj pakiet przekazania. Użyj Save as folder (nie Canva, nie PPTX — te są do przeglądu przez interesariuszy, nie do inżynierii). Wyeksportuj też standalone HTML jako sanity check, który możesz otworzyć offline. Pakiet przekazania to jest to, co czyta etap 4.

5. Zapisz artefakt. design/03-handoff/ (eksport folderu). Pakiet zawiera metadane, których Claude Code potrzebuje, by przetłumaczyć czysto: nazwy tokenów, listy komponentów, macierze stanów.

Wskazówka

Pakiet przekazania (handoff bundle) to unikalna wartość Claude Design w tym pipeline’ie. Bez niego wysyłasz do etapu 4 zrzut ekranu i masz nadzieję. Z nim wysyłasz do etapu 4 ustrukturyzowaną specyfikację — nazwy tokenów, kontrakty komponentów, oczekiwania stanów — a wynikowy kod jest dramatycznie bardziej spójny.

---

Etap 4 — Claude Code / Codex / Cursor: dokumentacja + kod produkcyjny

Pakiet przekazania trafia do Twojego repozytorium i zostaje przetłumaczony na faktyczny kod. Wybierz agenta, który pasuje do Twojego istniejącego workflow — prompt jest mniej więcej taki sam dla wszystkich trzech.

Claude Code

Uruchom z roota repozytorium:

Przeczytaj design/03-handoff/ oraz istniejący codebase. Wyprodukuj
trzy rzeczy, w tej kolejności, commitując po każdej:

1. Plik z tokenami w src/styles/tokens.css mapujący każdy token z
   pakietu przekazania na CSS custom property. Użyj nazw semantycznych
   z pakietu, nie surowych wartości.

2. Szkielety komponentów w src/components/, jeden na komponent z
   pakietu. Każdy szkielet renderuje kontrakt wizualny (każdy stan
   z macierzy stanów), ale zostawia logikę biznesową jako TODO.
   Dopasuj się do istniejących konwencji projektu pod kątem struktury
   plików, typowania propsów i eksportów.

3. DESIGN.md w roocie repo dokumentujący system: tokeny, skalę
   odstępów, listę komponentów z macierzami stanów oraz krótką
   notatkę o tym, jak dodać nowy komponent. To źródło prawdy, które
   przeżyje pakiet przekazania.

Nie implementuj logiki biznesowej, routingu ani fetchowania danych.
Tylko kontrakt wizualny.

Claude Code jest najlepszy na tym etapie, gdy chcesz tłumaczenia świadomego repozytorium — czyta najpierw istniejące komponenty i dopasowuje ich styl.

Codex CLI

Uruchom w TUI Codeksa i użyj tej samej trzykrokowej instrukcji co w zakładce Claude Code. Interaktywny TUI pozwala recenzować każde wywołanie narzędzia (zapis pliku, uruchomienie polecenia) przed jego wykonaniem — to jest naturalna powierzchnia recenzji dla przebiegu masowej generacji.

codex "Przeczytaj design/03-handoff/ oraz istniejący codebase. Wyprodukuj ..."

Jeśli chcesz, by każdy zapis był jawnie bramkowany, uruchom z -a untrusted — to jedyny tryb, który pyta przed każdą akcją. Każdy inny tryb zatwierdzeń auto-zatwierdza zapisy i pomija recenzję, której oczekuje od Ciebie ten prompt: on-failure auto-zatwierdza w przypadku sukcesu (pyta tylko przy porażkach), on-request auto-zatwierdza, chyba że samo narzędzie eskaluje, never nigdy nie pyta, a --full-auto auto-zatwierdza wszystko w sandboksie.

Cursor

Otwórz projekt w Cursorze, przeciągnij design/03-handoff/ do kontekstu Composera i użyj tej samej trzykrokowej instrukcji co w zakładce Claude Code.

Cursor jest właściwym wyborem, gdy chcesz przeplatać ręczne edycje z przebiegiem AI — akceptując część szkieletów komponentów takimi jakie są, przepisując inne w miejscu i utrzymując pętlę ciasno wewnątrz edytora.

Wynikiem jest PR zawierający tokeny, szkielety komponentów oraz DESIGN.md. Logika biznesowa pojawia się w kolejnym PR-ze; ten dotyczy wyłącznie kontraktu wizualnego.

---

Przykład end-to-end: strona cennika

Ta sama funkcjonalność prześledzona przez wszystkie etapy z faktycznymi promptami. Strona cennika to przydatny przykład, ponieważ ćwiczy typografię, układ, tekst, każdy stan interaktywny oraz kompozycję komponentów na pojedynczym ekranie.

1. Wejście etapu 1. Trzy strony cennikowe konkurencji jako referencje; brand guide PDF; jednoakapitowy brief (“Trzy plany — Free, Pro za $19/mc, Team za $79/mc. Pro to plan rekomendowany, wyróżniony wizualnie.”).

   Prompt etapu 1. Powyższy prompt makiety 4K z dodaną notatką o planie rekomendowanym.

   Wynik etapu 1. design/01-mockup.png — pojedynczy obraz 4K pokazujący układ trójkartowy z realistycznymi nazwami planów, cenami i listami cech.

2. Wejście etapu 2. 01-mockup.png plus oryginalny brief.

   Prompt etapu 2. Powyższy prompt jednoplikowego HTML, z jawnie wymaganym stanem disabled na CTA planu Free (żebyśmy widzieli traktowanie pustego/wyłączonego stanu w designie).

   Wynik etapu 2. design/02-prototype.html — otwiera się w przeglądarce, każdy przycisk ma stany hover/focus/disabled, mobile zwija się do jednej kolumny.

3. Wejście etapu 3. 01-mockup.png, 02-prototype.html.

   Prompt etapu 3. Powyższy prompt ekstrakcji systemu z 6-ekranową listą zastosowań.

   Wynik etapu 3. design/03-handoff/ zawierający tokeny, komponenty, macierze stanów oraz 6 ekranów, które wszystkie używają tego samego systemu.

4. Wejście etapu 4. design/03-handoff/, istniejący codebase.

   Prompt etapu 4. Powyższa trzykrokowa instrukcja.

   Wynik etapu 4. PR z src/styles/tokens.css, src/components/{Card,Button,Plan,Modal,EmptyState,...}.tsx oraz DESIGN.md. Następny PR podpina routing, Stripe i edycję tekstu — ale to są teraz odsprzężone problemy.

Co daje Ci ten pipeline

• Szybsze ideowanie. Droga od briefu do klikalnego prototypu to godziny, nie dni.
• Brak pętli “ten projekt jest zły” późno w implementacji. Błędy układu i tekstu są łapane na etapie 2, gdzie naprawa to re-prompt, nie refaktor.
• Spójny system projektowy od pierwszego dnia. Tokeny i komponenty w Twoim repo pochodzą bezpośrednio z systemu, który model przemyślał — nie są ćwiczeniem z dorabiania post factum.
• Dokumentacja, która odzwierciedla to, co naprawdę zostało zbudowane. DESIGN.md jest generowany z tego samego pakietu przekazania, który wyprodukował komponenty, więc domyślnie pozostaje zsynchronizowany.
• Punkty kontrolne, do których możesz wrócić. Artefakt każdego etapu mieszka w design/. Jeśli etap 4 wyprodukował coś nie tak, nie restartujesz od briefu — restartujesz od etapu 3.

Bramka jakości na każdym przekazaniu

Każde przekazanie w tym pipeline’ie powinno przejść próg jakości 0→10 zanim przejdzie dalej. Makieta 6/10 składa się w prototyp 6/10, system projektowy 6/10 i kod 6/10. Zobacz Pętla oceny i iteracji dla szablonu promptu samokrytyki oraz wagi specyficznej dla etapu.

Powiązane

• Design-to-code: Figma i systemy projektowe — wariant etapu 4 oparty na Figma-MCP, jeśli Twój projekt mieszka w Figmie zamiast w Claude Design.
• Implementacja UI front-end z Cursor — głębsze pokrycie etapu 4 specyficznie w Cursorze.