Design skills — Tools die je output transformeren — A designers guide to Claude Code

Skills zijn instructiebestanden die Claude Code leert om specifieke taken op een specifieke manier uit te voeren. Het verschil met een prompt: een prompt is eenmalig. Een skill is persistent — het is er elke sessie, automatisch geladen, en het vormt hoe Claude over design denkt.

Skills zijn de expertise-laag van je systeem — ze vertellen Claude niet wat het moet doen, maar hoe het moet denken.
– Neethan Wu, Design Without Designing

Wat zijn skills?

Skills zijn instructiebestanden die Claude Code leert om specifieke taken op een specifieke manier uit te voeren. Een skill is een markdown-bestand met:

YAML frontmatter — naam, beschrijving, triggers
Instructies — hoe Claude de taak moet benaderen
Regels — wat wel en niet mag
Voorbeelden — hoe het resultaat eruit moet zien

Het verschil met een prompt: een prompt is eenmalig. Een skill is persistent — het is er elke sessie, automatisch geladen, en het vormt hoe Claude over design denkt.

Waarom skills het verschil maken

Zonder skills produceert Claude generieke output. Het defaultt naar de meest voorkomende patronen uit zijn trainingsdata: Inter font, blauw-paarse gradients, symmetrische 3-koloms layouts, Lucide icons.

Met de juiste skills krijg je:

Typografie die intentioneel voelt, niet willekeurig
Kleurpaletten die bij een merk passen, niet bij een template
Layouts die verrassen, niet voorspellen
Animaties die vloeiend en doordacht zijn
Code die productieklaar is, niet prototype-kwaliteit

Skills installeren

Globaal (voor alle projecten)

Plaats skill-bestanden in:

~/.claude/skills/
  design-taste/SKILL.md
  interface-craft/SKILL.md
  minimalist-ui/SKILL.md

Deze skills zijn beschikbaar in elk project dat je opent met Claude Code.

Per project

Plaats skills in je project-map:

.claude/skills/
  brand-guidelines/SKILL.md
  component-rules/SKILL.md

Project-skills vullen globale skills aan en hebben voorrang bij conflicten.

Het SKILL.md formaat

---
name: mijn-skill
description: "Korte beschrijving van wat de skill doet. 
  Triggers on: relevante woorden en zinnen."
argument-hint: "[beschrijving of bestandspad]"
---

# Skill Naam

## Wanneer te gebruiken
[Wanneer Claude deze skill moet activeren]

## Regels
[Specifieke regels en restricties]

## Voorbeelden
[Concrete voorbeelden van gewenst resultaat]

Essentiële design skills

1. Anthropic's Frontend Design Plugin

277.000+ installaties — de meest populaire skill voor frontend-design.

Dit is Anthropic's eigen "Prompting for Frontend Aesthetics" recept, verpakt als skill. Het adresseert direct de neiging van LLMs om generieke designs te produceren.

Wat het doet:

Bant standaard-patronen (Inter, neon glows, pure black, 3-koloms grids)
Stuurt typografie naar display fonts met tracking-tight
Forceert subtiele schaduwen en warme achtergrondkleuren
Voegt micro-interacties toe aan hover-states

Installatie: Zoek in Claude Code's skill-browser of installeer handmatig vanuit Anthropic's cookbook.

2. Design Taste (taste-skill)

Het meest uitgebreide design-sturingssysteem. Een 227-regel protocol met:

Design Variance Dials — drie knoppen die je output sturen:

| Dial | Standaard | Bereik | Effect |
|---|---|---|---|
| `DESIGN_VARIANCE` | 8 | 1-10 | 1 = perfecte symmetrie, 10 = artistieke chaos |
| `MOTION_INTENSITY` | 6 | 1-10 | 1 = statisch, 10 = cinematische physics |
| `VISUAL_DENSITY` | 4 | 1-10 | 1 = galerie/airy, 10 = cockpit/data-packed |

40+ creatieve patronen gegroepeerd per categorie:

