Design Elevation
Disciplina di design con token Tailwind per qualsiasi output visivo: dashboard, PPTX, HTML, report.
Promosso
Cosa fa
Una libreria di riferimento di token e regole di design (scale di colore/tipo/spaziatura, mosse di elevazione, framework funzionale-vs-percettivo di Kholmatova, più override per Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning) che Claude applica ogni volta che produce un artefatto visivo. Si attiva su qualsiasi richiesta di presentazione, dashboard, pagina HTML, PDF o visualizzazione dati; è una guida per il prompt, non uno strumento eseguibile, quindi il suo intero valore risiede nella specificità delle istruzioni che Claude segue.
Rapporto di test
Ho costruito la stessa dashboard KPI a 3 schede due volte — una da zero, una seguendo rigorosamente le regole dei token Tailwind della skill — e la differenza è concreta: gerarchia di testo gray-900/500/400 invece di nero puro, shadow-sm invece di un'ombra dura, accenti semantici smeraldo/rosa invece di rosso/verde letterale, tabular-nums su ogni metrica e una riga di origine text-xs che la baseline non aveva mai pensato di aggiungere.
Testato il: 2026-07-14 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/cuellarfr/design-skills cd design-skills mkdir -p ~/.claude/skills cp -r design-elevation ~/.claude/skills/design-elevation
Comandi e prompt di esempio
/design-elevationDisciplina di design con token Tailwind per qualsiasi output visivo: dashboard, PPTX, HTML, report.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
Build an HTML KPI dashboard using proper Tailwind design tokensRedesign this PPTX slide with real elevation and spacing scalesApply IBM Carbon-style color and type discipline to this report