Design System Is All You Need

Osiem nazwanych przewodników po stylach UI z automatycznie generowanymi tokenami, stosowanych przed jakimkolwiek kodem

Autor: devPnal · devPnal/design-system-is-all-you-need

Testowano · Działa ★ 7.6/10

Design System Is All You Need — Osiem nazwanych przewodników po stylach UI z automatycznie generowanymi tokenami, stosowanych przed jakimkolwiek kodem

Co robi ten skill

Łączy osiem pisemnych design guidelines — neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage i the author's own 'pnalism' — each with common rules, per-component specs i a token system derived from just a theme colour i an intensity keyword. Uruchamia się na UI work: building pages, dashboards, cards, forms or any frontend component, in HTML/CSS, React, SwiftUI or Compose. It stops i asks which style i which hex colour before it writes anything.

Raport z testu

Zbudowano tę samą sign-in card dwukrotnie, once plain i once under the bundled neumorphism guideline: the guided file carried 11 design tokens against zero, put all six spacing values on the 8px grid (the plain one hit it 0 of 6), i gave every control a 44px target plus a focus ring. The same measurement exposed a contradiction inside the guideline — its primary-CTA rule (theme-colour label on a tinted surface) computes to 2.94:1 contrast, under the 4.5:1 its own final checklist demands, i worse than the plain version's 3.7:1. Step 2 of the skill points at references/meterial-design.md, a file that does not exist (the real one is material-design.md), though the correct name appears in the table above it. Expect a hard stop for two questions — style i hex colour — before any output appears.

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

Instalacja

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

Komendy i przykładowe prompty

/design-system-is-all-you-needOsiem nazwanych przewodników po stylach UI z automatycznie generowanymi tokenami, stosowanych przed jakimkolwiek kodem

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →