Design Tokens

Sistema de tokens OKLCH primitivo -> semántico -> de componente con plantillas CSS/Tailwind funcionales; faltan 4 de sus propios documentos de referencia citados en el repositorio.

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

Funciona con configuración ★ 7.6/10

Design Tokens — Sistema de tokens OKLCH primitivo -> semántico -> de componente con plantillas CSS/Tailwind funcionales; faltan 4 de sus propios documentos de referencia citados en el repositorio.

Qué hace

Genera una arquitectura de tokens de diseño de tres capas (primitivo/semántico/componente) en OKLCH con preajustes de inicio por arquetipo (SaaS premium, lujo editorial, brutalista, etc.) y envía plantillas funcionales tokens.css, tailwind.config.ts, globals-v4.css y tokens.json. El SKILL.md cita cuatro documentos de referencia complementarios (references/color-systems.md, typography-scales.md, spacing-rhythm.md, elevation-depth.md) para una justificación más profunda de las matemáticas OKLCH, escalas tipográficas, espaciado y elevación — ninguno de los cuatro existe en ninguna parte del repositorio, así que trate esas citas como aspiracionales, no reales.

Informe de la prueba

El entregable principal es real y no está basado en plantillas — un conjunto de tokens OKLCH de tres capas de más de 60 variables con anulaciones de modo oscuro supera a una paleta hecha a mano plana — pero el SKILL.md apunta a cuatro documentos de referencia complementarios para la justificación de OKLCH/tipografía/espaciado/elevación, y ninguno de los cuatro existe en el repositorio; `ls` en la carpeta de la habilidad solo muestra SKILL.md y templates/.

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

Instalación

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

Comandos y prompts de ejemplo

  • /design-tokensSistema de tokens OKLCH primitivo -> semántico -> de componente con plantillas CSS/Tailwind funcionales; faltan 4 de sus propios documentos de referencia citados en el repositorio.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 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