SkillProof tested Claude skills

Design Tokens

Primitiv -> semantisch -> Komponenten-OKLCH-Token-System mit funktionierenden CSS/Tailwind-Vorlagen; 4 eigene zitierte Deep-Dive-Dokumente existieren im Repository nicht.

von begenrousdigital-dotcom · begenrousdigital-dotcom/Ultimate-vibe-design

Funktioniert mit Setup ★ 7.6/10

Design Tokens — Primitiv -> semantisch -> Komponenten-OKLCH-Token-System mit funktionierenden CSS/Tailwind-Vorlagen; 4 eigene zitierte Deep-Dive-Dokumente existieren im Repository nicht.

Was es kann

Generiert eine dreischichtige (primitiv/semantisch/Komponente) Design-Token-Architektur in OKLCH mit Starter-Presets pro Archetyp (Premium-SaaS, Editorial-Luxus, Brutalist usw.) und liefert funktionierende tokens.css, tailwind.config.ts, globals-v4.css und tokens.json-Vorlagen. Die SKILL.md zitiert vier begleitende Referenzdateien (references/color-systems.md, typography-scales.md, spacing-rhythm.md, elevation-depth.md) für tiefere Begründungen zu OKLCH-Mathematik, Typ-Skalen, Abständen und Höhen – keine der vier Dateien existiert irgendwo im Repository, behandeln Sie diese Zitate also als aspirativ, nicht als real.

Testbericht

Das Kernprodukt ist real und nicht vorlagenbasiert – ein OKLCH-Token-Set mit über 60 Variablen und drei Ebenen mit Dark-Mode-Overrides schlägt eine flache handgefertigte Palette bei weitem – aber die SKILL.md verweist auf vier begleitende Referenzdokumente für die OKLCH/Typografie/Abstände/Höhen-Begründung, und keine der vier existiert im Repository; `ls` im Skill-Ordner zeigt nur SKILL.md und templates/.

Getestet am: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/begenrousdigital-dotcom/Ultimate-vibe-design
cd Ultimate-vibe-design
mkdir -p ~/.claude/skills
cp -r skills/design-tokens ~/.claude/skills/design-tokens

Befehle & Beispiel-Prompts

  • /design-tokensPrimitiv -> semantisch -> Komponenten-OKLCH-Token-System mit funktionierenden CSS/Tailwind-Vorlagen; 4 eigene zitierte Deep-Dive-Dokumente existieren im Repository nicht.

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

  • Build a layered design token system for our component library
  • Create CSS variables for our primitive and semantic tokens
  • Architect component-level tokens from our color primitives

Vollständiger Testbericht (Englisch) →