·design-tokens
*

design-tokens

phrazzld/claude-config

Aplique patrones de token de diseño utilizando la directiva @theme de Tailwind CSS 4: variables CSS, nombres semánticos, sistemas de color, escalas de tipografía, espaciado, modo oscuro. Úselo al diseñar sistemas de interfaz de usuario, revisar la coherencia del diseño o establecer pautas de marca. Se integra con la habilidad de diseño frontend para la ejecución estética.

9Instalaciones·1Tendencia·@phrazzld

Instalación

$npx skills add https://github.com/phrazzld/claude-config --skill design-tokens

SKILL.md

Design tokens are the single source of truth for design decisions.

Migration from Tailwind 3: Delete tailwind.config.js, move to CSS @theme.

Design tokens provide the foundation; frontend-design provides aesthetic direction.

Aplique patrones de token de diseño utilizando la directiva @theme de Tailwind CSS 4: variables CSS, nombres semánticos, sistemas de color, escalas de tipografía, espaciado, modo oscuro. Úselo al diseñar sistemas de interfaz de usuario, revisar la coherencia del diseño o establecer pautas de marca. Se integra con la habilidad de diseño frontend para la ejecución estética. Fuente: phrazzld/claude-config.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/phrazzld/claude-config --skill design-tokens
Categoría
*Creatividad
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es design-tokens?

Aplique patrones de token de diseño utilizando la directiva @theme de Tailwind CSS 4: variables CSS, nombres semánticos, sistemas de color, escalas de tipografía, espaciado, modo oscuro. Úselo al diseñar sistemas de interfaz de usuario, revisar la coherencia del diseño o establecer pautas de marca. Se integra con la habilidad de diseño frontend para la ejecución estética. Fuente: phrazzld/claude-config.

¿Cómo instalo design-tokens?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/phrazzld/claude-config --skill design-tokens Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/phrazzld/claude-config