Welke Claude-skill maakt je website mooier?

Wat doet een design-skill in Claude Code?

Een skill is een map met instructies, en soms scripts, die Claude Code laadt zodra je taak erom vraagt. Zonder ontwerpinstructies kiest Claude wat het vaakst voorkomt: een verloop, een generiek lettertype en drie kaarten op een rij. Een design-skill vervangt die standaard door keuzes.

De vijf skills in deze gids doen dat op vier manieren, en de meeste combineren er twee:

• Smaakregels: wat Claude moet vermijden en hoe hij een ontwerp eerst plant voordat hij code schrijft.
• Controles achteraf: een scanner of browsercheck die de gebouwde pagina naloopt op bekende kenmerken van AI-design.
• Een naslagbibliotheek: honderden paletten, lettercombinaties en stijlen waaruit Claude per project kiest.
• Een complete richting per project: één plan met lettertypes, kleuren, opbouw en beweging, dat Claude daarna uitvoert en controleert.

Hoe verschillen de vijf skills?

Stand van 5 november 2026. Alles over een skill komt uit zijn eigen README of SKILL.md. Skills veranderen snel, dus controleer het aantal regels of stijlen voordat je kiest.

• Frontend Design (Anthropic): smaakregels plus een vast plan in twee rondes. Gratis, Apache 2.0, installeren als Claude Code-plugin.
• Impeccable: 23 commando’s om een bestaand ontwerp bij te sturen en een scanner met 62 vaste regels. Gratis, Apache 2.0.
• Taste Skill: deelt per pagina een palet, lettercombinatie en opening uit, en controleert het resultaat in een echte browser. Gratis, MIT.
• UI/UX Pro Max: een doorzoekbare bibliotheek met onder meer 192 paletten, 74 lettercombinaties en richtlijnen voor 22 stacks. Basisversie gratis, MIT, naast een premiumversie.
• Struq-skill: één plan per site in een vaste filmische stijl, één stop voor jouw akkoord, daarna bouwen en controleren op vier schermbreedtes. Gratis, MIT.

Deze gids is van Struq. Juist daarom staat bij elke skill ook waar hij sterker is dan de Struq-skill.

Frontend Design van Anthropic: wat doet het?

• Wat het oplost: ontwerpen die eruitzien als een template. De skill noemt vijf groepen kenmerken waar AI-design nu op uitkomt, zoals een crèmekleurige achtergrond met terracotta accent en de set van identieke afgeronde kaarten.
• Hoe het werkt: Claude maakt eerst een kort plan met vier tot zes benoemde kleuren, de lettertypes, een opbouw en een paar principes. Daarna toetst hij dat plan aan je opdracht, past aan wat generiek is en bouwt pas dan. Waar het kan, bekijkt hij zijn werk op screenshots.
• Kosten en licentie: gratis, Apache 2.0.
• Installeren: in Claude Code met /plugin install frontend-design@claude-plugins-official.

Sterker dan Struq: het komt van de maker van Claude, het is kort en er draait niets naast. Het legt geen stijl op, dus het past ook bij een rustige app of een dashboard. De Struq-skill stuurt altijd op dezelfde filmische aanpak.

Impeccable: wat doet het?

• Wat het oplost: een bestaande interface die generiek of rommelig is. Volgens de eigen README is Impeccable het sterkst op interfaces die al bestaan.
• Hoe het werkt: je geeft een commando, zoals critique, audit, polish, bolder of quieter, en het onderdeel dat je wilt verbeteren. Een scanner met 62 vaste regels zoekt kenmerken van AI-design, zonder AI-model en zonder API-sleutel. Die scanner kan elk bestand nalopen dat Claude aanpast, en draait ook in je terminal, in CI en via een Chrome-extensie.
• Kosten en licentie: gratis, Apache 2.0. Impeccable begon als afgeleide van Frontend Design.
• Installeren: npx impeccable install in je projectmap, of in Claude Code met /plugin marketplace add pbakaus/impeccable.

Sterker dan Struq: controle op een site die er al staat. De scanner werkt zonder AI-model, dus hij geeft elke keer dezelfde uitkomst en kan in een pipeline draaien. Met de live-modus kies je een element in de browser en wissel je tussen varianten. De Struq-skill is instructies en naslag; hij heeft geen eigen scanner.

Taste Skill: wat doet het?

• Wat het oplost: een bedrijfssite die eruitziet als een in elkaar gezette landingspagina.
• Hoe het werkt: de skill bepaalt eerst wat voor bedrijf het is, deelt dan een palet, een lettercombinatie en een van elf geteste openingen uit, en bouwt vanaf een vast startbestand. Een controlescript opent de pagina in Chrome op vier breedtes en geeft per regel een uitslag: geslaagd, waarschuwing of fout. Effecten en scrollscènes bewaart de skill voor software-, tech- en gamingpagina’s.
• Kosten en licentie: gratis, MIT.
• Installeren: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend", of als Claude Code-plugin. De skill vraagt Node 22 of nieuwer en Chrome, Edge of Chromium.

