Design System Is All You Need

Osm pojmenovaných UI style guide s automaticky odvozenými tokeny, aplikovanými před jakýmkoli kódem

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

Otestováno · Funguje ★ 7.6/10

Design System Is All You Need — Osm pojmenovaných UI style guide s automaticky odvozenými tokeny, aplikovanými před jakýmkoli kódem

Co umí

Sdružuje osm písemných designových směrnic – neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage a autorův vlastní 'pnalism' – každá s běžnými pravidly, specifikacemi pro jednotlivé komponenty a systémem tokenů odvozeným pouze z barvy motivu a klíčového slova intenzity. Spouští se na UI práci: vytváření stránek, dashboardů, karet, formulářů nebo jakékoli frontend komponenty v HTML/CSS, React, SwiftUI nebo Compose. Zastaví se a zeptá se na styl a hexadecimální barvu, než cokoli napíše.

Testovací report

Sestavil jsem stejnou přihlašovací kartu dvakrát, jednou obyčejnou a jednou podle přibalené směrnice neumorphism: řízený soubor obsahoval 11 designových tokenů oproti nule, umístil všech šest hodnot mezer na 8px mřížku (obyčejný to trefil 0 z 6) a každému ovládacímu prvku dal 44px cíl plus focus ring. Stejné měření odhalilo rozpor uvnitř směrnice – její pravidlo primary-CTA (popisek barvy motivu na tónovaném povrchu) vypočítává kontrast 2.94:1, pod 4.5:1, které vyžaduje její vlastní konečný kontrolní seznam, a horší než 3.7:1 u obyčejné verze. Krok 2 dovednosti odkazuje na references/meterial-design.md, soubor, který neexistuje (skutečný je material-design.md), ačkoli správný název se objevuje v tabulce nad ním. Očekávejte tvrdé zastavení pro dvě otázky – styl a hexadecimální barvu – než se objeví jakýkoli výstup.

Testováno: 2026-07-29 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

/design-system-is-all-you-needOsm pojmenovaných UI style guide s automaticky odvozenými tokeny, aplikovanými před jakýmkoli kódem

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →