Agent Product Design

Buduję system, który pomaga generować ekrany interfejsu w stylu konkretnego produktu. Zaprojektowałem go przy jednym założeniu: przy narzędziu projektowym opartym na AI siedzi człowiek, wkleja pakiet przygotowany przez system (kierunek opisany słowami, obrazy referencyjne, brief) i uruchamia generowanie.

Gdyby to faktycznie działało, z procesu znikałby ostatni ręczny krok. Jeśli nie, automatyzowałbym drogę do gorszych ekranów. Przed zmianą chciałem więc mieć coś w rodzaju dowodu.

Reguła powstała przed ekranami

Zacząłem od spisania listy reguł, które pozwalają przekazać produkt do autonomicznego zaprojektowania agentom.

Średnia ocen mogła być najwyżej o pół punktu niższa od średniej ścieżki operatora w skali od 1 do 5.
Każdy ekran musiał mieć co najmniej jeden wariant, który mógłbym zaakceptować do dalszych prac.
Żaden wariant nie mógł kopiować obrazu referencyjnego.
Praca z agentem powinna angażować mnie znacząco mniej w porównaniu do ręcznego podejścia

Gdyby którykolwiek warunek nie został spełniony, domyślna ścieżka polegałaby na ręcznym przeklejaniu promptów, referencyjnych ilustracji czy moodboardów — agent pozostawałby jako opcjonalny. Różnica mało znacząca, w obu przypadkach generowaniem projektu koniec końców zajmuje się AI.

Brief na fikcyjny projekt wyglądał mniej więcej tak: funkcja neobanku dla par, które oszczędzają na wspólny cel, w nastroju ciepłym i domowym, ale z bankową przejrzystością. Do tego sześć obrazów referencyjnych i dwa ekrany do zaprojektowania, zaproszenie partnera i cel oszczędnościowy, każdy w co najmniej trzech wariantach. W ścieżce agenta prompty na konkretne ekrany pisał agent, a narzędzie tylko je przechowało i wyświetliło. W ścieżce operatora generował je model samego narzędzia, a ja go obsługiwałem, wklejając ten sam brief i te same obrazy do jego interfejsu.

Jak działały obie ścieżki

Generatorem jest Claude Design. Ścieżka agenta: Claude Code (Opus) uruchomiony bez interfejsu na moim Macu, połączony z narzędziem przez jego serwer MCP. Pobrał prompt systemowy narzędzia i jego skill hi-fi design, napisał ekrany w HTML i zapisał je w projekcie przez write_files. Model narzędzia nic w tej ścieżce nie wygenerował.
Przebieg agenta: 6,2 minuty, 33 tury, 2,04 USD, jedna samodzielna runda poprawek kontrastu elementów nietekstowych (WCAG 1.4.11).
Ścieżka operatora: ten sam prompt wklejony w interfejs Claude Design z sześcioma obrazami w załączniku; około siedmiu minut, bez poprawek.
Wejście było to samo, ale dotarło inną drogą: agent przeczytał wszystkie sześć referencji lokalnie przed generowaniem i ich nie wgrał, a w interfejsie trafiły do projektu i do modelu narzędzia.
Wynik po każdej stronie: zaproszenie partnera w trzech wariantach, każdy z ekranem osoby zapraszającej i zaproszonej, oraz cel oszczędnościowy w trzech wariantach.

Obie ścieżki zajęły około siedmiu minut. Agent sam zrobił jedną rundę poprawek: podniósł kontrast elementów graficznych ze względu na dostępność. W ścieżce operatora nie było poprawek. Przebieg agenta kosztował 2,04 USD, ścieżka operatora mieściła się w abonamencie.

4,17 wobec 3,50

Inne agenty niż testowany przycięły kadry, usunęły wszystko, co zdradzało ścieżkę, wymieszały je, a później policzyły średnie. Ja dałem każdemu wariantowi dwie oceny od 1 do 5, za trzymanie opisanego kierunku i za rzemiosło, zaznaczyłem, czy wziąłbym go dalej, i zdecydowałem, co liczby znaczą dla systemu.

