Design Tokens

Primitiv -> semantisk -> komponent OKLCH token-system med fungerande CSS/Tailwind-mallar; 4 av dess egna citerade djupdykningsdokument finns inte i repot.

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

Fungerar med konfiguration ★ 7.6/10

Design Tokens — Primitiv -> semantisk -> komponent OKLCH token-system med fungerande CSS/Tailwind-mallar; 4 av dess egna citerade djupdykningsdokument finns inte i repot.

Vad den gör

Genererar en tre-lagers (primitiv/semantisk/komponent) design-token-arkitektur i OKLCH med start-förinställningar per arketyp (premium SaaS, redaktionell lyx, brutalist, etc.) och levererar fungerande tokens.css, tailwind.config.ts, globals-v4.css och tokens.json-mallar. SKILL.md citerar fyra medföljande referensfiler (references/color-systems.md, typography-scales.md, spacing-rhythm.md, elevation-depth.md) för djupare rationalitet om OKLCH-matematik, typskalor, mellanrum och höjd – ingen av de fyra finns någonstans i repot, så behandla dessa citat som aspirationella, inte verkliga.

Testrapport

Kärnleveransen är verklig och icke-mallad – ett OKLCH token-set med över 60 variabler i tre lager med mörka läges-överskrivningar slår en platt handrullad palett rakt av – men SKILL.md pekar på fyra medföljande referensdokument för OKLCH/typografi/mellanrum/höjd-rationalitet, och ingen av de fyra finns i repot; `ls` i färdighetsmappen visar bara SKILL.md och templates/.

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

Installation

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

Kommandon och exempelprompter

  • /design-tokensPrimitiv -> semantisk -> komponent OKLCH token-system med fungerande CSS/Tailwind-mallar; 4 av dess egna citerade djupdykningsdokument finns inte i repot.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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