Navigatie: Mac OS dock magnification, magnetic buttons, gooey menus, dynamic islands
Layout: Bento grid, masonry, split screen scroll, curtain reveal
Cards: Parallax tilt, spotlight borders, glassmorphism, swipe stacks
Scroll: Sticky scroll stack, horizontal hijack, locomotive sequences
Typografie: Kinetic marquee, text mask reveals, text scramble
Micro-interacties: Particle explosions, liquid pull-to-refresh, skeleton shimmer

23 "AI tells" die geblokkeerd worden: Patronen die je resultaat onmiddellijk herkenbaar maken als AI-gegenereerd — van specifieke fonts tot layout-patronen tot kleurkeuzes.

3. Interface Craft (Josh Puckett)

Een toolkit van drie gespecialiseerde sub-skills:

#### Storyboard Animation

Vertaalt animaties naar een leesbaar "storyboard" formaat:

/* ANIMATION STORYBOARD
 *
 *    0ms   wacht op scroll into view
 *  300ms   kaart fades in, scale 0.85 → 1.0
 *  900ms   heading highlights
 * 1500ms   rijen schuiven omhoog (stagger 200ms)
 */

Elke timing-waarde wordt een benoemde constante. Elke spring-config staat in een config-object. Geen magic numbers in je JSX.

Spring configs voor designers:

Cards/containers: stiffness: 300, damping: 30 (smooth settle)
Pop-ins/badges: stiffness: 500, damping: 25 (snappy)
Slides/entrances: stiffness: 350, damping: 28 (balanced)

#### DialKit

Genereert live control panels waarmee je animatie- en stijlwaarden in real-time kunt tunen:

const params = useDialKit('Card Animation', {
  scale: [1, 0.5, 2],        // slider: default 1, range 0.5-2
  blur: [0, 0, 100],          // slider: default 0, range 0-100
  visible: true,               // toggle
  spring: { type: 'spring', visualDuration: 0.3, bounce: 0.2 },
})

10 controle-types: sliders, toggles, springs, color pickers, dropdowns, tekstvelden, action buttons, en geneste folders.

#### Design Critique

Systematische UI-review gebaseerd op Josh Puckett's methodologie. Analyseert in 6 stappen:

Context — Wat is dit? Voor wie?
First Impressions — Gut reaction
Visual Design — Kleur, typografie, schaduwen, spacing, iconen, visueel gewicht
Interface Design — Focus, progressive disclosure, density, feedback
Consistency — Patronen, platform-conventies, component hergebruik
User Context — Hoe voelt dit voor de gebruiker?

De toon: "Senior designer die het werk van een junior reviewt die ze respecteren. Direct, analytisch, eerlijk — maar geworteld in de wens dat het werk geweldig wordt."

4. Minimalist UI

Genereert ultra-minimalistische, editorial interfaces. Specifieke regels:

Fonts: SF Pro Display/Geist Sans (body), Lyon Text/Newsreader (editorial), Geist Mono (code)
Kleuren: Warm bone #F7F6F3 of puur wit, off-black #111111 tekst, minimale accenten
Componenten: Bento boxes met 1px #EAEAEA borders, 8-12px border-radius, 24-40px padding
Motion: Fade-in met translateY(12px) over 600ms, hover-shifts van 0 naar 2px shadow
Strikt verboden: Inter, Roboto, Open Sans, Lucide icons, heavy shadows, gradients, neon kleuren

5. High-End Visual Design (soft-skill)

Engineert "$150k+ agency-level" digitale ervaringen. Highlights:

Double-Bezel architectuur (Doppelrand): Geneste UI — outer shell met subtiele achtergrond/hairline border/grote radius + inner core met eigen achtergrond/inner highlight/kleinere radius
Creative variance engine: Drie vibes (Ethereal Glass, Editorial Luxury, Soft Structuralism) maal drie layout-archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split)
Motion choreografie: Fluid Island Nav, magnetic button physics, scroll interpolation
Performance guardrails: Alleen transform/opacity animeren, blur alleen op fixed/sticky elementen

6. Redesign Existing Projects

Een 115-punten audit die bestaande websites doorlicht en upgradet:

