Miksi tekstimuotoinen data toimii paremmin kuin kuvakaappaukset AI-koodaajan kanssa

Pikseleiden ongelma

Kuvittele tilanne. Kello on kaksi yöllä. Olet pyöritellyt samaa CSS-mokia jo tunnin. Lopulta otat kuvankaappauksen, liität sen terminaaliin ja kirjoitat: "korjaa tämä vino nappi."

AI-avustajasi vilkaisee pikseleitä, tulkitsee niitä parhaansa mukaan ja toivottavasti antaa jotain hyödyllistä. Mutta mitä oikeasti tapahtui sen mustan laatikon sisällä? Malli kulutti tokeneita nähdäkseen ruudun, sitten lisää tokeneita tulkitakseen näkemäänsä, ja arvaili sitten, minkä 47:stä käyttöliittymäelementistä 1440p-näytöllä tarkoitit.

Paljon arvailua yhdelle yölliselle debuggaussessiolle.

Token-laskenta, josta ei puhuta

Tässä on asia, jota AI-koodausavustajien myyjät eivät mainosta ensimmäisenä: jokainen liittämäsi kuvankaappaus maksaa oikeaa rahaa ja syö context-ikkunaasi. Tyypillinen Retina-kuvankaappaus maksaa Claudella noin 1 500+ tokenea pelkästään näönprosessointiin. GPT-4o:lla puhutaan noin 1 100 tokenista. Gemini 2.5? Noin 1 550.

Kerro nyt se iteratiivisella sessiolla. Näytät avustajalle ruudun tilan joka muutamassa kehotuksessa – mikä, jos olet kuten minä monimutkaisten käyttöliittymäongelmien kanssa, voi olla 15–20 kertaa per sessio.

Yhtäkkiä olet kuluttanut 22 000–31 000 tokenea pelkkään näkemiseen ennen kuin avustaja on tehnyt yhtään mitään hyödyllistä. 200k context-ikkunassa tuo on tilaa, jota et saa takaisin. Ja jos käytät Opusta 4.7 tai 4.8? Valmistaudu noin 96 000 näkötokeneihin samassa sessiossa.

Vaihtoehto? Rakenteinen JSON, joka kuvaa käyttöliittymäelementtisi: niiden sijainnit, värit, tekstisisällön ja semanttisen roolin. Sama ruudun tila JSON-muodossa? Noin 700 tokenea. 20 kehotuksen sessiolla: noin 14 000 tokenea yhteensä.

Tämä ei ole marginaalinen parannus. Tämä on ero sen välillä, suoritatko refaktoroinnin loppuun vaihteletko context-ikkunasta ulos kesken sessiosi.

Rakenne voittaa pikselit: Todellinen hyöty

Mutta tässä on asia, joka oikeasti merkitsee token-laskentaa enemmän – ja tähän minä palaan jatkuvasti.

Kun liität kuvankaappauksen, avustajan täytyy tulkita kaikki uudelleen joka kehotuksella. Raaka pikselit eivät ole pysyvää päättelytilaa. Kysytkö seuranta kysymyksen kuusi kehotusta myöhemmin, ja malli palaa taas tuijottamaan pikseleitä, uudelleentulkitsemaan, uudelleenarvailemaan.

Rakenteinen JSON muuttaa koko dynamiikan. Sen sijaan että antaisit "tässä on mitä pikselit ehkä edustavat", annat avustajalle faktoja, joihin se voi viitata ja joista se voi rakentaa: "Elementti e4 on nappi sijainnissa [0.34, 0.60, 0.32, 0.07], väriltään #3B82F6, otsikolla 'Rekisteröidy.'"

Avustajan ei tarvitse arvata, mihin syötekenttään osoitat. Skeema tietää jo. Päättely on ankkuroitu samoihin primitiiveihin, joita seuraava kehotus käyttää. Et näytä; kerrot.

Miksi tämä merkitsee Vibe codingille

Tässä kohtaa asia yhdistyy laajempaan muutokseen AI-avusteisessa kehityksessä – jota jotkut kutsuvat "vibe codingiksi."

Koko pointti vibe codingissä on, että sinun pitäisi pystyä kuvaamaan mitä haluat, iteroida nopeasti ja luottaa AI:n hoitavan toteutusdetaljit. Mutta vibe coding toimii vain silloin, kun AI:lla on tarkkaa tietoa siitä, minkä kanssa se työskentelee.

Kuvankaappaus on häviöllinen. Annotaatio PNG:ssä on vain punaisia pikseleitä suorakulmiossa. Mutta annotaatio rakenteisessa JSONissa sisältää tarkoituksen: mihin elementtiin se viittaa, mitä se yrittää korostaa, mitä pyydät avustajalta tekemään.

Kun poistat arvailun, poistat kitkan. Ja kitkan poistaminen on se, mistä vibe coding oikeasti on.

Käytännön vinkki

Katsotaan, en väitä ettei kuvankaappausta koskaan kannata käyttää. Joskus tarvitset vain nopean näytön. Mutta jos teet vakavaa iteratiivista työtä AI-koodausavustajan kanssa – refaktorointia, debuggausta, monimutkaisen käyttöliittymän rakentamista – rakenteinen data on oikea tapa.

Työkalut, jotka ymmärtävät tämän, kehittyvät fiksummiksi. Ne, jotka eivät, ovat pian jäämässä jälkeen. Koska loppujen lopuksi AI-avustajasi ei oikeasti "näe" kun liität kuvan. Se tulkitsee. Ja tulkinta on kallista, häviöllistä ja epäjohdonmukaista.

Anna sille jotain, jota se oikeasti voi lukea.

Mitä mieltä olet? Oletko huomannut context-ikkunan paineen pitkissä AI-koodaussessioissa? Jätä ajatuksesi alle – rakennamme tätä kaikkea reaaliajassa, ja kokemuksesi merkitsee.