LLM
Claude Code design skill installeren: Taste Skill, awesome-design-md, Playwright, de richtlijnen van Vercel en Screenshot to Code, met commando's en prompts.
Een Claude Code design skill installeer je met één of twee commando's in de terminal, vanuit je projectmap. In deze gids zetten we vijf tools neer die samen zorgen dat Claude Code websites bouwt die niet meer naar AI ogen: Taste Skill, awesome-design-md, Playwright, de Web Design Guidelines van Vercel en Screenshot to Code. Per tool lees je wat hij doet, hoe je hem installeert en een prompt om meteen te testen.
Wat haal je uit deze gids?
Deze gids is de uitwerking van onze video over vijf designtools voor Claude Code. Wat deze 5 tools doen en waarom je ze nodig hebt, lees je in Claude Code design: 5 tools voor je website. Hier gaat het om het installeren en gebruiken. De gids is gebaseerd op de officiële documentatie van de makers, gecontroleerd op 13 oktober 2026. Commando's en namen kunnen per versie veranderen.
Vijf tools geïnstalleerd en getest, elk met één commando of één bestand.
Een vaste stijl in je project, zodat elke pagina die Claude bouwt bij elkaar past.
Claude die zijn eigen werk bekijkt op desktop en mobiel, voordat jij het ziet.
Een eerlijk beeld van wat je níét nodig hebt, zodat je geen tools installeert die Claude Code zelf al kan.
In 20 minuten
Zet een designsysteem in je projectmap (awesome-design-md).
Installeer Taste Skill en laat Claude een eerste pagina bouwen (Taste Skill).
Voeg Playwright toe en laat Claude zijn eigen werk bekijken (Playwright).
Keur het resultaat met de richtlijnen van Vercel voordat je live gaat (Web Design Guidelines).
Voor wie is dit? Ondernemers, marketeers en makers die met Claude Code hun eigen website of landingspagina's bouwen, en vinden dat het resultaat er te standaard uitziet. Je hoeft geen developer te zijn, maar je moet wel een terminal durven openen en een commando kunnen plakken.
Wat heb je nodig voordat je begint?
Je hebt Claude Code nodig, een projectmap voor je website en Node.js versie 18 of nieuwer. Node.js gebruiken twee van de vijf tools om zichzelf te installeren. Verder geen accounts of betaalde abonnementen, behalve bij Screenshot to Code: die werkt met een eigen API-sleutel van een AI-aanbieder.
Open een terminal in je projectmap en controleer of alles er is:
Commando's: controleren wat je hebt
node --version
claude --version
Zie je bij Node een versie onder de 18, of "command not found", installeer dan eerst de LTS-versie van Node.js. Start daarna Claude Code met claude in je projectmap. Alle commando's met een schuine streep ervoor (zoals /plugin) typ je ín Claude Code, de rest in de gewone terminal.
Welke vijf tools zijn het, en wat doen ze?
Tool | Wat hij doet | Waar hij draait | Nodig? |
|---|---|---|---|
awesome-design-md | Kant-en-klare designsystemen in de stijl van bekende sites, als één tekstbestand | Een bestand in je project | Ja, begin hiermee |
Taste Skill | Geeft Claude regels voor lay-out, typografie, beweging en witruimte | Skill in Claude Code | Ja |
Playwright | Laat Claude zelf een browser openen, klikken en screenshots maken | MCP-koppeling in Claude Code | Ja, de grootste winst |
Web Design Guidelines | Toetst je code aan de richtlijnen van Vercel voor webinterfaces | Skill in Claude Code | Aanrader vóór livegang |
Screenshot to Code | Maakt code van een screenshot, mockup of schermopname | Eigen app met API-sleutel | Optioneel |
Ken je Claude Code nog niet goed? Lees dan eerst Hoe werkt Claude? De zes niveaus uitgelegd. Wil je zonder code ontwerpen, dan is Claude Design het losse product van Anthropic; dat verschil lees je in Kun je een website maken met Claude Design?
Hoe zet je een designsysteem met awesome-design-md in je project?
Je kiest in de verzameling awesome-design-md een site waarvan je de stijl mooi vindt, kopieert het bestand DESIGN.md van die site naar de hoofdmap van je project en vertelt Claude Code dat hij het moet volgen. Er is geen installatie of commando nodig: het is één tekstbestand dat Claude bij elke pagina leest.
De verzameling is een openbare repository op GitHub van VoltAgent; zoek op "awesome-design-md". Per site staan er een DESIGN.md en een voorbeeldpagina in licht en donker, zodat je eerst ziet hoe de stijl eruitziet. Er zitten onder andere designsystemen in de stijl van Claude, Cursor, Vercel, Stripe, Linear, Notion, Spotify en Apple in.
DESIGN.md hoort in de hoofdmap van je project, naast CLAUDE.md. Schematische weergave.
Wat staat er in zo'n DESIGN.md?
Elk bestand heeft dezelfde negen onderdelen. Daardoor hoeft Claude niets meer te raden over je stijl:
Onderdeel | Wat Claude eruit haalt |
|---|---|
Thema en sfeer | Het gevoel van de site: rustig, zakelijk, speels |
Kleurenpalet met rollen | Welke kleur voor achtergrond, tekst, knoppen en accenten |
Typografie | Lettertypes, groottes en gewichten per niveau |
Componenten | Hoe knoppen, kaarten, formulieren en menu's eruitzien |
Lay-out | Raster, breedtes en witruimte |
Diepte | Schaduwen en lagen |
Do's en don'ts | Wat past bij de stijl en wat niet |
Responsief gedrag | Wat er verandert op tablet en telefoon |
Promptgids voor de agent | Hoe een AI-agent het bestand moet gebruiken |
Hoe maak je er je eigen huisstijl van?
Een designsysteem van een bekende site is een startpunt, geen eindpunt. De makers zeggen er zelf bij dat ze geen eigendom claimen van de visuele identiteit van die sites. Neem dus de opbouw en de verhoudingen over, en vervang kleuren, lettertypes en logo door die van jezelf. Dat laat je Claude doen:
Prompt 1: DESIGN.md op je eigen huisstijl zetten
Lees DESIGN.md in de hoofdmap van dit project.
Pas het aan op onze huisstijl en houd de opbouw, verhoudingen en witruimte zoals ze zijn:
- Hoofdkleur: [hex-code]
- Accentkleur: [hex-code]
- Lettertype koppen: [naam]
- Lettertype tekst: [naam]
- Toon van de site: [bijvoorbeeld rustig en zakelijk]
Laat me per onderdeel zien wat je veranderde.
Zet daarna in CLAUDE.md de regel: "Volg bij elk ontwerp DESIGN.md."
Die laatste regel in CLAUDE.md is het verschil tussen één mooie pagina en een site die overal bij elkaar past. CLAUDE.md leest Claude Code bij elke sessie, dus hij vergeet je stijl niet als je morgen verder bouwt.
Tip: Begin hiermee, nog voordat je een skill installeert. Een skill voor smaak werkt het best als hij weet binnen welke stijl hij moet blijven. Zonder vaste stijl krijg je wel mooiere pagina's, maar ze passen niet bij elkaar.
Hoe installeer je Taste Skill?
Taste Skill installeer je in Claude Code met twee regels: eerst voeg je de marketplace van de maker toe, daarna installeer je de plugin. Herstart Claude Code, en de skills staan klaar onder de naam taste-skill:. De belangrijkste is design-taste-frontend: regels voor lay-out, typografie, beweging en witruimte, zodat Claude niet meer de veiligste standaardpagina kiest.
Kopieer: Taste Skill installeren (in Claude Code)
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
later bijwerken:
/plugin update
Werk je liever vanuit je gewone terminal, of met een andere AI-agent dan Claude Code? Dan kan het ook met npx. De eerste regel zet alle skills neer, de tweede alleen de hoofdskill:
Kopieer: Taste Skill via npx (in je terminal)
npx skills add https://github.com/Leonxlnx/taste-skill
alleen de hoofdskill:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Eerst installeren, dan bouwen met de skill. Schematische weergave; meldingen kunnen per versie afwijken.
Welke skills zitten erin, en welke heb je nodig?
De plugin zet een hele set neer. Voor een website heb je er meestal twee nodig; de rest is voor een bepaalde stijl.
Skill | Gebruik hem als |
|---|---|
| Je een nieuwe pagina laat bouwen. Dit is de hoofdskill. |
| Je al een site hebt: hij keurt eerst wat er staat en verbetert dan lay-out, witruimte en stijl. |
| Je een rustige, verfijnde stijl wilt met zachte contrasten en veel witruimte. |
| Je een strakke productsite wilt met weinig kleur. |
| Je bewust hard en experimenteel wilt. |
| Claude stukken overslaat of "rest van de code hier" laat staan. |
Hoe gebruik je hem?
Noem de skill gewoon in je opdracht, samen met je DESIGN.md. Zo weet Claude welke regels hij volgt én binnen welke stijl:
Prompt 2: een pagina bouwen met smaak
Bouw de homepage van deze site.
Gebruik de skill design-taste-frontend en volg DESIGN.md.
Wat de pagina moet doen: [bijvoorbeeld bezoekers een kennismakingsgesprek laten boeken]
Onderdelen: [bijvoorbeeld kop met belofte, drie diensten, ervaringen, contact]
Vermijd de standaard AI-look: geen paarse gradient, geen gecentreerde kop met drie gelijke kaartjes.
Vertel me na afloop welke ontwerpkeuzes je maakte en waarom.
Heb je al een site? Vraag dan om redesign-existing-projects in plaats van de hoofdskill. Die begint met een keuring van wat er staat, zodat je ziet wat hij wil veranderen voordat hij iets aanpast.
Let op: Op sommige plekken lees je over drie knoppen voor variatie, beweging en dichtheid (elk van 1 tot 10). Die zitten alleen in de oudere versies,
design-taste-frontend-v1en de experimentele v2 die de plugin ook meelevert, bovenaan het skillbestand. De huidige hoofdskill werkt zonder die knoppen. Wil je ermee spelen, kies dan bewust zo'n oudere versie.
Hoe laat je Claude zijn eigen werk zien met Playwright?
Je koppelt Playwright met één regel in je terminal aan Claude Code: claude mcp add playwright npx @playwright/mcp@latest. Daarna kan Claude zelf een browser openen, naar je pagina gaan, klikken en screenshots maken. Hij ziet dan wat hij bouwde, in plaats van alleen de code die hij schreef. Van de vijf tools levert deze de meeste winst op.
Kopieer: Playwright koppelen (in je terminal)
claude mcp add playwright npx @playwright/mcp@latest
controleren of hij erbij staat:
claude mcp list
Playwright is van Microsoft en heeft Node.js 18 of nieuwer nodig. Het is geen skill maar een MCP-koppeling: een verbinding waarmee Claude Code een ander programma kan bedienen, in dit geval een browser. Start Claude Code na het koppelen opnieuw. In Claude Code toont /mcp of de koppeling verbonden is.
Wat kan Claude ermee?
Een pagina openen, ook je lokale versie op
localhost.Klikken en invullen, zodat hij een menu, formulier of knop echt test.
Screenshots maken, van het scherm of van de hele pagina, en die zelf bekijken.
De opbouw van de pagina lezen, zodat hij ziet welke knop waar staat en wat er ontbreekt.
Standaard opent de browser in een eigen venster, zodat je kunt meekijken. Wil je dat niet, dan kan de koppeling ook zonder venster draaien; die opties staan in de documentatie van Playwright MCP.
Hoe test je of het werkt?
Start je site lokaal (bijvoorbeeld met npm run dev) en geef Claude deze opdracht. Krijg je screenshots en een lijst met verbeteringen terug, dan werkt het.
Prompt 3: Claude zijn eigen werk laten keuren
Open http://localhost:3000 met Playwright.
Maak een screenshot van de hele pagina op desktop (1440 px breed) en op mobiel (390 px breed).
Bekijk beide en noem wat er mis is: tekst die over een beeld loopt, knoppen die buiten beeld vallen,
te weinig witruimte, iets wat niet bij DESIGN.md past.
Los de punten één voor één op en maak na elke wijziging een nieuw screenshot om te checken.
Stop als er op beide breedtes niets meer mis is.
Gebruik je een andere poort, pas het adres dan aan. Het effect is dat jij niet na elke wijziging zelf een screenshot hoeft te maken en uit te leggen wat er mis is: dat heen-en-weer werk doet Claude nu zelf.
Let op: Laat Playwright alleen pagina's openen die je vertrouwt, en niet ingelogd op accounts met gevoelige gegevens. Wat de browser ziet, leest Claude ook.
Hoe controleer je je site met de Web Design Guidelines van Vercel?
De Web Design Guidelines zijn een skill van Vercel. Je installeert hem met npx skills add vercel-labs/agent-skills in je terminal en vraagt Claude daarna om een review van je interface. Hij legt je code naast meer dan honderd regels voor webinterfaces en geeft per punt aan wat beter kan. Draai hem als laatste, vlak voordat je live gaat.
Kopieer: de skills van Vercel installeren (in je terminal)
npx skills add vercel-labs/agent-skills
Dit commando zet de hele verzameling skills van Vercel neer, niet alleen deze. Welke opties er zijn om er één te kiezen, zie je met npx skills --help. De andere skills uit de verzameling kun je laten staan of weghalen; voor deze gids gebruik je alleen web-design-guidelines.
Waar kijkt hij naar?
Onderdeel | Een voorbeeld van wat hij vindt |
|---|---|
Toegankelijkheid en focus | Knoppen zonder zichtbare focus als je met Tab door de pagina gaat |
Formulieren | Velden zonder label of zonder duidelijke foutmelding |
Typografie en beelden | Beelden zonder alt-tekst of zonder vaste maat, waardoor de pagina verspringt |
Animatie en prestaties | Beweging die niet stopt voor wie minder beweging heeft ingesteld |
Navigatie, touch en thema's | Te kleine tikvlakken op mobiel, of een donkere modus die niet klopt |
De voorbeelden zijn van ons, de onderdelen van Vercel. De skill reageert op opdrachten als "Review my UI", "Check accessibility" of "Audit design". In het Nederlands vragen werkt ook, zolang je zegt dat hij de skill moet gebruiken:
Prompt 4: de laatste keuring voor livegang
Review de interface van deze site met de skill web-design-guidelines.
Geef de punten op volgorde van belang, met per punt het bestand en wat er mis is.
Los daarna de tien belangrijkste op. Verander niets aan DESIGN.md of de huisstijl.
Maak na afloop met Playwright nieuwe screenshots op desktop en mobiel
en laat zien dat de pagina er nog hetzelfde uitziet.
Tip: Laat hem eerst alleen de lijst maken, zonder iets op te lossen. Dan zie je wat hij vindt en kies je zelf wat er nu moet gebeuren en wat kan wachten.
Wanneer gebruik je Screenshot to Code, en wanneer niet?
Werk je al in Claude Code, dan heb je Screenshot to Code meestal niet nodig: Claude Code leest zelf screenshots. Je sleept het beeld in je terminal of plakt het, en vraagt hem de pagina na te bouwen. Screenshot to Code is een losse app met een eigen API-sleutel, en die is vooral handig voor een schermopname, voor een andere techniek dan je project gebruikt, of als je zonder Claude Code werkt.
Eerlijk is eerlijk: in de video noemen we hem als vijfde tool, maar bij het uitwerken van deze gids bleek dat hij voor de meeste lezers overbodig is. Daarom eerst de route zonder extra tool.
Hoe doe je het zonder extra tool?
Maak een screenshot van het design dat je mooi vindt. Op een Mac met Cmd + Shift + 4.
Sleep het beeld in je terminal met Claude Code, of plak het met Ctrl + V.
Geef de opdracht hieronder. Laat hem de opbouw overnemen, niet het merk.
Laat hem kijken met Playwright of zijn versie op het voorbeeld lijkt.
Prompt 5: van screenshot naar pagina in Claude Code
Hier is een screenshot van een sectie die ik mooi vind.
Bouw dezelfde opbouw na in ons project: de indeling, verhoudingen en witruimte.
Gebruik onze eigen kleuren, lettertypes en teksten uit DESIGN.md, niet die van het voorbeeld.
Neem geen logo's, foto's of teksten van het voorbeeld over.
Maak daarna met Playwright een screenshot van jouw versie en vergelijk die met het voorbeeld.
Taste Skill heeft hiervoor ook een eigen skill, image-to-code: die maakt eerst referentiebeelden, analyseert ze en bouwt daarna de pagina. Handig als je nog geen voorbeeld hebt.
Wanneer is de losse app wél handig?
Situatie | Kies |
|---|---|
Je werkt in Claude Code en hebt een screenshot | Claude Code zelf (prompt 5) |
Je wilt van een schermopname (video) een werkende pagina | Screenshot to Code, met een sleutel van Gemini |
Je wilt snel HTML, React, Vue of Bootstrap zonder project | Screenshot to Code |
Je werkt niet met Claude Code | Screenshot to Code |
Screenshot to Code is open source; zoek op GitHub naar "screenshot-to-code" van abi. Je draait hem op je eigen computer (met Docker het eenvoudigst) of gebruikt de gehoste versie op de site van de maker. In beide gevallen heb je minstens één API-sleutel nodig van OpenAI, Anthropic of Gemini. Voor video heb je een sleutel van Gemini nodig.
Kosten: Elke conversie gaat via jouw API-sleutel en kost dus tegoed bij die aanbieder, los van je Claude-abonnement. Zet bij de aanbieder een maximum per maand voordat je begint.
In welke volgorde zet je de tools in?
Zet eerst je stijl vast en geef Claude smaak mee, laat hem dan bouwen, en controleer pas daarna: eerst met Playwright tijdens het bouwen, als laatste met de richtlijnen van Vercel vlak voor livegang. Zo stuur je vooraf bij in plaats van achteraf eindeloos te verbeteren.
De werkvolgorde: twee stappen vooraf, bouwen, twee controles en je eigen check.
Stap | Tool | Wanneer |
|---|---|---|
1. Stijl vastleggen | awesome-design-md | Eén keer per project, vóór de eerste pagina |
2. Smaak meegeven | Taste Skill | Bij elke nieuwe pagina of herontwerp |
3. Bouwen | Claude Code | Per pagina of sectie |
4. Zelf laten kijken | Playwright | Na elke grote wijziging |
5. Laatste keuring | Web Design Guidelines | Vlak voordat je live gaat |
6. Zelf nakijken | Jij, op je eigen telefoon | Altijd, vóór publiceren |
Wat levert deze volgorde op?
Bij ons is het grootste verschil de snelheid: we zetten een website nu veel sneller live, zonder eerst eindeloos prompts en designs bij te schaven. De tijd ging vroeger vooral naar bijsturen: nog een keer uitleggen welke kleuren, welke witruimte en waarom die knop anders moet. Met de stijl en de smaak vooraf vastgelegd staat de eerste versie al dichter bij wat je wilt, en de controles vangen de rest.
Wil je alles in één keer starten? Deze prompt zet de hele volgorde in gang op een nieuw project:
Prompt 6: de hele werkvolgorde in één opdracht
We bouwen [beschrijf de site] in deze projectmap. Werk in deze volgorde en wacht na elke stap op mijn akkoord:
1. Lees DESIGN.md en vat de stijl in vijf regels samen.
2. Bouw de homepage met de skill design-taste-frontend, binnen DESIGN.md.
3. Open de pagina met Playwright, maak screenshots op 1440 en 390 px en verbeter wat je ziet.
4. Doe een review met de skill web-design-guidelines en geef de tien belangrijkste punten.
5. Los die op en maak opnieuw screenshots.
Waar let je op met veiligheid en kosten?
Installeer alleen tools die je vertrouwt, neem geen merk van een ander over en zet een maximum op je API-tegoed. Een skill of koppeling draait met jouw rechten op jouw computer, een designsysteem van een bekende site is een startpunt en geen kopie, en alleen Screenshot to Code kost extra geld per gebruik.
Lees wat je installeert. Open het skillbestand voordat je hem gebruikt; het is gewone tekst.
Plugins van buiten de officiële marketplace werken niet vanzelf bij. Draai af en toe
/plugin update.Kopieer geen merk. Vervang kleuren, lettertypes en logo in je DESIGN.md door die van jezelf.
Playwright niet op gevoelige accounts. Laat hem je eigen lokale site testen, niet je bankomgeving of je klantsysteem.
Maximum op API-tegoed als je Screenshot to Code gebruikt.
Zelf nakijken blijft nodig. Bekijk elke pagina op je eigen telefoon en lees mee wat Claude aanpast voordat je publiceert.
Tool | Extra kosten |
|---|---|
awesome-design-md | Geen: een tekstbestand |
Taste Skill | Geen: valt binnen je gebruik van Claude Code |
Playwright | Geen: valt binnen je gebruik van Claude Code |
Web Design Guidelines | Geen: valt binnen je gebruik van Claude Code |
Screenshot to Code | Tegoed bij de AI-aanbieder van je API-sleutel |
Screenshots en reviews maken je sessies wel langer, dus je gebruikt iets meer van je Claude-limiet. Dat valt meestal weg tegen de rondes bijsturen die je bespaart.
Wat is je volgende stap?
Begin vandaag met twee tools, niet met vijf.
Zet een DESIGN.md in je project en pas hem aan met prompt 1.
Koppel Playwright en laat Claude met prompt 3 je huidige homepage keuren.
Voeg Taste Skill toe zodra je de volgende pagina bouwt.
Wat deze 5 tools doen en wat ze ons opleveren, lees je nog eens kort in Claude Code design: 5 tools voor je website. Wil je zulke workflows voor je eigen bedrijf laten bouwen, kijk dan bij AI-automatisering.
Win 10 uur per week terug met je eerste AI-medewerker.
De GenAI Academy is de AI-opleiding van Het AI Lokaal voor ondernemers en professionals die hun werk willen automatiseren met AI.
Geen cursus over AI, maar een systeem dat je bouwt.
#1 in Nederland & België
CIC Rotterdam, maandelijkse co-build sessie
Door
Mede-oprichter van Het AI Lokaal. Traint dagelijks teams in AI en creative AI, van eerste prompt tot werkende workflow.
Deel artikel
Veelgestelde vragen
Claude Code design skill installeren
Een Claude Code design skill installeer je met één of twee commando's in de terminal, vanuit je projectmap. In deze gids zetten we vijf tools neer die samen zorgen dat Claude Code websites bouwt die niet meer naar AI ogen: Taste Skill, awesome-design-md, Playwright, de Web Design Guidelines van Vercel en Screenshot to Code. Per tool lees je wat hij doet, hoe je hem installeert en een prompt om meteen te testen.
Hoe installeer je Taste Skill?
Taste Skill installeer je in Claude Code met twee regels: eerst voeg je de marketplace van de maker toe, daarna installeer je de plugin. Herstart Claude Code, en de skills staan klaar onder de naam taste-skill:. De belangrijkste is design-taste-frontend: regels voor lay-out, typografie, beweging en witruimte, zodat Claude niet meer de veiligste standaardpagina kiest.
Wanneer gebruik je Screenshot to Code, en wanneer niet?
Werk je al in Claude Code, dan heb je Screenshot to Code meestal niet nodig: Claude Code leest zelf screenshots. Je sleept het beeld in je terminal of plakt het, en vraagt hem de pagina na te bouwen. Screenshot to Code is een losse app met een eigen API-sleutel, en die is vooral handig voor een schermopname, voor een andere techniek dan je project gebruikt, of als je zonder Claude Code werkt.