SkillProof tested Claude skills

Design Elevation

Tailwind-token design-disciplin for enhver visuel output — dashboards, PPTX, HTML, rapporter.

Af cuellarfr · cuellarfr/design-skills

Testet · Virker ★ 8.8/10

Design Elevation — Tailwind-token design-disciplin for enhver visuel output — dashboards, PPTX, HTML, rapporter.

Hvad det gør

Et referencebibliotek af designtokens og regler (farve/type/afstandsskalaer, elevationsbevægelser, Kholmatova funktionel-vs-perceptuel ramme, plus overrides for Trimble Modus, IBM Carbon, Shopify Polaris, Adobe Spectrum, Salesforce Lightning), som Claude anvender, når den producerer et visuelt artefakt. Udløses ved enhver præsentation, dashboard, HTML-side, PDF eller data-viz anmodning; det er prompt-vejledning, ikke eksekverbar tooling, så dens fulde værdi ligger i specificiteten af de instruktioner, Claude følger.

Testrapport

Byggede det samme 3-korts KPI-dashboard to gange — én gang fra bunden, én gang strengt efter skillens Tailwind-token-regler — og forskellen er konkret: gray-900/500/400 teksthierarki i stedet for ren sort, shadow-sm i stedet for en hård drop shadow, semantiske emerald/rose accenter i stedet for bogstavelig rød/grøn, tabular-nums på hver metrik, og en text-xs kildelinje, som baseline aldrig tænkte på at tilføje.

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

Kommandoer og eksempelprompter

  • /design-elevationTailwind-token design-disciplin for enhver visuel output — dashboards, PPTX, HTML, rapporter.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

  • 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 hele rapporten →