Sterker dan Struq: de browsercontrole is een vast script met een uitslag per regel. De Struq-skill gebruikt de browsertool die je AI al heeft. Taste Skill werkt ook met echte foto’s uit open archieven en echte merkiconen, en houdt een café of winkel bewust rustig.

UI/UX Pro Max: wat doet het?

• Wat het oplost: niet weten welke stijl, kleuren en lettertypes bij een soort product horen.
• Hoe het werkt: een zoekscript doorzoekt de bibliotheek en stelt per project een ontwerpsysteem samen, met opbouw, stijl, kleuren, lettertypes, effecten, wat je moet vermijden en een checklist voor oplevering. De bibliotheek telt onder meer 192 paletten, 74 lettercombinaties, 51 actieve stijlen, 119 UX-richtlijnen en richtlijnen voor 22 stacks, van React tot SwiftUI en Flutter.
• Kosten en licentie: de basisversie is gratis en open source, MIT. Er is ook een premiumversie met onder meer logo’s en huisstijl, via uupm.cc.
• Installeren: in Claude Code met /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill en daarna /plugin install ui-ux-pro-max@ui-ux-pro-max-skill. Het zoekscript vraagt Python 3.

Sterker dan Struq: breedte. UI/UX Pro Max dekt ook apps, dashboards met 25 grafiektypes en mobiele platforms zoals SwiftUI, Flutter en Jetpack Compose. De Struq-skill richt zich op websites en bouwt standaard met Next.js en Tailwind.

De Struq-skill: wat doet het?

• Wat het oplost: een site die wel klopt, maar niemand bijblijft. De skill legt vooraf de richting en de beweging vast, zoals een ontwerpstudio dat doet.
• Hoe het werkt: de skill plant een filmische site met een vast bewegingssysteem. Vloeiend scrollen, onthullingen achter een masker, overgangen tussen pagina’s die het hele scherm vullen en een pronkstuk dat vaststaat terwijl je scrollt. Alle onderdelen lopen op één animatieklok en de beweging komt er in een vaste volgorde bij: eerst de opbouw zonder beweging, dan onthullingen, compositie, pronkstukken, tekst en SVG, reacties op de muis en tot slot 3D, alleen waar dat iets toevoegt.
• Zo verloopt een opdracht: je beschrijft je site in een korte opdracht. De skill schrijft één plan in STRUQ.md met merk, concept, twee lettertypes, kleuren, opbouw en beweging, en vraagt één keer om je akkoord. Daarna bouwt hij, maakt screenshots op 390, 768, 1440 en 1920 pixels en herstelt wat hij ziet. De skill verbiedt Claude om klantcitaten of cijfers te verzinnen.
• Kosten en licentie: gratis, MIT, zonder account.
• Installeren: npx @struq/skill@latest, of als Claude Code-plugin met /plugin marketplace add struqnl/struq-design. Werkt ook in Codex, Cursor en OpenCode.

In een blinde vergelijking bouwde hetzelfde model drie opdrachten elk twee keer, zonder en met de skill. Met een AI-model als beoordelaar, dat niet wist welke versie welke was, telde de vergelijking zonder skill 22 kenmerken van een template en met de skill 8.

Waar de Struq-skill minder past: apps, dashboards en rustige zakelijke sites. De vaste filmische stijl, met grote lichte letters, vloeiend scrollen en overgangen tussen pagina’s, is gemaakt voor marketingsites. Voor de rest past een van de andere vier beter. De eigen README zegt ook: de bouw zonder skill is minder ambitieus en breekt minder vaak.

Welke design-skill past bij jou?

Wil je vooral geen AI-look? Dan kies je uit vier skills, elk met een eigen sterkte:

• Frontend Design: betere smaak zonder extra gereedschap.
• Impeccable: vaste controles op een site of app die er al staat.
• Taste Skill: een bedrijfssite met een browsercontrole die per regel een uitslag geeft.
• UI/UX Pro Max: de breedste bibliotheek, ook voor apps, dashboards en mobiele platforms.

Ook die vier kennen beweging. Frontend Design vraagt om één doordacht moment in plaats van losse effecten, Impeccable heeft de commando’s animate en overdrive, Taste Skill zet scrollscènes in op software-, tech- en gamingpagina’s, en UI/UX Pro Max geeft per soort product passende effecten.

Wil je een site die indruk maakt, met beweging zoals van een ontwerpstudio? Kies dan de Struq-skill. Het verschil zit in het plan: één bewegingssysteem voor de hele site, overgangen tussen pagina’s en een pronkstuk dat vaststaat terwijl je scrollt, vastgelegd voordat Claude bouwt.