We bouwden dezelfde landingspagina met en zonder een Skill

De Skill Bench, deel 1 van 4. Zelfde model, zelfde prompt, één skill geïnstalleerd of niet. Dit deel: een landingspagina. Ook in de serie: een Telegram bot, debuggen van een snake game, en auditen van een Google zx script.

Elke skill review op deze site eindigt met dezelfde onopgeloste vraag: zorgt deze skill ervoor dat Claude beter werk levert, of zorgt het er alleen voor dat Claude meer werk levert? Dat zijn niet dezelfde dingen, en de meeste testopstellingen kunnen ze niet uit elkaar houden omdat de runs niet strak genoeg gecontroleerd zijn om de ene variabele die ertoe doet te isoleren.

Dus voerden we een experiment uit. Twee runs, zelfde model, zelfde brief, tot op de interpunctie. Het enige verschil ertussen is één instructie: "lees en volg deze geïnstalleerde skill." Run één, het model bouwt zonder hulp. Run twee, we wijzen het naar de daadwerkelijke frontend-design skill, degene die op 9.6 van de 10 staat in onze catalogus, en laten het de echte SKILL.md lezen voordat het enige code aanraakt. Daarna vergelijken we de twee landingspagina's regel voor regel en tellen we de tokens die elke run kostte.

Dit is de eerste van vier van dergelijke vergelijkingen. We kozen een landingspagina om te beginnen omdat visueel ontwerp het domein is waar "beter" het gemakkelijkst te beargumenteren en het moeilijkst te faken is. Een hero met veel gradients ziet er ofwel uit als elke andere door AI gebouwde pagina, of niet, en je hebt geen benchmark nodig om te zien welke.

De opzet

De brief was hetzelfde voor beide runs, een landingspagina met één bestand voor "Nimbus," een fictieve weer-API, geschreven volgens een Stripe-kaliber standaard: hero-sectie, drie feature-blokken, een prijstabel met Free, $29, en $199 niveaus, een codevoorbeeldblok, en een footer. Geen frameworks, geen build-stap, één HTML-bestand met ingebedde CSS.

Run één kreeg die brief en niets anders. Run twee kreeg de identieke brief plus een verwijzing naar de geïnstalleerde frontend-design skill, die het model vervolgens volledig las voordat het begon.

Eén belangrijke kanttekening, duidelijk vermeld in plaats van verborgen: dit is N=1. Eén run per arm, één model, één brief. We beweren niet dat deze cijfers statistisch stabiel zijn over honderd proeven, en als je dit zelf herhaalt, krijg je andere specifieke cijfers. Wat we wel beweren is smaller en, denken we, nuttiger: dit is wat er gebeurde, in detail, tijdens een echte run, met echte telemetrie, en het is een patroon dat we vaak genoeg hebben gezien in minder gecontroleerde tests om de vorm ervan te vertrouwen, zelfs voordat we ronde twee en drie uitvoeren.

Wat de baseline bouwde

Aan zijn eigen lot overgelaten, produceerde Claude een pagina die de meeste mensen die veel AI-output hebben gezien, onmiddellijk zouden herkennen. 890 regels, een licht kleurenschema gebouwd rond papier- en amberkleuren, en het is eerlijk om te zeggen: de code was schoon, de tekst was redelijk, de lay-out werkte, niets was kapot.

De 'tells' zaten allemaal in de details. Elf afzonderlijke gradients over de pagina, in de hero-achtergrond, in knopstatussen, in kaartranden, op plaatsen waar een gradient visuele ruis toevoegde in plaats van een functie te vervullen. Twee koppen gebruikten background-clip: text om de tekst zelf in een gradient te schilderen, de meest herkenbare AI-design signatuur die er op dit moment is. Statistieknummers zweefden in hun eigen kaarten boven de vouw, losgekoppeld van enige lay-outlogica, het soort element dat eruitziet alsof het is toegevoegd omdat een sjabloon ergens er een heeft, niet omdat deze specifieke pagina het nodig had.

Niets hiervan is incompetent. Het is de output van een model dat over het algemeen goed is in webdesign en geen specifiek standpunt heeft over dit specifieke merk, dus grijpt het naar dezelfde zetten die verschijnen wanneer dezelfde vraag wordt gesteld zonder meer beperkingen. Een run van 63.329 tokens kocht een verzendbare pagina. Het kocht geen pagina die iemand zich zou herinneren, en het is dezelfde pagina die we zouden verwachten van de meeste skills in onze beste design skills roundup als je de design skill er weer uit haalt.

