Van huisstijlhandboek naar werkende skill
Stap voor stap een design-system skill bouwen voor de huisstijl van een klant — zodat Claude voortaan automatisch on-brand webpagina's, dashboards en HTML-artifacts maakt. Zelfde recept als de Wortell-skill, andere merkwaarden.
.skill-bestand Oriëntatie
Wat je precies gaat maken
Begrijp het model voordat je begint te kopiëren.
Een "huisstijl-skill" is een mapje met drie soorten bestanden die Claude inleest zodra een klantopdracht om hun merk vraagt. Het kernidee: de merkwaarden zitten in één tokens-bestand, de rest is herbruikbaar. Je vervangt dus vooral kleuren, fonts en spacing — niet de hele machine.
De drie onderdelen
- SKILL.md — het brein. Bevat de
descriptiondie bepaalt wanneer Claude de skill activeert, plus de spelregels van het merk. - assets/ — de CSS-tokens en componenten + een kant-en-klaar HTML-startbestand.
- references/ & examples/ — verdieping (kleursysteem, typografie, do's & don'ts) en minstens één volledig uitgewerkte voorbeeldpagina.
description in SKILL.md is verreweg het belangrijkste én meest onderschatte onderdeel. Een perfecte CSS die nooit triggert is waardeloos. Besteed hier bewust tijd aan (stap 5).Materiaal verzamelen
Zonder compleet bronmateriaal bouw je een halve skill.
Vraag de klant (of zoek zelf) het volledige huisstijlhandboek op plus de losse assets. Inventariseer wat je hebt en wat ontbreekt.
| Verzamel | Waarom | Vaak het probleem |
|---|---|---|
| Huisstijlhandboek (PDF) | Bron voor alle regels | Vaak print-gericht, niet web |
| Exacte kleurcodes | Tokens | Alleen Pantone/CMYK → omrekenen naar HEX/RGB |
| Lettertypes + licentie | Typografie | Mag het font op web embedden? Zo niet: fallback |
| Logo's (SVG/PNG) | Voorbeeldpagina | Kleurvarianten en marges ontbreken |
| Voorbeelden (site, deck) | Gevoel voor verhouding | Soms inconsistent met het handboek |
Tokens extraheren & mappen
Vertaal het handboek naar semantische rollen.
Een veelgemaakte fout is kleuren letterlijk overnemen (--klant-blauw). Werk in plaats daarvan met semantische rollen: --primary, --accent, --bg, --text. Zo blijven alle componenten herbruikbaar en hoef je per klant alleen de waarden te wijzigen.
| In het handboek | Semantische rol | Voorbeeldwaarde |
|---|---|---|
| Primaire merkkleur | --primary | #4cd275 |
| Steunkleur / accent | --accent | #8400ff |
| Achtergrond / papier | --bg, --surface | #fafafa / #fff |
| Tekstkleur | --text, --text-muted | #0c0116 |
| Koptekst-lettertype | --font-display | Campton, …fallback |
| Body-lettertype | --font-sans | Campton, …fallback |
| Hoeken (afgerond/scherp) | --radius-* | afleiden uit voorbeelden |
| Foutmelding / succes | --danger, --success | vaak zelf bepalen |
SKILL.md.Mapstructuur opzetten
Kopieer de structuur van de Wortell-skill als skelet.
Begin niet vanaf nul. Dupliceer de map van de bestaande Wortell-skill en hernoem alles naar de klant. De structuur ziet er zo uit:
acme-design-system. Deze naam gebruikt Claude intern — hij moet uniek en herkenbaar zijn.CSS bouwen
Eén bestand aanpassen, twee hergebruiken.
De truc: base.css en components.css verwijzen alleen naar variabelen (var(--primary)). Je kunt ze grotendeels één-op-één hergebruiken. Het echte werk zit in tokens.css.
tokens.css — vervang de waarden
:root {
/* Brand */
--primary: #0057b8; /* Acme-blauw */
--primary-hover: #0049a0;
--accent: #ff6a13; /* Acme-oranje */
/* Surfaces & tekst */
--bg: #f6f8fa;
--surface: #ffffff;
--text: #11171f;
--text-muted: #586271;
/* Typografie - fallback als font niet embedbaar is */
--font-display: "Acme Sans", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Acme Sans", "Helvetica Neue", Arial, sans-serif;
/* Vorm - afgeleid uit voorbeelden */
--radius-md: 4px; /* Acme is zakelijk/strak */
}
"Helvetica Neue", Arial, sans-serif) en documenteer dit. Een verkeerd geëmbed font is een juridisch risico, geen detail.base.css & components.css
Open beide bestanden en controleer dat er geen harde hex- of pixelwaarden in staan — alles moet via var(--…). Vind je een hardcoded waarde, til die op naar tokens.css. Verder hoef je hier weinig te doen.
SKILL.md schrijven — het brein
Hier wint of verliest de skill.
Het bestand begint met een frontmatter (tussen ---). De description bepaalt of Claude de skill überhaupt inschakelt. Noem expliciet de klantnaam, synoniemen en concrete triggers.
name: acme-design-system
description: Pas de officiele huisstijl van Acme toe op elke
web/HTML-interface - landingspagina's, dashboards, formulieren,
prototypes en React/Vue-componenten. Gebruik deze skill ALTIJD
wanneer iemand vraagt om een Acme-pagina, iets "in de Acme-stijl",
"Acme-huisstijl", "on-brand voor Acme", of om Acme-kleuren en
-typografie toe te passen op bestaande HTML.
---
# Acme Design System
## Wanneer gebruiken / niet gebruiken
## De 3 ontwerpprincipes (lees eerst)
## Quick start (HTML-skelet + data-attributen)
## Kritische regels (nooit overtreden)
## Referentiebestanden (laad wanneer nodig)
description vanuit de woorden die een collega zou typen, niet vanuit jargon. "maak een Acme-landingspagina", "in onze stijl", "huisstijl toepassen". Hoe concreter de triggerwoorden, hoe betrouwbaarder de activatie.In de body zet je daarna kort: de 2–3 kernprincipes van het merk, het standaard HTML-skelet, en een lijstje harde regels ("nooit kleur X en Y in een gradient", "één primaire knop per scherm"). Houd het scanbaar — geen lange lappen tekst.
Referenties & voorbeeldpagina
Verdieping die Claude pas inleest wanneer nodig.
De references/-bestanden zijn losse markdown-documenten met detail dat niet in SKILL.md hoeft. Claude laadt ze alleen wanneer de taak erom vraagt — dat houdt de skill licht.
color-system.md— alle tokens, semantische rollen, grafiek-/chartkleuren.typography.md— lettertype, schaal, utility-classes, een eventueel "merkmoment"-patroon.components.md— knoppen, cards, formulieren, tabellen, navigatie.do-and-dont.md— korte checklist vóór oplevering.
Maak tot slot minstens één volledige voorbeeldpagina in examples/ (hero, kaarten, formulier). Dit is veruit het beste hulpmiddel: bij twijfel kopieert Claude de verhoudingen en ritme hiervandaan.
Testen tegen het handboek
Vertrouw niet op het oog — toets gericht.
Installeer de skill en geef een neutrale opdracht, bijvoorbeeld: "Maak een landingspagina voor [klant] met een hero, drie waardeproposities en een contactformulier." Controleer daarna:
- Triggerde de skill vanzelf? Zo niet → de
descriptionaanscherpen (stap 5). - Kloppen de kleuren en het font exact met het handboek?
- Worden de harde regels gerespecteerd (logo-gebruik, verboden combinaties)?
- Geen hardcoded waarden in de output? Alles via tokens?
Inpakken & delen
Eén bestand dat collega's kunnen installeren.
Zip de volledige skill-map en geef het de extensie .skill. Dat bestand krijgt in de chat een installeerknop, zodat een collega het in één klik toevoegt.
zip -r acme-design-system.skill acme-design-system/
SKILL.md en noteer de bron-PDF + datum. Plan een check wanneer de klant rebrandt — een verouderde skill produceert overtuigend ogende, maar fout gebrande pagina's.Sneltoets
Prompt-template: laat Claude 80% doen
Je hoeft het niet handmatig te bouwen. Upload het huisstijlhandboek (PDF) in Cowork en plak deze prompt. Loop daarna de output na met dit handboek.
gebaseerd op het bijgevoegde huisstijlhandboek en met exact dezelfde
structuur als onze bestaande wortell-design-system skill.
Doe het volgende:
1. Lees het handboek en extraheer alle kleuren (als HEX), lettertypes
en vormregels (hoeken, ruimte).
2. Map deze naar semantische tokens (--primary, --accent, --bg, --text...)
in een [klant]-tokens.css.
3. Hergebruik onze base.css en components.css; pas alleen tokens aan.
4. Schrijf een SKILL.md met een sterke description met triggerwoorden
voor [KLANT], plus de harde merkregels uit het handboek.
5. Maak een voorbeeld-landingspagina in examples/.
6. Lever alles op als installeerbaar .skill-bestand.
Vraag eerst door als kleurcodes alleen in Pantone/CMYK staan of als
het font mogelijk niet web-embedbaar is.
Let op
De 6 meest gemaakte fouten
| Valkuil | Gevolg | Oplossing |
|---|---|---|
Zwakke description | Skill triggert nooit | Concrete triggerwoorden + klantnaam |
| Kleuren hardcoded in componenten | Onbruikbaar voor volgende klant | Alles via var(--…) |
| Pantone/CMYK niet omgerekend | Kleuren wijken af op scherm | Converteer naar HEX/RGB, check op scherm |
| Niet-embedbaar font geëmbed | Juridisch risico | Licentie checken of fallback gebruiken |
| Geen voorbeeldpagina | Verhoudingen kloppen niet | Altijd één complete pagina meeleveren |
| UI-tokens verzonnen zonder afstemming | Klant herkent merk niet | Spacing/radius/states kort afstemmen |
Afronding
Eindchecklist vóór oplevering
- Alle merkkleuren als HEX in
tokens.css, gemapt op semantische rollen - Lettertype geregeld — embed mét licentie óf veilige fallback
- Geen hardcoded hex/px in
base.cssencomponents.css SKILL.mddescription bevat klantnaam + concrete triggerwoorden- Harde merkregels uit het handboek opgenomen als regels
- Minstens één volledige voorbeeldpagina in
examples/ - Getest: skill triggert vanzelf én output is on-brand
- Visueel vergeleken met een echte uiting van de klant
- Versienummer + bron-PDF en datum genoteerd
- Ingepakt als
.skillen gedeeld