W zgodności kierunku agent uzyskał średnio 4,17, ścieżka operatora 3,50. W rzemiośle był minimalnie słabszy: 3,50 wobec 3,67. Na obu ekranach dał warianty warte dalszej pracy, razem cztery; ścieżka operatora trzy. Żadna ścieżka nie skopiowała referencji. Mój czas: zero w ścieżce agenta, kilka minut wklejania i wgrywania obrazów w ścieżce operatora. Agent spełnił regułę we wszystkich punktach, więc ustawiłem go jako tryb domyślny.

Zaślepienie i wszystkie dwanaście ocen

Kadry wyrenderowała i przycięła automatycznie przeglądarka (headless), więc nie było widać ani etykiety ścieżki, ani elementów interfejsu. Litery K–Z przydzielono losowo, a klucz leżał poza repozytorium do końca oceniania.
Dlaczego tylko półślepo: widziałem wynik ścieżki operatora w interfejsie, a ścieżki różnią się drobnymi sygnaturami. Kwoty celu wyniosły 8 000 i 9 000 zł (obie wymyślone, bo brief ich nie podawał), a jedna ścieżka rysowała ramkę telefonu z wyspą aparatu, druga bez niej.
Kierunek / rzemiosło, ścieżka agenta. Zaproszenie: 3/3, 4/3, 5/4. Cel: 5/4, 4/3, 4/4.
Kierunek / rzemiosło, ścieżka operatora. Zaproszenie: 3/3, 3/3, 4/4. Cel: 4/4, 4/4, 3/4.
Średnie: kierunek 4,17 wobec 3,50, rzemiosło 3,50 wobec 3,67, łącznie 3,83 wobec 3,58 (próg reguły dla agenta: 3,08). Warianty do wzięcia dalej: agent 1 zaproszenie + 3 cel, operator 1 + 2. Kopie referencji: 0 i 0.

Spodziewałem się, że wygra szybkością i przegra jakością. Szybkość wyszła na remis, a różnica w rzemiośle to niecała piąta część punktu. Przewagę zdobył w tym, po co ten system powstaje: w trzymaniu nastroju opisanego słowami. I zrobił to na ślepo. Pisał kod i ani razu nie spojrzał na wyrenderowany ekran.

Czego te oceny nie udźwigną

Oceniałem ja, i to półślepo: widziałem wyniki ścieżki operatora, a obie zostawiły drobne ślady, na przykład wymyślone cele oszczędnościowe różniące się o tysiąc złotych. Jeden brief, sześć wariantów na stronę. Traktuję to jako trop do sprawdzenia: następna runda to drugi brief i oceniający, który nie widział żadnej ścieżki.

To, co przeniósłbym gdzie indziej, nie zależy od ocen. Gdybym zobaczył 4,17 wobec 3,50 przed zapisaniem reguły, odczytałbym to tak, jak już byłem nastawiony. Następnym razem, gdy agent będzie miał przejąć krok, który dziś robi człowiek, znów najpierw zapiszę, o ile gorzej może wyjść i czego oczekuję w zamian.

Na razie „domyślny” znaczy, że nowe pakiety trafiają najpierw do agenta, a interfejs zostaje na sytuacje, w których chcę sterować ręcznie.

Jeden moment ze śladu przebiegu został ze mną dłużej niż jakakolwiek ocena. Agent dwa razy wywołał narzędzie, którego zabraniają moje stałe reguły. Niczego nie wyłamał: lista blokad ustawiona dla tego przebiegu była niepełna, a agent użył tego, co dostał. Zimny prysznic: agent zrobi wszystko, czego wprost mu nie zabronisz, więc listę trzeba deklarować przed każdym przebiegiem i sprawdzać po nim, a to sprawdzanie idzie z czasu, który policzyłem jako zero. Domyślny: tak. Sam: jeszcze nie. Nie, dopóki nie zobaczy własnych ekranów i dopóki lista nie będzie szczelna.

A skoro przy tym jesteśmy: delegowanie decyzyjności do narzędzi AI to jeden z powodów, dla których postanowiłem zbudować Kelter (środowisko do deterministycznego działania agnetów AI).

Szkic przygotowały agenty AI, redakcja i sprawdzenie faktów — ja.