Design System Is All You Need

Åtta namngivna UI-stilguider med auto-härledda tokens, tillämpade före någon kod

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

Testad · Fungerar ★ 7.6/10

Design System Is All You Need — Åtta namngivna UI-stilguider med auto-härledda tokens, tillämpade före någon kod

Vad den gör

Paketerar åtta skrivna designriktlinjer – neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage och författarens egen 'pnalism' – var och en med gemensamma regler, per-komponent-specifikationer och ett tokensystem härlett från bara en temafärg och ett intensitetsnyckelord. Utlöses vid UI-arbete: att bygga sidor, dashboards, kort, formulär eller någon frontend-komponent, i HTML/CSS, React, SwiftUI eller Compose. Den stannar och frågar vilken stil och vilken hex-färg innan den skriver något.

Testrapport

Byggde samma inloggningskort två gånger, en gång enkelt och en gång under den paketerade neumorphism-riktlinjen: den guidade filen bar 11 designtokens mot noll, placerade alla sex avståndsvärden på 8px-rutnätet (den enkla träffade det 0 av 6), och gav varje kontroll ett 44px-mål plus en fokusring. Samma mätning avslöjade en motsägelse inom riktlinjen – dess primära-CTA-regel (temafärgad etikett på en tonad yta) beräknas till 2.94:1 kontrast, under de 4.5:1 som dess egen slutliga checklista kräver, och sämre än den enkla versionens 3.7:1. Steg 2 i färdigheten pekar på references/meterial-design.md, en fil som inte existerar (den verkliga är material-design.md), även om det korrekta namnet visas i tabellen ovanför. Förvänta dig ett hårt stopp för två frågor – stil och hex-färg – innan någon utdata visas.

Testad: 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

Kommandon och exempelprompter

/design-system-is-all-you-needÅtta namngivna UI-stilguider med auto-härledda tokens, tillämpade före någon kod

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →