Design System Is All You Need

Acht benannte UI-Stilrichtlinien mit automatisch abgeleiteten Tokens, angewendet vor jeglichem Code

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

Getestet · Funktioniert ★ 7.6/10

Design System Is All You Need — Acht benannte UI-Stilrichtlinien mit automatisch abgeleiteten Tokens, angewendet vor jeglichem Code

Was es kann

Bündelt acht schriftliche Designrichtlinien – Neumorphismus, Glassmorphismus, Brutalismus, Skeuomorphismus, Material, Neon, Heritage und den eigenen 'Pnalismus' des Autors – jede mit gemeinsamen Regeln, pro-Komponenten-Spezifikationen und einem Token-System, das nur aus einer Themenfarbe und einem Intensitäts-Keyword abgeleitet ist. Wird bei UI-Arbeiten ausgelöst: Erstellen von Seiten, Dashboards, Karten, Formularen oder jeder Frontend-Komponente in HTML/CSS, React, SwiftUI oder Compose. Es stoppt und fragt nach Stil und Hex-Farbe, bevor es etwas schreibt.

Testbericht

Dieselbe Anmeldekarte wurde zweimal erstellt, einmal schlicht und einmal unter der gebündelten Neumorphismus-Richtlinie: Die geführte Datei enthielt 11 Design-Tokens gegenüber null, setzte alle sechs Abstands-Werte auf das 8px-Raster (die schlichte traf es 0 von 6) und gab jedem Steuerelement ein 44px-Ziel plus einen Fokusring. Dieselbe Messung deckte einen Widerspruch innerhalb der Richtlinie auf – ihre primäre CTA-Regel (Themenfarben-Label auf einer getönten Oberfläche) berechnet einen Kontrast von 2.94:1, unter dem 4.5:1, das ihre eigene abschließende Checkliste verlangt, und schlechter als die 3.7:1 der einfachen Version. Schritt 2 des Skills verweist auf references/meterial-design.md, eine Datei, die nicht existiert (die richtige ist material-design.md), obwohl der korrekte Name in der Tabelle darüber erscheint. Erwarten Sie einen harten Stopp für zwei Fragen – Stil und Hex-Farbe – bevor eine Ausgabe erscheint.

Getestet am: 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

Befehle & Beispiel-Prompts

/design-system-is-all-you-needAcht benannte UI-Stilrichtlinien mit automatisch abgeleiteten Tokens, angewendet vor jeglichem Code

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →