Hoe Claude Code mij tot UI-ontwerper maakte
Ik heb een bekentenis die me uit elk designbijeenkomst zou laten lachen: ik ben al jaren software-engineer en ik kan nog steeds geen knop van nul mooi laten zien. Geef me een complex gedistribueerd systeem? Ik architecteer het in mijn slaap. Vraag me een kleurenpalet te kiezen en een hero-sectie op te zetten? Dan staar ik een uur lang naar een leeg scherm en produceer iets dat eruitziet alsof het in 2009 is gekropen.
Dat veranderde drie weken geleden toen ik een enkel markdown-bestand in mijn Claude Code-setup installeerde.
Het bestand heet een "front-end design skill", en het transformeert Claude Code van een codeerassistent naar iets wat ik niet verwachtte — een echt capabele UI-ontwerper die een korte tekstprompt neemt en hero-secties, landingspagina's en componentlay-outs produceert die eruitzien alsof een echte designer ze heeft gebouwd. Ik liet het aan een designervriend zien en ze vroeg welk Dribbble-shot ik als referentie had gebruikt.
Ik ontdekte dit via een 30-daagse UI-designchallenge op designcourse.com, waar meer dan 600 deelnemers allemaal Claude Code gebruiken om ontwerpen te genereren van dezelfde bedrijfsprompt. Zelfde fictief bedrijf, zelfde beperkingen, wildly verschillende resultaten — omdat de differentiator niet de AI is. Het is hoe je ertegen praat.
Waarom engineers lelijke dingen bouwen
Engineering-cultuur behandelt designvaardigheid als optioneel. Je hoort het overal: "Ik ben meer van de backend." "Ik heb het designgen niet." "Maak het gewoon functioneel, we huren wel iemand in om het er mooi uit te laten zien."
Deze mentaliteit creëert een echt probleem. De meeste side projects, interne tools en MVP's sterven er lelijk uitziend — niet omdat het engineeringwerk slecht is, maar omdat de persoon die ze bouwt de kloof niet kan overbruggen tussen "werkend" en "iemand zou dit eigenlijk willen gebruiken."
Het design skill-gap gaat niet over talent. Het gaat over woordenschat. Designers denken in visuele hiërarchie, witruimte, typografieschaal en kleurverhoudingens. Engineers denken in logica, efficiëntie en systeemarchitectuur. Beide zijn vaardigheden. Niemand is geboren met design-intuïtie — ze bouwen het op door patronen te studeren en feedback te ontvangen. De front-end design skill geeft Claude Code die patroondatabase.
De skill installeren: twee minuten
De installatie is eenvoudig. Open Claude Code, typ het installeer-commando voor de front-end design skill:
/install-skill frontend-design
Claude Code downloadt en installeert de skill in je configuratie. De skill zelf is een markdown-bestand — je kunt het inspecteren als je wilt — maar je hoeft de inhoud ervan niet te begrijpen om het te gebruiken.
Eenmaal geïnstalleerd activeer je het met de /frontend slash-commando:
/frontend design Create a hero section for a B2B SaaS product.
Modern and professional with a trust-building focus.
Primary color #2563eb. White background.
Wat de output er daadwerkelijk uitziet
De skill genereert complete HTML/CSS. Geen partial snippets. Geen code die je nog moet integreren. Een werkend component dat je direct in een browser kunt openen.
Hier is wat een prompt genereerde voor een fictief AI-inspectieservicebedrijf:
/frontend design Hero section for an AI-powered home inspection service.
Target audience: homeowners and real estate agents.
Include headline, subheadline, CTA button, trust indicators (certifications).
Warm, approachable feel — not cold or techy. Use #2d6a4f as primary color.
De output was een volledig gestileerde hero-sectie met een gradient-achtergrond in de opgegeven kleur, een groot sans-serif kopje, een subkopje van drie regels dat de propositie uitlegt, twee CTA-knoppen (primair en secondair), en een rij met trustbadges.
Ik was onder de indruk, maar sceptisch. Dus ik voerde dezelfde businessprompt in de challenge: "Build a landing page for an AI home inspection service targeting homeowners." Exact dezelfde prompt als 600 andere deelnemers hadden ontvangen.
De resultaten waren verbluffend gevarieerd. Sommige deelnemers produceerden schone, minimalistische lay-outs. Anderen produceerden gelaagde ontwerpen met meerdere secties. Een deelnemer had er zelfs illustratieve graphics en handgetekende accenten in opgenomen. De variatie bewijst iets belangrijks: de front-end design skill legt geen stijl op. Het geeft Claude Code designgeletterdheid.
Hoe de beste designers de tool gebruiken
Ik bladerde door tientallen inzendingen en merkte patronen op die de sterkste ontwerpen van de zwakste scheidden:
Sterke ontwerpen beschreven een gevoel, niet alleen features. "Maak het aanvoelen als een vertrouwde familieoannemer's website, maar modern" produceert fundamenteel andere output dan "voeg een header met bedrijfsnaam en CTA-knop toe."
Sterke ontwerpen specificeerden wat ze niet wilden. "Geen stockfoto-vibes. Geen generieke tech startup-esthetiek. Geen gradiënten die eruitzien als elke SaaS-landingspagina." Beperkingen scherpen de beslissingen van de AI aan.
Sterke ontwerpen itereerden. De beste inzendingen deelden openlijk dat ze 4-7 prompts gebruikten om hun eindontwerp te bereiken. Niemand produceerde zijn beste werk op de eerste poging.
Zwakke ontwerpen behandelden de AI als een verkoopautomaat. Één prompt, accepteer de output, klaar.
De diepere les: skills zijn een patroon, niet een feature
Hier is wat mij het meeste verraste bij het ontdekken van de front-end design skill: het is niet magie. Het is een patroon.
Een skill in Claude Code is in wezen een markdown-bestand dat gespecialiseerde instructies, kennis en workflows bevat. Wanneer je een skill activeert, zet je dat bestand in de context van Claude Code. Het model past zijn gedrag aan op basis van die extra instructies.
Dat patroon is toepasbaar op elk domein. Een security-auditskill zou Claude Code diepgaande kennis geven van OWASP-kwetsbaarheden en auditpatronen. Een databaseoptimalisatieskill zou het begeleiden bij queryanalyse. Een technische schrijfskill zou het richten op documentatiestandaarden.
De front-end design skill was de eerste die mijn hersens klikte liet voelen. Maar het was de implicatie van het systeem die echt transformatief is: je kunt Claude Code omzetten in een domeinexpert in elk vakgebied door de juiste instructies te installeren.
De 10-minuten uitdaging
Dit is wat ik wil dat je vandaag doet. Niet deze week. Vandaag.
Installeer de front-end design skill. Twee minuten. Open dan Claude Code en typ dit:
/frontend design Create a hero section for [je side project of huidig werkproject].
Modern, clean, [één bijvoeglijk naamwoord dat de sfeer beschrijft die je wilt].
Include a headline, supporting copy, and a primary CTA.
Vul de haakjes in. Verstuur het. Open het gegenereerde HTML-bestand in je browser.
Ik wed dat je doet wat ik deed — een paar seconden zitten denken "wacht, ik zou dit eigenlijk kunnen shippen." En dan stuur je een tweede prompt. En een derde.
Jarenlang vertelde ik mezelf dat ik geen designer was. Blijkt dat ik gewoon niet de juiste tools had. Nu heb ik ze — en de kloof tussen "functioneel" en "mooi" is nooit kleiner geweest.
