SkillProof tested Claude skills

Design Tokens

Sistema di token OKLCH primitivo -> semantico -> componente con template CSS/Tailwind funzionanti; 4 dei suoi documenti di approfondimento citati non esistono nel repository.

di begenrousdigital-dotcom · begenrousdigital-dotcom/Ultimate-vibe-design

Richiede configurazione ★ 7.6/10

Design Tokens — Sistema di token OKLCH primitivo -> semantico -> componente con template CSS/Tailwind funzionanti; 4 dei suoi documenti di approfondimento citati non esistono nel repository.

Cosa fa

Genera un'architettura di design token a tre livelli (primitivo/semantico/componente) in OKLCH con preset iniziali per archetipo (SaaS premium, lusso editoriale, brutalista, ecc.) e distribuisce template funzionanti tokens.css, tailwind.config.ts, globals-v4.css e tokens.json. Il file SKILL.md cita quattro documenti di riferimento complementari (references/color-systems.md, typography-scales.md, spacing-rhythm.md, elevation-depth.md) per una logica più approfondita sulla matematica OKLCH, scale tipografiche, spaziatura ed elevazione — nessuno dei quattro esiste da nessuna parte nel repository, quindi considera queste citazioni come aspirazionali, non reali.

Rapporto di test

Il risultato principale è reale e non basato su template — un set di token OKLCH a tre livelli con oltre 60 variabili e override per la modalità scura batte una palette disegnata a mano piatta — ma il file SKILL.md punta a quattro documenti di riferimento complementari per la logica OKLCH/tipografia/spaziatura/elevazione, e nessuno dei quattro esiste nel repository; `ls` nella cartella dell'abilità mostra solo SKILL.md e templates/.

Testato il: 2026-07-14 · Claude Code 2.x (agent harness)

Installazione

git clone https://github.com/begenrousdigital-dotcom/Ultimate-vibe-design
cd Ultimate-vibe-design
mkdir -p ~/.claude/skills
cp -r skills/design-tokens ~/.claude/skills/design-tokens

Comandi e prompt di esempio

  • /design-tokensSistema di token OKLCH primitivo -> semantico -> componente con template CSS/Tailwind funzionanti; 4 dei suoi documenti di approfondimento citati non esistono nel repository.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • Build a layered design token system for our component library
  • Create CSS variables for our primitive and semantic tokens
  • Architect component-level tokens from our color primitives

Rapporto completo →