SkillProof tested Claude skills

Design System Is All You Need

Otte navngivne UI-stilguider med auto-afledte tokens, anvendt før enhver kode

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

Testet · Virker ★ 7.6/10

Design System Is All You Need — Otte navngivne UI-stilguider med auto-afledte tokens, anvendt før enhver kode

Hvad det gør

Bundter otte skriftlige designretningslinjer – neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage og forfatterens egen 'pnalism' – hver med fælles regler, per-komponent specifikationer og et token-system afledt af blot en temafarve og et intensitetsnøgleord. Udløses ved UI-arbejde: opbygning af sider, dashboards, kort, formularer eller enhver frontend-komponent, i HTML/CSS, React, SwiftUI eller Compose. Den stopper og spørger, hvilken stil og hvilken hex-farve, før den skriver noget.

Testrapport

Byggede det samme login-kort to gange, én gang almindeligt og én gang under den medfølgende neumorphism-retningslinje: den guidede fil indeholdt 11 design-tokens mod nul, placerede alle seks afstandsværdier på 8px-gitteret (den almindelige ramte det 0 ud af 6), og gav hver kontrol et 44px mål plus en fokusring. Den samme måling afslørede en modsigelse inden i retningslinjen – dens primære-CTA-regel (temafarvet etiket på en tonet overflade) beregner en kontrast på 2.94:1, under de 4.5:1 dens egen endelige tjekliste kræver, og værre end den almindelige versions 3.7:1. Trin 2 af skill'en peger på references/meterial-design.md, en fil der ikke eksisterer (den rigtige er material-design.md), selvom det korrekte navn vises i tabellen ovenfor. Forvent et hårdt stop for to spørgsmål – stil og hex-farve – før noget output vises.

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

Installation

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

Kommandoer og eksempelprompter

  • /design-system-is-all-you-needOtte navngivne UI-stilguider med auto-afledte tokens, anvendt før enhver kode

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

  • 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

Læs hele rapporten →