Dlaczego kod bije screenshoty - rozmawiaj z AI programistycznie

Problem z pikselami

Maszyna w tle. Zegar wskazuje drugą w nocy. Od godziny zmagasz się z tym samym problemem układu CSS. W końcu robisz zrzut ekranu, wklejasz go do terminala i piszesz: "napraw ten przesunięty przycisk."

Twój asystent AI patrzy na piksele, robi co może i — miejmy nadzieję — daje ci coś przydatnego. Ale co tak naprawdę stało się w tej czarnej skrzynce? Model najpierw zużył tokeny, żeby zobaczyć twój ekran, potem kolejne, żeby to zinterpretować, a na koniec zgadywał, który z 47 elementów interfejsu na twoim ekranie 1440p masz na myśli.

Sporo zgadywania jak na drugą w nocy.

Matematyka tokenów, o której nikt nie mówi

Jest coś, czego dostawcy asystentów AI do kodowania nie reklamują na pierwszym planie: każdy wklejony zrzut ekranu kosztuje prawdziwe pieniądze i zabiera miejsce w twoim oknie kontekstowym. Typowy zrzut ekranu retina na Claude to około 1500+ tokenów tylko za przetwarzanie obrazu. Na GPT-4o wychodzi mniej więcej 1100 tokenów. Gemini 2.5? Około 1550.

Teraz pomnóż to przez sesję iteracyjną. Pokazujesz agentowi stan ekranu co kilka promptów — a jeśli jesteś jak ja, debugując złożone problemy z interfejsem, może to być 15-20 razy na sesję.

Nagle wydałeś od 22 000 do 31 000 tokenów tylko na wizję, zanim agent zrobił cokolwiek użytecznego. Na oknie kontekstowym 200k to poważna strata. A jeśli używasz Opus 4.7 albo 4.8? Przygotuj się na mniej więcej 96 000 tokenów wizyjnych w tej samej sesji.

Alternatywa? Ustrukturyzowany JSON opisujący elementy twojego interfejsu: ich pozycje, kolory, treść tekstową i role semantyczne. Ten sam stan ekranu w JSON? Około 700 tokenów. Przez 20 promptów w sesji: mniej więcej 14 000 tokenów razem.

To nie jest marginalna poprawa. To jest różnica między dokończeniem refaktoryzacji a wyrzuceniem z sesji przez kompresję kontekstu.

Struktura bije piksele: prawdziwa wygrana

Ale jest coś, co naprawdę ma znaczenie poza matematyką tokenów — i to jest ta część, do której ciągle wracam.

Kiedy wklejasz zrzut ekranu, agent musi przeinterpretować wszystko przy każdym obrocie. Surowe piksele nie są trwałym stanem rozumowania. Zadasz pytanie uzupełniające sześć promptów później, a model wraca do wgapiania się w piksele, interpretuje od nowa, zgaduje.

Strukturyzowany JSON zmienia całą dynamikę. Zamiast "oto co te piksele mogą przedstawiać" dajesz agentowi fakty, do których może się odwołać i na których budować: "Element e4 to przycisk na pozycji [0.34, 0.60, 0.32, 0.07], w kolorze #3B82F6, z etykietą 'Zapisz się'."

Agent nie musi zgadywać, na które pole wprowadzania danych wskazujesz. Schemat już to wie. Rozumowanie opiera się na tych samych prymitywach, których następny obrót też użyje. Nie pokazujesz; mówisz.

Dlaczego to ma znaczenie dla vibe codingu

Oto gdzie to wszystko łączy się z szerszą zmianą zachodzącą w programowaniu z asystencją AI — tą, którą niektórzy nazywają "vibe coding".

Cały sens vibe codingu polega na tym, że powinieneś móc opisać, czego chcesz, iterować szybko i ufać AI w obsłudze szczegółów implementacji. Ale vibe coding działa tylko wtedy, gdy AI ma dokładne informacje o tym, z czym pracuje.

Zrzut ekranu to stratna kompresja. Adnotacja na PNG to po prostu czerwone piksele na prostokącie. Ale adnotacja w strukturze JSON niesie intencję: który element obejmuje, co próbuje podkreślić, co chcesz, żeby agent z tym zrobił.

Kiedy eliminujesz zgadywanie, eliminujesz tarcie. A eliminowanie tarcia to właśnie to, o co w vibe codingu chodzi.

Praktyczny wniosek

Słuchaj, nie mówię, że nigdy nie powinieneś wklejać zrzutu ekranu. Czasem po prostu musisz coś szybko pokazać. Ale jeśli robisz poważną pracę iteracyjną z asystentem AI do kodowania — refaktoryzację, debugowanie, budowanie funkcji ze złożonym interfejsem — strukturyzowane dane to droga.

Narzędzia, które to rozumieją, stają się mądrzejsze. Te, które tego nie rozumieją, zaraz zostaną w tyle. Bo ostatecznie twój asystent AI nie "widzi" naprawdę, kiedy wklejasz obrazek. Interpretuje. A interpretacja jest kosztowna, stratna i niestabilna.

Daj mu coś, co naprawdę może przeczytać.

Co myślisz? Zauważyłeś presję na okno kontekstowe podczas długich sesji z AI do kodowania? Podziel się swoimi przemyśleniami poniżej — budujemy to wszystko w czasie rzeczywistym i twoje doświadczenie ma znaczenie.