Crear y auditar tokens de diseño
Genera o revisa tokens de diseño en formato DTCG, con colores, tipografía, espacios, sombras y movimiento. Sirve cuando necesitas una base de estilo bien organizada o comprobar que los archivos de tokens están correctos.
Descripción original (inglés)
design-tokens: Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta design-tokens en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/.claude/skills/design-tokens" ~/.claude/skills/design-tokens
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de plugin87/ux-ui-agent-skills
- Auditar accesibilidad web a11y-audit
- Aplicar estilo visual de diseño apply-aesthetic
- Crear sistema de marca accesible brandkit
- Criticar diseños con mirada adversaria critique
- Crear paneles de datos densos data-dashboard
- Generar código de componentes UI design-code
- Definir componentes de interfaz design-component
- Aplicar reglas de diseño design-doctrine
Explicación redactada con ayuda de IA a partir de la descripción original.