Design Elevation

Designová disciplína Tailwind-token pro jakýkoli vizuální výstup — dashboardy, PPTX, HTML, reporty.

Otestováno · Funguje ★ 8.8/10

Co umí

Referenční knihovna designových tokenů a pravidel (škály barev/typů/rozestupů, elevation moves, funkční vs. percepční framework Kholmatova, plus přepsání pro Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning), které Claude aplikuje vždy, když produkuje vizuální artefakt. Spouští se na jakoukoli prezentaci, dashboard, HTML stránku, PDF nebo požadavek na datovou vizualizaci; jedná se o promptní vedení, nikoli spustitelné nástroje, takže celá jeho hodnota spočívá ve specifičnosti instrukcí, které Claude dodržuje.

Testovací report

Vytvořil jsem stejný 3-kartový KPI dashboard dvakrát — jednou od začátku, jednou striktně podle pravidel Tailwind-token skillu — a rozdíl je konkrétní: hierarchie textu gray-900/500/400 namísto čistě černé, shadow-sm namísto ostrého drop shadow, sémantické akcenty emerald/rose namísto doslovné červené/zelené, tabular-nums na každé metrice a text-xs zdrojový řádek, který baseline nikdy nenapadlo přidat.

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

Instalace

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

Příkazy a ukázkové prompty

/design-elevationDesignová disciplína Tailwind-token pro jakýkoli vizuální výstup — dashboardy, PPTX, HTML, reporty.

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 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

Kompletní testovací report (anglicky) →