Design Elevation

Tailwind-Token-Design-Disziplin für jede visuelle Ausgabe – Dashboards, PPTX, HTML, Berichte.

Getestet · Funktioniert ★ 8.8/10

Was es kann

Eine Referenzbibliothek von Design-Tokens und Regeln (Farb-/Typ-/Abstandsskalen, Elevation-Moves, Kholmatova funktionales vs. perzeptuelles Framework, plus Overrides für Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning), die Claude anwendet, wann immer es ein visuelles Artefakt produziert. Wird ausgelöst bei jeder Präsentations-, Dashboard-, HTML-Seiten-, PDF- oder Datenvisualisierungsanfrage; es ist eine Prompt-Anleitung, keine ausführbare Tooling, daher liegt sein ganzer Wert in der Spezifität der Anweisungen, denen Claude folgt.

Testbericht

Erstellte dasselbe 3-Karten-KPI-Dashboard zweimal – einmal von Grund auf, einmal streng nach den Tailwind-Token-Regeln des Skills – und der Unterschied ist konkret: gray-900/500/400 Texthierarchie anstelle von reinem Schwarz, shadow-sm anstelle eines harten Schlagschattens, semantische Smaragd-/Rosenakzente anstelle von wörtlichem Rot/Grün, tabular-nums bei jeder Metrik und eine text-xs Quellzeile, die die Baseline nie in Betracht gezogen hätte.

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

Installation

git clone https://github.com/cuellarfr/design-skills
cd design-skills
mkdir -p ~/.claude/skills
cp -r design-elevation ~/.claude/skills/design-elevation

Befehle & Beispiel-Prompts

/design-elevationTailwind-Token-Design-Disziplin für jede visuelle Ausgabe – Dashboards, PPTX, HTML, Berichte.

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

Build an HTML KPI dashboard using proper Tailwind design tokens
Redesign this PPTX slide with real elevation and spacing scales
Apply IBM Carbon-style color and type discipline to this report

Vollständiger Testbericht (Englisch) →