Algorithmic Colour Palette

Wyprowadza tokeny hover/active/tint/grey/semantic z jednego heksadecymalnego koloru marki za pomocą stałych formuł HSL.

Autor: dembrandt · dembrandt/dembrandt-skills

Testowano · Działa ★ 9.6/10

Algorithmic Colour Palette — Wyprowadza tokeny hover/active/tint/grey/semantic z jednego heksadecymalnego koloru marki za pomocą stałych formuł HSL.

Co robi ten skill

Rozszerza jeden lub dwa kolory marki w pełny system kolorów UI, używając jawnych formuł regulacji HSL: ciemniejsze/jaśniejsze stany interaktywne, szarości desaturowane odcieniem marki zamiast ogólnych neutralnych, oraz semantyczne kolory statusu dopasowane do nasycenia i jasności marki. Uruchamia się podczas budowania lub rozszerzania systemu kolorów, wyboru odcieni hover/active, lub generowania tokenów dla plików CSS/Tailwind/design-system.

Raport z testu

Wykonano rzeczywiste obliczenia HSL dla koloru marki #2D6A4F (H153/S40/L30): wynik umiejętności wygenerował szarości widocznie zabarwione na zielono (#161d1a, #45544d, #f4f5f5) i kolory semantyczne zablokowane na 40% nasycenia marki, w porównaniu do domyślnych szarości Tailwind i standardowych czerwieni/bursztynu/zieleni, które nie mają żadnego związku odcienia ani intensywności z marką.

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

Instalacja

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

Komendy i przykładowe prompty

  • /algorithmic-color-paletteWyprowadza tokeny hover/active/tint/grey/semantic z jednego heksadecymalnego koloru marki za pomocą stałych formuł HSL.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • Generate a full color palette from our brand hex #2D6A4F
  • I need hover and active state colors for our primary button
  • Create brand-tinted grey tokens for our Tailwind config