Je hebt een Figma-bestand geopend met het label final_FINAL_v3, om vervolgens dertig onbenoemde frames, een vergrendelde achtergrondlaag en een knop te vinden die genest is in een groep met ook nog een willekeurige decoratieve cirkel te zien. Dit komt vaker voor dan men wil toegeven. Wanneer je die chaos voert aan een AI-codingtool zoals Codex, weerspiegelt de output de input. 'Garbage in, garbage out' is nog steeds van toepassing, zelfs bij large language models.

De anatomie van een rommelige hand-off

Designers werken snel. Ze dupliceren frames, laten oude ontwerpen zichtbaar en vertrouwen op visuele uitlijning in plaats van een gestructureerde auto-layout. Je eindigt met laagnamen als "Frame 3827" naast functionele knoppen. Decoratieve kleurverloop-vlekken delen dezelfde groep als je primaire call-to-action. Device mockups wikkelen de echte interface in een omlijsting die op content lijkt. Verborgen lagen blijven zichtbaar in het bestand, klaar om elke geautomatiseerde parser in verwarring te brengen.

Voor een developer die Codex gebruikt, is het probleem geen luiheid aan de kant van een van beiden. De AI mist menselijke patroonherkenning. Het leest de layertree letterlijk. Wanneer een designer een knop, een koptekst en een achtergrondvervaging in één platgeslagen groep plaatst, behandelt Codex deze als broers met een gelijke structurele waarde. Het resultaat is een frontend die er structureel gebroken uitziet nog voordat je de kleuren hebt beoordeeld.

Een workflow die je er dichtbij brengt

Je kunt nog steeds schone code leveren vanuit een rommelige bron als je handelt als een editor in plaats van een eenvoudige converter. Het doel is om Codex genoeg context te geven om geïnformeerde gissingen te doen, en die gissingen vervolgens te beperken zodat ze binnen een logische frontend-architectuur blijven.

Extraheer alles voordat de AI het ziet. Schakel Dev Mode in als je daar toegang tot hebt. Kopieer ruwe CSS-eigenschappen uit het inspectiepaneel. Exporteer kleurvariabelen en tekststijlen. Voer deze gestructureerde gegevens aan Codex samen met je prompt. Screenshots tonen de ruimtelijke waarheid; metadata geeft je exacte hex-codes, font stacks en regelhoogtes. De één zonder de ander zorgt ervoor dat het model moet gokken over de helft van de vergelijking.

Wees meedogenloos over lay-outsystemen in je prompts. Vraag Codex nooit simpelweg om "deze pagina te coderen". Vertel het precies wat het moet gebruiken: "Bouw de navigatie met CSS Flexbox en het dashboardgrid met CSS Grid. Gebruik geen absolute positionering, tenzij je de notificatiebadge relatief aan het icoon plaatst." AI-tools vallen vaak terug op absolute positionering omdat ze vaste x-y-coördinaten rechtstreeks uit het designbestand halen. Expliciete instructies overschrijven die neiging.

Gebruik screenshots als vangrails. Exporteer frames op een resolutie van 2x. Upload ze samen met je tekstuele context. Wanneer Codex de eerste versie genereert, open het resultaat dan in een browser naast de screenshot. Let op afwijkingen in de tussenruimte, ontbrekende randen en mismatches in font weight. De AI zal meestal de algemene compositie correct vastleggen, terwijl de specifieke padding fout gaat.

Plan voor correctie. Vergelijk de gerenderde output met je visuele referentie en los fouten handmatig op. De AI kan een tekstlabel veranderen in een imagetag of een kaart wikkelen in een generieke div in plaats van een <article> of <section>. Deze review-ronde is niet optioneel. Het is de fase waarin je gegenereerde code omzet in productiecode.

Waar de AI de weg kwijtraakt

Zelfs met een zorgvuldige workflow zijn er bepaalde rommelige patronen die Codex consequent in de war brengen.

Decoratieve ruis is de grootste valkuil. Figma-bestanden bevatten vaak achtergrondgloed, statusbalk-templates en illustratieve iconen die geen deel uitmaken van de functionele interface. Zonder duidelijke labels codeert de AI deze als permanente DOM-elementen. Je eindigt met specifieke div-tags voor vervaagde cirkels die een CSS background of box-shadow hadden moeten zijn.

Een platgeslagen hiërarchie verstoort de componentdetectie. In een schoon bestand is een kaart een auto-layout frame met een afbeelding, een titel en een actie. In een rommelig bestand kunnen die drie elementen zich op het root-niveau bevinden, visueel uitgelijnd maar structureel wees. Codex mist de grens van de kaart volledig en geeft een platte reeks elementen zonder gedeelde parent terug.

Signaal scheiden van ruis

Het concept roept specifieke vragen op waar elke developer tegenaan loopt bij het overbruggen van design en AI-gegenereerde code.

Vertrouw je meer op Figma-metadata of op screenshots?

Vertrouw ze allebei, maar voor verschillende taken. Gebruik Figma-metadata voor exacte waarden: kleuren, lettergroottes, spacing tokens en geëxporteerde assets. Screenshots winnen op het gebied van structuur en visuele hiërarchie. Als de metadata zegt dat een laag op x: 120, y: 300 staat, maar de screenshot laat zien dat deze gecentreerd in een kaart staat, vertrouw dan de screenshot voor de lay-out en de metadata voor de styling. Laat de screenshot dienen als je ground truth. Laat het inspectiepaneel de exacte waarden invullen.

Hoe scheid je de UI van device frames?

Voordat je iets exporteert, verberg je elke laag die geen deel uitmaakt van de UI. Selecteer de telefoon-mockup of de desktop chrome en zet de zichtbaarheid uit. Als het bestand te rommelig is om te zien wat een template is en wat content, zoek dan naar terugkerende elementen op meerdere schermen. De statusbalk, home-indicator en de navigatieshell bevinden zich meestal op identieke posities. De eigenlijke knoppen, formulieren en content bevinden zich in het variabele midden. Verberg alles wat op elk scherm vast lijkt te staan. Wat overblijft, is je echte interface.

Hoe vind je de grenzen van componenten in een slecht bestand?

Zoek naar visuele clustering en verifieer dit vervolgens met de spacing. Als vier elementen bij elkaar staan met consistente tussenruimtes van 16px en een gemeenschappelijke achtergrondvulling delen, horen ze waarschijnlijk in één container, zelfs als de designer ze nooit heeft gegroepeerd. Controleer de Figma-lagenlijst op opeenvolgende stapeling.