Design Elevation

Disciplina de diseño con tokens de Tailwind para cualquier salida visual — dashboards, PPTX, HTML, informes.

Probado · Funciona ★ 8.8/10

Qué hace

Una biblioteca de referencia de tokens y reglas de diseño (escalas de color/tipografía/espaciado, movimientos de elevación, marco funcional-vs-perceptual de Kholmatova, además de anulaciones para Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning) que Claude aplica cada vez que produce un artefacto visual. Se activa en cualquier solicitud de presentación, dashboard, página HTML, PDF o visualización de datos; es una guía de prompt, no una herramienta ejecutable, por lo que todo su valor reside en la especificidad de las instrucciones que Claude sigue.

Informe de la prueba

Construí el mismo dashboard de KPI de 3 tarjetas dos veces — una desde cero, otra siguiendo estrictamente las reglas de tokens de Tailwind de la habilidad — y la diferencia es concreta: jerarquía de texto gris-900/500/400 en lugar de negro puro, shadow-sm en lugar de una sombra dura, acentos semánticos esmeralda/rosa en lugar de rojo/verde literal, tabular-nums en cada métrica, y una línea de fuente text-xs que la línea base nunca pensó en añadir.

Probado el: 2026-07-14 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

/design-elevationDisciplina de diseño con tokens de Tailwind para cualquier salida visual — dashboards, PPTX, HTML, informes.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →