Design System Is All You Need

Acht benoemde UI-stijlgidsen met automatisch afgeleide tokens, toegepast vóór enige code

Door devPnal · devPnal/design-system-is-all-you-need

Getest · Werkt ★ 7.6/10

Design System Is All You Need — Acht benoemde UI-stijlgidsen met automatisch afgeleide tokens, toegepast vóór enige code

Wat het doet

Bundelt acht geschreven designrichtlijnen — neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage en de eigen 'pnalism' van de auteur — elk met gemeenschappelijke regels, per-component specificaties en een tokensysteem afgeleid van slechts een themakleur en een intensiteitskeyword. Activeert bij UI-werk: het bouwen van pagina's, dashboards, kaarten, formulieren of elke frontend-component, in HTML/CSS, React, SwiftUI of Compose. Het stopt en vraagt welke stijl en welke hex-kleur voordat het iets schrijft.

Testrapport

Dezelfde aanmeldkaart twee keer gebouwd, één keer eenvoudig en één keer volgens de gebundelde neumorphism-richtlijn: het begeleide bestand bevatte 11 design tokens tegen nul, plaatste alle zes spacing-waarden op het 8px-raster (de eenvoudige raakte het 0 van de 6), en gaf elke controle een 44px-doel plus een focusring. Dezelfde meting onthulde een tegenstrijdigheid binnen de richtlijn — de primary-CTA-regel (themakleurlabel op een getint oppervlak) berekent een contrast van 2.94:1, onder de 4.5:1 die de eigen uiteindelijke checklist vereist, en slechter dan de 3.7:1 van de eenvoudige versie. Stap 2 van de skill wijst naar references/meterial-design.md, een bestand dat niet bestaat (het echte is material-design.md), hoewel de juiste naam in de tabel erboven verschijnt. Verwacht een harde stop voor twee vragen — stijl en hex-kleur — voordat er uitvoer verschijnt.

Getest op: 2026-07-29 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/devPnal/design-system-is-all-you-need.git
mkdir -p ~/.claude/skills
cd design-system-is-all-you-need && cp -r design-system-is-all-you-need ~/.claude/skills/design-system-is-all-you-need

Commando's en voorbeeldprompts

/design-system-is-all-you-needAcht benoemde UI-stijlgidsen met automatisch afgeleide tokens, toegepast vóór enige code

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Build a sign-in card for my app using a neumorphism design style
Design a pricing card component in glassmorphism for our React app
Create a dashboard with a consistent brutalist design system applied

Volledig rapport (Engels) →