Design Tokens

Primitief -> semantisch -> component OKLCH token systeem met werkende CSS/Tailwind sjablonen; 4 van zijn eigen geciteerde diepgaande documenten bestaan niet in de repo.

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

Werkt met setup ★ 7.6/10

Design Tokens — Primitief -> semantisch -> component OKLCH token systeem met werkende CSS/Tailwind sjablonen; 4 van zijn eigen geciteerde diepgaande documenten bestaan niet in de repo.

Wat het doet

Genereert een drielaagse (primitief/semantisch/component) design-token architectuur in OKLCH met per-archetype starter presets (premium SaaS, editorial luxury, brutalist, etc.) en levert werkende tokens.css, tailwind.config.ts, globals-v4.css, en tokens.json sjablonen. De SKILL.md citeert vier bijbehorende referentiedocumenten (references/color-systems.md, typography-scales.md, spacing-rhythm.md, elevation-depth.md) voor diepere rationale over OKLCH-wiskunde, type-schalen, spacing en elevatie -- geen van de vier bestaat ergens in de repo, dus beschouw die citaten als aspiratief, niet als echt.

Testrapport

De kernlevering is echt en niet-gesjabloniseerd — een OKLCH drielaagse token-set met meer dan 60 variabelen en dark-mode overrides verslaat een platte handgemaakte palette — maar de SKILL.md verwijst naar vier bijbehorende referentiedocumenten voor de OKLCH/typografie/spacing/elevatie rationale, en geen van de vier bestaat in de repo; `ls` op de skill-map toont alleen SKILL.md en templates/.

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

Installatie

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

Commando's en voorbeeldprompts

  • /design-tokensPrimitief -> semantisch -> component OKLCH token systeem met werkende CSS/Tailwind sjablonen; 4 van zijn eigen geciteerde diepgaande documenten bestaan niet in de repo.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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