Pipeline design-to-code z czterema artefaktami

Wiarygodny pipeline design-to-code nie zależy od marki modelu. Przekazuje cztery wersjonowane artefakty przez jawne bramki: kierunek wizualny, prototyp interakcji, kontrakt design systemu i implementację produkcyjną. Każdy artefakt przenosi kryteria akceptacji dalej; Claude Code, Cursor lub Codex używają wyłącznie image, browser i design integrations rzeczywiście skonfigurowanych dla zadania.

Wejścia i wyjścia

Etap	Czyta	Produkuje	Ludzka bramka
1. Kierunek wizualny	`intent.md`, referencje, brand	Opisane kierunki lub mocki	Product/design wybiera
2. Prototyp interakcji	Kierunek, state matrix	Testowalny prototyp z głównymi flow	Product/design akceptuje zachowanie
3. Design contract	Prototyp, źródło design systemu	Tokens, components, states, accessibility	Owner systemu akceptuje
4. Implementacja	`spec.md`, `plan.md`, design contract	Kod, testy, screenshots, review evidence	Code owner i release owner decydują

Utrzymuj jeden kanoniczny artefakt per decyzja. Zewnętrzny design linkuj stabilną wersją i eksportuj dość dowodów dla reviewerów bez dostępu do narzędzia.

Wykonanie pipeline

Utwórz kierunki z intencji.

Alternatywy powinny różnić się hierarchią, gęstością, nawigacją lub interakcją, nie tylko kolorem.

Przeczytaj intent.md, brand constraints i referencje.
Zaproponuj trzy istotnie różne kierunki wizualne.
Dla każdego pokaż ekran główny, wyjaśnij hierarchię i tradeoffs,
wypisz założenia. Nie pisz kodu produkcyjnego.

Zapisz wybrany kierunek oraz powody odrzucenia pozostałych.

Uczyń zachowanie testowalnym.

Zbuduj prototyp w zatwierdzonym design tool, lokalnym HTML albo aplikacji z fixture data. Pokryj happy path, empty, loading, error, denied, validation i destructive states.

Zmień zaakceptowany kierunek w testowalny prototyp.
Pokryj breakpointy mobile i desktop, keyboard navigation,
focus order, reduced motion, walidację i recovery.
Zwróć state matrix i dokładną checklistę akceptacji.

Wyodrębnij design contract.

Zapisz tokens, typography, spacing, components, variants, content rules, responsive behavior, accessibility i provenance assetów. Użyj istniejącego źródła design systemu zamiast tworzyć drugi zestaw tokenów.

artifact: design-contract
version: 1
source: stable design link or committed prototype
tokens_source: existing design system path
components:
  - name: CheckoutSummary
    states: [loading, ready, empty, error]
    keyboard: documented
breakpoints: [mobile, desktop]
acceptance_owner: named person or role

Zaplanuj i zaimplementuj w repo.

Przekaż kontrakt do spec.md i plan.md. Pracuj w izolowanej gałęzi, zachowaj istniejące conventions komponentów i oddziel akceptację wizualną od generowania kodu.
Zbierz dowody w rzeczywistej aplikacji.

Uruchom unit, integration i E2E oraz keyboard/accessibility. Zapisz route, seed state, viewport, screenshot lub video, komendę i exit code.
Zrób niezależne review.

Świeży review porównuje realną implementację z kontraktem i zgłasza różnice poparte dowodami. Product/design akceptuje zachowanie; code i release owner zachowują normalne bramki.

Gdy pipeline zawodzi

Funkcja konkretnego vendora znika. Artefakty nadal działają. Wymień adapter narzędzia, powtórz właściwy etap i zachowaj kontrakt.

Prototypu nie da się odtworzyć. Zapisz wersję, seed data, route, viewport, assety i kroki interakcji.

Wygenerowane tokens rozgałęziają design system. Wymagaj kanonicznego źródła i approval ownera przed implementacją.

Kod pasuje do screenshotu, ale nie do flow. Testuj transitions, keyboard, responsiveness, copy i recovery.

Ten sam agent zatwierdza własną pracę. Oddziel build, niezależne review i ludzką akceptację.

Weryfikacja handoffów

Każdy etap nazywa input, output, ownera i decyzję akceptacji.
Krytyczne stany i breakpointy istnieją przed implementacją.
Design contract wskazuje kanoniczne tokens i components.
Kod jest testowany w rzeczywistej aplikacji.
Findings wizualne mają route/state i dowody.
Zmiana narzędzia nie wymaga przepisywania artifact chain.

Popraw najsłabszy artefakt

Stosuj pętlę oceny opartej na dowodach na każdym handoffie, potem przejdź przez Build i Test.