| Categorie | Punten | Voorbeelden |
|---|---|---|
| Typografie | 15+ | Font swap, headline presence, letterwidth ~65 chars |
| Kleur en oppervlakken | 15+ | Pure black verwijderen, accent limiet, gekleurde schaduwen |
| Layout | 15+ | Symmetrie breken, variabele card heights, overlap/diepte |
| Interactiviteit | 10+ | Hover states, focus rings, loading states, transitions |
| Content | 10+ | Realistische data, geen AI-cliches, echte datums |
| Componenten | 10+ | Generic card stijlen vervangen, button varianten |
| Iconografie | 5+ | Lucide defaults vervangen, stroke-widths standaardiseren |
| Code kwaliteit | 10+ | Semantische HTML, relatieve units, alt-tekst |

Fix prioriteit: 1. Font swap — 2. Color cleanup — 3. Hover/active states — 4. Layout/spacing — 5. Generieke componenten vervangen — 6. Interactieve states — 7. Typografie polijsten

Meer skills vinden

aitmpl.com

De grootste skill-database: 1.234+ skills doorzoekbaar op categorie en gebruik. Filter op design-gerelateerde skills.

awesome-claude-code (GitHub)

Community-verzameling van skills, configuraties en tips. Bevat een design-sectie met curated skills.

Marie Claire Dean's 63 Design Skills

Een verzameling van 8 plugins met 27 commando's specifiek voor designers. Van logo-design tot UI-patronen tot kleurharmonie.

Julian Oczkowski's 7 Must-Have Skills

Curated lijst van skills specifiek voor design-output. Bevat taste-skills, animatie-tools en critique-methodes.

Eigen skills schrijven

De krachtigste skills zijn de skills die je zelf schrijft — afgestemd op jouw stijl, jouw merk, jouw manier van werken.

Template

---
name: mijn-design-stijl
description: "Mijn persoonlijke design-taal voor [projectnaam]. 
  Triggers on: component, page, layout, design."
---

# Mijn Design Stijl

## Identiteit
[Beschrijf de visuele identiteit: warm minimalistisch, 
brutalistisch, editorial, corporate, speels, etc.]

## Typografie
- Display: [font], [gebruik]
- Body: [font], [gebruik]  
- Mono: [font], [gebruik]
- Verboden: [fonts die niet mogen]

## Kleurpalet
- Achtergrond: [kleuren]
- Tekst: [kleuren]
- Accent: [kleur] — max 1 accent
- Verboden: [kleuren die niet mogen]

## Layout principes
- [Specifieke regels over grid, spacing, symmetrie]

## Componenten
- Kaarten: [padding, radius, schaduw specs]
- Buttons: [stijl, varianten]
- Inputs: [stijl]

## Animatie
- Hover: [transitie specs]
- Scroll entry: [specs]
- Page transitions: [specs]

## Wat nooit mag
- [Lijst van verboden patronen]

Tips voor effectieve skills

Wees specifiek — "Subtiele schaduwen" is vaag. "Shadow: 0 4px 24px rgba(0,0,0,0.06)" is bruikbaar.
Inclusief verboden patronen — Wat Claude niet moet doen is net zo belangrijk als wat het wel moet doen.
Gebruik getallen — Padding in pixels, kleuren in hex, border-radius in px. Laat geen ruimte voor interpretatie.
Test en itereer — Je eerste skill is niet perfect. Gebruik het, zie wat er misgaat, pas aan.
Houd het gefocust — Een skill per domein. Niet alles in een mega-bestand.

FloatPrompt: Portable skills

FloatPrompt is een concept waarbij je een skill als een los tekstbestand kunt meenemen naar elke AI-tool — niet alleen Claude Code. Het is een "portable expertise file" dat werkt in Claude, ChatGPT, Cursor, of welke AI-tool dan ook.

Skills combineren

De echte kracht zit in het stapelen van skills:

Stap 1: taste-skill definieert de visuele taal
Stap 2: interface-craft/storyboard definieert het animatie-systeem
Stap 3: design-critique valideert het resultaat

Dit is Neethan Wu's drie-lagen harnas:

Skills — De expertise-laag (hoe te bouwen)
Canvas — Het oppervlak (waar te bouwen)
Inspiration — De smaak-laag (waarom het er zo uitziet)