Algorithmic Colour Palette
Deriva tokens hover/active/tint/grey/semantic de un hex de marca mediante fórmulas HSL fijas.
Probado · Funciona
Qué hace
Expande uno o dos colores de marca en un sistema de color de UI completo usando fórmulas explícitas de ajuste HSL: estados interactivos más oscuros/claros, grises desaturados del tono de la marca en lugar de neutrales genéricos, y colores de estado semánticos alineados con la saturación y luminosidad de la marca. Se activa al construir o extender un sistema de color, elegir tonos hover/active, o generar tokens para archivos CSS/Tailwind/design-system.
Informe de la prueba
Se ejecutó el cálculo HSL real en el color de marca #2D6A4F (H153/S40/L30): la salida de la habilidad produjo grises visiblemente teñidos de verde (#161d1a, #45544d, #f4f5f5) y colores semánticos bloqueados a la propia saturación del 40% de la marca, en contraste con los grises Tailwind estándar de la línea base sin guía y los rojos/ámbar/verdes predeterminados que no comparten ninguna relación de tono o intensidad con la marca.
Probado el: 2026-07-14 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/dembrandt/dembrandt-skills cd dembrandt-skills mkdir -p ~/.claude/skills cp -r skills/algorithmic-color-palette ~/.claude/skills/algorithmic-color-palette
Comandos y prompts de ejemplo
/algorithmic-color-paletteDeriva tokens hover/active/tint/grey/semantic de un hex de marca mediante fórmulas HSL fijas.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Generate a full color palette from our brand hex #2D6A4FI need hover and active state colors for our primary buttonCreate brand-tinted grey tokens for our Tailwind config