Wat de skill-arm anders bouwde

De skill-geleide run las de daadwerkelijke anthropics/skills frontend-design SKILL.md voordat er iets werd geschreven, en de resulterende pagina leest alsof deze van een geheel andere designbrief kwam. Donker marineblauwe achtergrond (--bg: #0B1119) gecombineerd met een messing accent (--brass: #D2A25C), een combinatie die nergens in de zoekruimte van de baseline voorkomt en leest als een bewuste keuze in plaats van een standaard. 985 regels, vier gradients in plaats van elf, en nul gevallen van gradient-text. Niet minder, nul. Het typesysteem was gedisciplineerd op een manier die dat van de baseline niet was: consistente schaal, consistente gewichtslogica, koppen die gekozen lijken in plaats van op maat gemaakt.

Niets aan deze pagina schreeuwt "premium" zoals een stockfoto van een handdruk "corporate" schreeuwt. Het is rustiger dan dat. Het palet is ongebruikelijk genoeg dat het niet als een sjabloon leest, en de terughoudendheid met gradients betekent dat de overgebleven gradients daadwerkelijk gewicht dragen in plaats van alles wat ze aanraken te versieren. Als je beide pagina's aan een klant zou geven en zou vragen welke een designbewuste oprichter zou lanceren, is dit geen moeilijke keuze.

De cijfers

	Baseline (geen skill)	Skill-arm (frontend-design)	Delta
Gebruikte tokens	63,329	125,165	+98%
Tool calls	6	57	+51
Output lengte	890 regels	985 regels	+95 regels
Gradients	11	4	-7
Gradient-tekst instanties	2	0	-2
Palet	Licht, papier + amber	Donker marine + messing	—

Het tokenaantal is de hoofdzaak en het is niet subtiel: de skill-run kostte bijna twee keer zoveel. Dat is geen afrondingsfout die je aan ruis kunt toeschrijven, en het is het getal waartegen elke andere bewering in dit stuk moet worden afgelezen.

Waarom de skill meer kost

Het tokenverschil gaat niet echt over de bestandsgrootte van de skill. SKILL.md-bestanden zijn typisch een paar duizend tokens, op zichzelf niet genoeg om een 63k-token run te verdubbelen. Wat er werkelijk gebeurde, is zichtbaar in het aantal tool-calls: 6 versus 57. De baseline-run schreef de pagina en was klaar. De skill-run las de skill, itereerde er vervolgens tegenaan, controleerde zijn eigen output tegen een checklist die de skill uiteenzet, paste de spatiëring aan, herzag kleurkeuzes, en twijfelde aan een lay-outbeslissing die het al eens eerder had genomen.

Dat is het mechanisme, en het is de moeite waard om te benoemen omdat het betekent dat de tokenskosten niet "een langer document lezen" zijn. Het is "het werk meer dan eens doen." Een skill die beschrijft hoe goed design eruitziet, verandert een single-pass generatietaak in iets dat meer lijkt op een zelfbeoordelingslus, en zelfbeoordelingslussen zijn van nature duur in tokens, of een mens of een model ze nu uitvoert.

Wanneer +98% tokens een koopje is, en wanneer niet

Als het eindproduct het ontwerp is, is dit geen moeilijke beslissing. Een landingspagina waar een klant naar zal kijken, een portfolio-stuk, alles waarbij "ziet dit eruit alsof het door iemand met smaak is gemaakt" deel uitmaakt van de functieomschrijving: de tokenskosten hier zijn eerder een afrondingsfout dan een budgetpost. Niemand discussieert over het betalen van een ontwerper voor een tweede concept. Een model betalen in tokens voor de equivalente iteratie is dezelfde transactie tegen een veel lagere prijs, zelfs bij het dubbele van de baselinekosten.

Als het eindproduct een interne tool is, een prototype dat niemand buiten het team zal zien, of een pagina die bestaat om te bewijzen dat een API-endpoint werkt in plaats van een merk te vertegenwoordigen, sla het dan over. De papier-en-amber pagina van de baseline met zijn verdwaalde gradients doet het werk. Niemand die een intern adminpaneel evalueert, zal opmerken dat de kop background-clip: text gebruikte, en het dubbele van de tokens betalen om een fout te herstellen die niemand zal zien, is geen kwaliteitsaankoop, het is gewoon een hogere rekening.

Het beslissingspunt is niet de kwaliteit van de skill, die reëel is. Het is of iemand het resultaat nauwkeurig genoeg zal bekijken om erom te geven.

Hoe je dit zelf kunt reproduceren

Je hebt onze exacte brief niet nodig om deze vergelijking op je eigen werk uit te voeren. De opzet is eenvoudig genoeg om in een middag te herhalen.

• Schrijf een brief met concrete beperkingen: een productnaam, een specifieke set secties, een specifieke prijsstructuur, "geen frameworks" als dat voor jou belangrijk is. Vage brieven produceren vage delta's, omdat er minder is waar een design skill tegenaan kan duwen.
• Voer het één keer uit met een schoon model en zonder geïnstalleerde skills. Sla de output op en noteer het tokenaantal uit je telemetrie, geen schatting.
• Installeer frontend-design (of welke design skill je ook evalueert), herstart je sessie zodat de beschrijving van de skill vers geladen is, en voer de identieke brief opnieuw uit, alleen gewijzigd door een regel die het model vertelt de skill te lezen en te volgen.
• Vergelijk de twee outputs op de specifieke 'tells' die we hier vonden: aantal gradients, gebruik van background-clip: text, of het palet gekozen of standaard oogt, of de typeschaal consistent is. Lees ons testprotocol voor de uitgebreidere versie van dit proces, inclusief de triggerbatterij die we uitvoeren vóór elke outputvergelijking.
• Vergelijk de tokenaantallen als laatste, nadat je een mening hebt gevormd over de output. Als je eerst naar de rekening kijkt, beïnvloedt dat hoe genereus je bent met de visuele vergelijking, en die volgorde is belangrijker dan het klinkt.

Veelgestelde vragen

Verdubbelt de frontend-design skill altijd het tokengebruik? Niet noodzakelijkerwijs, en we claimen geen vaste vermenigvuldiger. Deze run toonde +98% op één brief met één model. Het mechanisme achter de toename, meer tool calls omdat het model de output controleert tegen de eigen richtlijnen van de skill, zou moeten generaliseren, maar het exacte percentage zal variëren met de complexiteit van de brief en hoeveel heen-en-weer het model besluit nodig te hebben.

Is één run per arm genoeg om deze cijfers te vertrouwen? Genoeg om het patroon te vertrouwen, niet genoeg om het precieze percentage te vertrouwen. We noemen dit bewust N=1, zodat niemand het verwart met een gecontroleerde studie. Wat we met meer vertrouwen kunnen zeggen, is de richting: skill-geleide iteratie kost meer en produceert een zichtbaar meer overwogen resultaat, een patroon dat naar voren komt bij elke design-skill vergelijking die we minder formeel hebben uitgevoerd in normale tests.

Waarom Claude niet gewoon vragen om "gradient-text en generiek AI-design te vermijden"? Dat kan, en het zal enigszins helpen. Maar een instructie van één regel draagt niet de redenering die een volledige skill wel doet, de specifieke paletlogica, de typeschaalregels, de checklist waartegen het model itereert. Ons volledige testprotocol behandelt waarom instructies op promptniveau en op skill-niveau de neiging hebben om verschillende dieptes van resultaat te produceren, zelfs wanneer ze hetzelfde doel nastreven.

Hoe verhoudt dit zich tot Claude's output bij andere soorten taken? Designtaken zijn het geval waar een skill de meest voor de hand liggende ruimte heeft om te helpen, omdat "ziet dit er onderscheidend uit" leesbaar is, zelfs zonder een scorekaart. Onze andere Skill Bench-items testen skills tegen een Telegram bot-bouw, een debugsessie en een scriptaudit, drie domeinen waar de winst, als die er is, er anders uitziet dan een mooier palet. Zie de volledige methodologie voor hoe we scoren over alle vier.

We kozen deze brief omdat een landingspagina het nut van een design skill voor zichzelf bewijst zonder enige interpretatie. Bekijk de twee pagina's naast elkaar en het palet, het aantal gradients en de typografische discipline vertellen je alles wat de tokentabel niet kan. De volgende bijdrage in deze serie ruilt die visuele duidelijkheid in voor iets dat moeilijker te beoordelen is: een werkende bot, waarbij "beter" moet worden beoordeeld aan de hand van of het ding werkt.