Akceptacja wizualna przed implementacją frontendu

Akceptacja wizualna daje designowi artefakt i bramkę, zanim kod frontendu podniesie koszt zmiany. Zespół zamienia intent.md w testowalną makietę, sprawdza ważne stany i breakpointy, zapisuje kryteria oraz nazywa approvera. Claude Code, Cursor lub Codex mogą pomagać przez obrazy, browser tools lub zatwierdzoną integrację, lecz nie przejmują decyzji projektowej.

Pytanie scorecardu: Jak prototypujesz i walidujesz interfejs przed implementacją?

Maksymalna odpowiedź: intent.md tworzy makietę w zatwierdzonym narzędziu projektowym, iterowaną przed kodowaniem.

Kontrakt artefaktu wizualnego

Użyteczny artefakt zawiera:

główne zadanie i oczekiwany wynik;
stany empty, loading, error, success, denied i destructive;
istotne breakpointy mobile i desktop;
hierarchię treści, reprezentatywny copy i obsługę klawiatury;
ograniczenia komponentów lub tokenów design systemu;
wymagania dostępności i reduced motion;
stabilny link, eksport lub commitowany lokalny prototyp;
nazwanego approvera i datę decyzji.

Dobierz medium do ryzyka: Figma dla spójności systemu, HTML dla interakcji, obrazy dla kierunku albo lokalny stan aplikacji dla wysokiej wierności. Przed użyciem integracji projektowej sprawdź jej rzeczywiste capabilities i uprawnienia.

Prompty do skopiowania

Przeczytaj intent.md i dokumentację design systemu.
Zaproponuj trzy istotnie różne hierarchie informacji.
Dla każdej pokaż główny flow oraz empty, loading, error i denied.
Nie pisz kodu produkcyjnego. Wypisz założenia i decyzje dla ownera.

Zamień zaakceptowany kierunek w testowalny prototyp.
Pokryj breakpointy, keyboard path, focus order, walidację,
reduced motion i destructive confirmation. Zapisz dokładne kryteria
oraz trzymaj assety w zatwierdzonej lokalizacji projektu.

Porównaj implementację z zaakceptowanym artefaktem wizualnym.
Sprawdź faktyczny UI na wymaganych breakpointach i stanach.
Zwróć wyłącznie poparte dowodami różnice: screenshot, route/state,
severity i najmniejszą sugerowaną korektę.

Mapa narzędzi

Claude Code: dołącz lub wskaż zaakceptowane artefakty i używaj browser/design tools tylko wtedy, gdy są skonfigurowane w sesji.
Cursor: użyj image input, browser capabilities albo zatwierdzonego połączenia MCP/design dostępnego w workspace.
Codex: użyj możliwości app/browser/image dostępnych w środowisku i zachowaj dowody w zadaniu lub repo.

Workflow nie wymaga Claude Design, uniwersalnego Figma MCP ani domniemanego bota Cursor/Codex. Claude Design jest rzeczywistą funkcją beta dla kwalifikujących się planów Claude, ale przed wpisaniem jej do kontraktu zespołu trzeba potwierdzić dostępność na koncie i po stronie administratora.

Gdy walidacja wizualna zawodzi

Zaprojektowano tylko happy path. Wymagaj error, loading, empty, permission i destructive states przed akceptacją.

Artefaktu nie da się odtworzyć. Zapisz stabilny link, wersję, eksport, seed data, viewport i route.

Agent ocenia własny output. Użyj osobnego review i nazwanej akceptacji product/design.

Pixel matching zastępuje judgment. Waliduj zrozumienie, wykonanie zadania, accessibility i spójność systemu, nie tylko podobieństwo screenshotów.

Weryfikacja akceptacji

Artefakt ma wersję, ownera i datę.
Krytyczne stany i breakpointy są przedstawione.
Kryteria da się zamienić na testy lub checklistę review.
Implementację sprawdzono w rzeczywistej aplikacji.
Różnice oparte na dowodach naprawiono lub jawnie zaakceptowano.
Narzędzia wizualne działają w zatwierdzonych granicach danych i credentials.

Przejście od designu do builda

Commituj lub podlinkuj zaakceptowany artefakt w Design, a kryteria przenieś do Build i Test.

Łańcuch artefaktów Przekazuj zaakceptowane dowody między etapami.

Governance i autonomia Kontroluj dane projektowe i uprawnienia narzędzi.