Design Elevation
Tailwind-token design discipline voor elke visuele output — dashboards, PPTX, HTML, rapporten.
Getest · Werkt
Wat het doet
Een referentiebibliotheek van ontwerptokens en -regels (kleur/type/spatiëringsschalen, elevatiebewegingen, Kholmatova functioneel-vs-perceptueel raamwerk, plus overrides voor Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning) die Claude toepast wanneer het een visueel artefact produceert. Activeert bij elk presentatie-, dashboard-, HTML-pagina-, PDF- of data-viz-verzoek; het is promptbegeleiding, geen uitvoerbare tooling, dus de hele waarde ligt in de specificiteit van de instructies die Claude volgt.
Testrapport
Bouwde twee keer hetzelfde 3-kaart KPI-dashboard – één keer vanaf nul, één keer strikt volgens de Tailwind-token-regels van de skill – en het verschil is concreet: gray-900/500/400 teksthiërarchie in plaats van puur zwart, shadow-sm in plaats van een harde slagschaduw, semantische emerald/rose accenten in plaats van letterlijk rood/groen, tabular-nums op elke metriek, en een text-xs bronregel die de baseline nooit bedacht om toe te voegen.
Getest op: 2026-07-14 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/cuellarfr/design-skills cd design-skills mkdir -p ~/.claude/skills cp -r design-elevation ~/.claude/skills/design-elevation
Commando's en voorbeeldprompts
/design-elevationTailwind-token design discipline voor elke visuele output — dashboards, PPTX, HTML, rapporten.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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