Hoe AI-agent-skills meetbaar betere front-end opleveren (blind getest)

Het probleem met "goed genoeg" AI-front-end

Geavanceerde AI-modellen schrijven nu al correcte front-endcode. Vraag er een om een landingspagina en u krijgt geldige HTML, een verstandige reset, toegankelijke opmaak en een responsief grid. De code werkt.

Maar "werkt" is niet hetzelfde als "goed". Overgelaten aan zijn standaardinstellingen produceert een AI een herkenbare generieke look: het donkerpaars-naar-blauwe verloop, verlopende koptekst, alles gecentreerd, identieke gelijkmatig verdeelde kaarten, één vlakke slagschaduw. Het is competent en vergeetbaar — precies het soort output dat een merk ondermijnt in plaats van opbouwt.

Dus stelden we onszelf een concrete vraag: kunt u een AI-agent betrouwbaar van "competent" naar "werkelijk mooi, tot op de pixel vormgegeven en feilloos responsief" tillen — en bewijzen dat het verschil echt is, en niet slechts een vrome wens? Dit onderzoek is het antwoord.

Stap 1: bouw de kennisbank

We begonnen waar een senior engineer zou beginnen: door het beste front-enddenken samen te brengen in één bron van waarheid. We haalden zes diepgaande front-endcursussen door de molen — 717 collegetranscripties, ongeveer 5,3 miljoen tekens — en destilleerden ze tot één best-practices-draaiboek van meer dan 600 regels, dat architectuur, ontwerpsystemen, responsieve lay-out, toegankelijkheid, semantiek, prestaties en moderne CSS behandelt.

Vervolgens brachten we het in lijn met de platformrealiteit van 2024–2025: Web Platform Baseline voor ondersteuningsbeslissingen, moderne CSS (container queries, :has(), cascade layers, OKLCH-kleur, clamp()), de werkelijke stand van vendor prefixes, de moderne browser-API's (IntersectionObserver, View Transitions, de Popover API, native <dialog>) en Core Web Vitals.

Stap 2: maak van kennis herbruikbare agent skills

Een draaiboek dat een mens leest is nuttig. Een vaardigheid die een AI-agent automatisch toepast is transformationeel. Daarom verpakten we het draaiboek in zeven modulaire agent skills — elk afgebakend om in de juiste context te activeren en op verzoek de juiste richtlijnen te laden:

• CSS-architectuur — resets, design tokens, de rem-strategie, BEM, CSS op schaal organiseren.
• Webdesignsysteem — typografie, kleur, ruimtegebruik, hiërarchie en "personality-first"-ontwerp.
• Responsieve lay-out — Flexbox, Grid, container queries, EM-gebaseerde media queries.
• Semantische HTML & toegankelijkheid — WCAG, ondersteuning voor toetsenbord en schermlezers, toegankelijke formulieren.
• Animatie & beweging — performante, reduced-motion-veilige animatie en moderne effecten.
• Moderne CSS & compatibiliteit — functies uit 2024–2025 die veilig worden afgeschermd door Baseline en feature queries.
• Prestaties & browser-API's — Core Web Vitals, lazy loading, de juiste DOM-API voor de klus.

Het eerste resultaat was een verrassing: een gelijkspel

We beoordeelden de skills eerst op de voor de hand liggende manier — bouw dezelfde taken mét de skills en zonder, en toets de output aan objectieve criteria. Het resultaat was vrijwel identiek: ongeveer 91% mét de skills tegenover 95% zonder.

Dat lijkt op een mislukking. Het is in werkelijkheid de belangrijkste bevinding van het project. De objectieve controles maten correctheid — gebruikt het rem-eenheden, semantische HTML, een viewport-tag — en een geavanceerd model doet dat allemaal al vanzelf. We maten het verkeerde.

"Correctheid is opgelost. Vakmanschap niet. De kloof tussen competente en uitzonderlijke front-end is geen kennis die het model mist — het is smaak die door iteratie wordt toegepast, en een weigering om de generieke standaard uit te leveren."

De doorbraak: een skill die werkt als een ontwerper

Een ontwerper levert nooit de eerste render uit. Ze bouwen het, kijken naar de echte pixels, zoeken op wat zwak is en verfijnen. Kennis-skills konden dat niet vatten — dus bouwden we een achtste skill, Visual Polish, die verandert hoe de agent werkt, langs drie hefbomen:

1. Een render-en-itereer-lus

De agent moet stoppen met alles in één keer proberen te doen. Hij bouwt de pagina, rendert deze in een echte browser, maakt screenshots bij elk breekpunt, bekritiseert het screenshot aan de hand van een kwaliteitsrubriek, verhelpt de belangrijkste problemen en herhaalt. Naar pixels kijken is de allergrootste hefboom — in onze runs nam de agent met skills 40–54 bouw-en-controlestappen per taak, tegenover 3–4 voor de agent zonder hulp.

2. Een smaakvol ontwerpsysteem, meegeleverd in de skill

In plaats van de agent te vertellen "gebruik goede typografie", leveren we gecontroleerde, uitgesproken standaardinstellingen mee: een OKLCH-kleursysteem, een redactionele lettercombinatie, een vloeiende schaal, meerlaagse elevatieschaduwen en gepolijste componenten waarvan elke interactiestatus al is vormgegeven. De agent begint vanuit smaak in plaats van een generieke standaard te improviseren.

3. Vangrails en een Definition of Done

De skill benoemt precies de "generieke AI"-tekenen die vermeden moeten worden en definieert een strikte checklist die de agent moet verifiëren voordat hij het werk als voltooid verklaart: geen horizontale overloop bij welk breekpunt dan ook, AA-contrast in licht en donker, ontworpen focus- en hover-statussen, en beweging die reduced-motion-voorkeuren respecteert.

De lus bewees zich meteen. Bij het bouwen van de eigen referentiepagina van de skill ving de renderstap twee echte defecten op die een code review had gemist: content die zonder JavaScript onzichtbaar was, en een lay-out die op mobiel overliep. Beide werden verholpen voordat er iets werd uitgeleverd — precies de fouten die in productie terechtkomen wanneer niemand naar het gerenderde resultaat kijkt.

Het bewijs: een blinde A/B-test

Beweringen over "schoonheid" zijn makkelijk te maken en makkelijk te faken, dus valideerden we eerlijk. We gaven twee nieuwe briefings — een SaaS-prijssectie en een landingspagina voor een finance-app — aan een agent mét skills en aan een agent zonder hulp. We renderden alle vier de resultaten en gaven de screenshots vervolgens aan een onafhankelijke AI-criticus die niet wist welke welke was, met willekeurig gerangschikte labels zodat er geen patroonherkenning mogelijk was.

Het oordeel was doorslaggevend. De ontwerpen mét skills wonnen beide taken met hoge betrouwbaarheid, en de jury identificeerde zelfstandig de output zonder hulp als "de generieke AI-standaard".

"De ene is art-directed en duidelijk op maat ontworpen — materiaal voor een inspiratiebord. De andere leunt tegelijk op de twee grootste generieke-AI-tekenen: een donker verloop en verlopende koptekst. De kloof is duidelijk, niet marginaal."

Waarom dit ertoe doet

De meeste teams die AI voor development inzetten stoppen bij "het produceert werkende code". Dit onderzoek toont de volgende, waardevollere stap: vakmanschap en proces in de agent verankeren zodat de output betrouwbaar uitstekend is, niet slechts correct — en dat vervolgens bewijzen met een echte, blinde test in plaats van een onderbuikgevoel.

De principes gelden veel breder dan alleen CSS:

• Meet het juiste. Als uw evaluatie alleen correctheid controleert, zal een sterk model altijd "goed genoeg" lijken en mist u de kwaliteitskloof volledig.
• Proces verslaat kennis. De grootste winst kwam niet van meer regels, maar van de agent dwingen zijn eigen werk aan de werkelijkheid te toetsen en te itereren.
• Lever smaak, geen principes. Gecontroleerde, uitgesproken standaardinstellingen brengen de output verder dan abstract advies ooit zal doen.
• Bewijs het blind. Een onafhankelijke, blinde vergelijking maakt van "ziet er voor mij mooier uit" bewijs.

Hoe SplatDev dit toepast

SplatDev bouwt AI-verrijkte ontwikkelsystemen voor bureaus en softwarebedrijven. We richten niet zomaar een AI op uw codebase — we engineeren de skills, vangrails en verificatielussen die de output ervan betrouwbaar en werkelijk hoogwaardig maken, en we valideren het resultaat in plaats van het aan te nemen.

• Op maat gemaakte agent skills afgestemd op uw stack, ontwerpsysteem en standaarden.
• Verificatielussen — renderen, testen en review ingebakken in hoe de AI werkt, niet er achteraf op geplakt.
• Bewijsgedreven levering — we meten kwaliteit, niet alleen snelheid.

Zet de volgende stap

Als uw team AI gebruikt om code te schrijven maar nog niet om uitstekende code uit te leveren, is er een meetbare kloof te dichten — en een methode om dat te doen.

Wilt u AI die werk oplevert dat u in een portfolio zou zetten, en niet alleen werk dat compileert?

Neem contact op met SplatDev — Bouw beter met AI

Of mail ons op [email protected]