Design Elevation

Tailwind-token design disciplin för all visuell output – dashboards, PPTX, HTML, rapporter.

Testad · Fungerar ★ 8.8/10

Vad den gör

Ett referensbibliotek med designtokens och regler (färg-/typ-/avståndsskalor, elevation moves, Kholmatovas funktionella kontra perceptuella ramverk, plus åsidosättningar för Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning) som Claude tillämpar när den producerar en visuell artefakt. Utlöses vid alla presentationer, dashboards, HTML-sidor, PDF- eller datavisualiseringsförfrågningar; det är prompt-vägledning, inte körbara verktyg, så dess hela värde ligger i specificiteten hos de instruktioner Claude följer.

Testrapport

Byggde samma 3-korts KPI-dashboard två gånger – en gång från grunden, en gång strikt enligt färdighetens Tailwind-token-regler – och skillnaden är konkret: gray-900/500/400 texthierarki istället för rent svart, shadow-sm istället för en hård drop shadow, semantiska emerald/rose-accenter istället för bokstavliga rött/grönt, tabular-nums på varje metrik, och en text-xs källrad som baslinjen aldrig tänkte lägga till.

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

Kommandon och exempelprompter

/design-elevationTailwind-token design disciplin för all visuell output – dashboards, PPTX, HTML, rapporter.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →