SkillProof tested Claude skills

Design System Is All You Need

Åtte navngitte UI-stilguider med auto-deriverte tokens, anvendt før kode

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

Bestått ★ 7.6/10

Design System Is All You Need — Åtte navngitte UI-stilguider med auto-deriverte tokens, anvendt før kode

Hva den gjør

Samler åtte skriftlige designretningslinjer – neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage og forfatterens egen 'pnalism' – hver med felles regler, komponent-spesifikasjoner og et token-system avledet fra kun en temafarge og et intensitetsnøkkelord. Utløses av UI-arbeid: bygging av sider, dashbord, kort, skjemaer eller enhver frontend-komponent, i HTML/CSS, React, SwiftUI eller Compose. Den stopper og spør hvilken stil og hvilken heksadesimal farge før den skriver noe.

Testrapport

Bygde det samme påloggingskortet to ganger, en gang enkelt og en gang under den medfølgende neumorphism-retningslinjen: den veiledede filen bar 11 designtokens mot null, plasserte alle seks avstandsverdiene på 8px-rutenettet (den enkle traff det 0 av 6), og ga hver kontroll et 44px-mål pluss en fokusring. Den samme målingen avslørte en motsetning i retningslinjen – dens primære-CTA-regel (temafargeetikett på en tonet overflate) beregner til 2.94:1 kontrast, under de 4.5:1 dens egen endelige sjekkliste krever, og verre enn den enkle versjonens 3.7:1. Trinn 2 i ferdigheten peker på references/meterial-design.md, en fil som ikke eksisterer (den virkelige er material-design.md), selv om det korrekte navnet vises i tabellen over den. Forvent et hardt stopp for to spørsmål – stil og heksadesimal farge – før noe utdata vises.

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

Installer

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-needÅtte navngitte UI-stilguider med auto-deriverte tokens, anvendt før kode

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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

Full rapport →