Codex Kan Nu Zijn Eigen Code Zien — Dat Verandert Alles
Vorige week zag ik een AI-coderingsassistent kijken naar een whiteboard-schets — een ruwe, handgetekende rechthoek met wat kronkelende cirkels en pijlen — en die omzetten in een werkende interactieve 3D-globe met klikbare bestemmingspins, vloeiende animaties en responsieve mobiele indelingen. Daarna opende het een browser, maakte een schermafbeelding van wat het had gebouwd, merkte op dat de pinlabels elkaar overlapten op kleinere schermen, en corrigeerde de CSS zonder dat iemand dat had gevraagd.
Dat laatste deel deed me stoppen. Niet de codegeneratie — ik heb twee jaar indrukwekkende codegeneratie gezien. Het deel waarbij de AI naar zijn eigen uitvoer keek, een visueel probleem identificeerde en het autonoom corrigeerde. Dat is niet een coderingsassistent. Dat is een coderingsassistent met ogen.
OpenAI's Codex heeft al een tijdje multimodale mogelijkheden, maar de laatste demonstraties laten iets kwalitatief anders zien dan wat ik eerder had getest. Het systeem voert nu een continue lus uit: code genereren, het resultaat renderen, de uitvoer screenshotten, de schermafbeelding analyseren op problemen, de problemen oplossen, opnieuw screenshotten. Het bootst — en overtreft in sommige gevallen — de workflow na die een menselijke front-end developer van nature volgt: code schrijven, de browser controleren, aanpassen, opnieuw controleren.
Ik heb de afgelopen week deze workflow tot zijn grenzen getest op drie projecten. De resultaten dwongen me opnieuw na te denken over hoe ik front-end development aanpak. Niet omdat Codex perfect is — dat is het absoluut niet, en ik laat je precies zien waar het faalt. Maar omdat de zelfcontrolerende lus het grootste probleem met AI-gegenereerde UI-code oplost: de kloof tussen wat de AI denkt dat het heeft gebouwd en wat er werkelijk op het scherm rendert.
Het Probleem Dat Elke AI-coderingstool Had (Heeft)
Hier is een frustratie waarmee ik al leef since de eerste keer dat ik AI gebruikte om front-end code te genereren. Je beschrijft een indeling. De AI schrijft HTML en CSS. Je rendert het in de browser. En het ziet er... verkeerd uit. Niet kapot-verkeerd. Subtiel verkeerd. Ruimte klopt niet. Elementen overlappen bij bepaalde viewport-breedtes.
Je beschrijft de problemen. De AI past aan. Je rendert opnieuw. Nog steeds niet helemaal goed. Drie of vier ronden hiervan en je hebt meer tijd besteed aan het beschrijven van visuele problemen in tekst dan je zou hebben besteed aan het gewoon zelf schrijven van de CSS.
Het kernprobleem: AI-coderingstools genereren code blind. Ze produceren tokens die HTML en CSS vertegenwoordigen, maar ze hebben geen visueel model van hoe die tokens zullen renderen.
Codex's multimodale zelfcontrolerende lus doorbreekt deze cyclus volledig. De AI genereert code, rendert het in een echte browseromgeving, maakt een schermafbeelding, en gebruikt zijn visiemodel om de werkelijke visuele uitvoer te analyseren.
Codex Zien Bouwen: Een 3D-Globe van een Whiteboard-schets
De demo die me overtuigde om dit serieus te nemen, betrof een reis-app genaamd Wonderlust. Het team scheste ideeën op een fysiek whiteboard. Iemand maakte een foto van het whiteboard en voerde die rechtstreeks in Codex in als prompt.
Wat er vervolgens gebeurde duurde ongeveer acht minuten.
Codex analyseerde de schets. Het identificeerde de beoogde UI-elementen: een 3D-globe voor het ontdekken van reisbestemmingen, klikbare pins op de globe voor specifieke locaties, een detailpaneel dat inschuift wanneer je op een pin tikt, en toetsenbordnavigatie voor het draaien van de globe.
Na het genereren van de initiële implementatie opende Codex een browser, renderde de app, en maakte een schermafbeelding. Het detailpaneel was gedeeltelijk verborgen achter de globe op tablet-breedte viewports. Codex zag dit in de schermafbeelding, identificeerde het z-index- en positioneringsconflict, paste de CSS aan en renderde opnieuw.
Het ving een responsief ontwerpprobleem op dat ik — een developer die regelmatig responsieve indelingen bouwt — mogelijk had gemist bij de eerste doorgang.
De Travellog-feature: Waar Zelfcontrole Echt Schittert
De tweede deel van de demo bouwde een Travellog-scherm — een dashboard met reisstatistieken met interactieve checklists, taartdiagrammen en gamified voortgangsbewaking.
Codex genereerde de initiële dashboard-indeling, renderde het en maakte een schermafbeelding. De eerste doorgang had twee zichtbare problemen: een taartdiagramlegenda werd afgekapt op mobiel, en de ruimte tussen statistiekkaarten was inconsistent. Codex identificeerde beide problemen vanuit de schermafbeelding, corrigeerde de overvloei van de legenda, standaardiseerde de kaartruimte, en renderde opnieuw.
De tweede schermafbeelding was schoon.
Van Napkin-schetsen naar Figma-mockups: De Invoerflexibiliteit
Ik testte vier niveaus van invoerkwaliteit:
Whiteboard-schets — ruw, handgetekend, ambigue verhoudingen. Goed voor rapid prototyping wanneer pixelprecisie niet belangrijk is.
iPad-tekening met annotaties — netter, met kleurgecodeerde secties en tekstlabels. Codex volgde de annotaties in ongeveer 80% van de gevallen nauwkeurig.
Schermafbeelding van de UI van een concurrent — ik gaf Codex een screenshot van een dashboard en vroeg het om "iets te bouwen met deze indeling maar ons kleurenschema." De structurele reproductie was uitstekend.
Figma-mockup-export — een goed ontworpen bestand geëxporteerd als PNG. Dit produceerde de hoogste-fidelity uitvoer.
Gegevensvisualisatie: Waar Codex Stil Uitblinkt
Codex verwerkte een ruwe dataset van New York City taxiritten en genereerde een interactief dashboard met grafieken, filters en kaartvisualisaties.
Wanneer een staafdiagram renderde met afgekapte aslabels, ving de zelfcontrole het op. Wanneer een kaartoverlay gedeeltelijk transparant was en moeilijk leesbaar was tegen een lichte achtergrond, paste de zelfcontrole de doorzichtigheid aan.
De Playwright-integratie Die Alles Samenbrengt
Onder de motorkap gebruikt Codex Playwright — het browser-automatiseringsframework — om gegenereerde UI's te renderen en schermafbeeldingen te maken. Dit betekent dat Codex met de gegenereerde app kan interageren zoals een gebruiker zou doen: klikken, formulieren invullen, scrollen, de viewport vergroten of verkleinen.
Front-end developers die Codex gebruiken samen met Playwright krijgen een continue visuele validatiepijplijn: code genereren → renderen in een echte browser → schermafbeeldingen maken op meerdere viewport-breedtes → elke schermafbeelding analyseren → problemen oplossen → herhalen.
Waar Codex Tekortschiet
De zelfcontrole is niet uitgebreid. Codex maakt een schermafbeelding op één moment in de tijd, op één viewport-breedte (tenzij je de Playwright-pijplijn configureert voor meerdere). Het test geen hover-states, animaties mid-overgang, of formuliervalidatiefeedback.
Visuele analyse heeft een resolutielimiet. Codex kan een duidelijk afgekapt grafiekelabel opvangen. Het heeft moeite met subtielere problemen: een fontgewicht dat 400 is wanneer het 500 zou moeten zijn.
Codekwaliteit speelt tweede viool ten opzichte van visuele correctheid. Codex optimaliseert voor "ziet het er goed uit in de schermafbeelding?" Dit betekent soms dat het CSS-hacks genereert.
Complexe statusbeheer is nog steeds zwak. De zelfcontrolerende lus werkt voor statische visuele verificatie. Het behandelt nog niet het volledige spectrum van interactieve statustest.
Wat Dit Werkelijk Betekent voor Front-end Development
Ik schrijf geen eerste doorgang front-end code meer met de hand voor nieuwe features. Schets de UI (iPad, dertig seconden), geef het aan Codex met een tekstbeschrijving van de functionaliteit, laat het de initiële implementatie genereren en zelfcontroleren. Dan besteed ik mijn tijd waar het werkelijk telt: de gegenereerde CSS refactoren voor onderhoudbaarheid, goed statusbeheer toevoegen, interactieve stromen testen, en prestaties optimaliseren.
Mijn rol verschoof van "schrijf de code" naar "architecteer de code en verfijn de uitvoer."
De grotere vraag is niet of Codex vandaag nuttig is. Het duidelijk is dat het dat is, met voorbehoud. De vraag is wat er gebeurt wanneer de zelfcontrolerende lus beter wordt.
Laten We Samenwerken
Wil je AI-systemen bouwen, workflows automatiseren of je tech-infrastructuur opschalen? Ik help je graag.
- Fiverr (maatwerk & integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (enterprise-oplossingen): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
