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.
Funciona con configuración
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 libraryCreate CSS variables for our primitive and semantic tokensArchitect component-level tokens from our color primitives