Preline Theme Generator

Genera file di tema CSS Preline completi light/dark a partire da una tonalità o un hex di brand, tramite uno script Node locale incluso.

di htmlstreamofficial · htmlstreamofficial/preline

Promosso ★ 9.6/10

Cosa fa

Racchiude un generatore Node.js autonomo, senza accesso di rete, che trasforma un colore di brand o una tonalità in un tema completo di design token Preline (scala colore OKLCH, scala di grigi, token semantici per surface/border/chart/map, varianti light e dark). Si attiva su richieste di creare, visualizzare in anteprima, abbinare o validare un tema Preline, ed esclude esplicitamente lavoro CSS generico non-Preline o esecuzione di comandi arbitrari.

Rapporto di test

Eseguito lo script incluso reale senza alcuna configurazione e senza chiamate di rete, producendo un file CSS di 682 righe con una scala OKLCH completa e token per i grafici in dark mode, contro un foglio scritto a mano di 16 proprietà privo di entrambi.

Testato il: 2026-07-10 · Claude Code 2.x (agent harness)

Installazione

git clone https://github.com/htmlstreamofficial/preline
cd preline
mkdir -p ~/.claude/skills
cp -r skills/theme-generator ~/.claude/skills/preline-theme-generator

Comandi e prompt di esempio

/preline-theme-generatorGenera file di tema CSS Preline completi light/dark a partire da una tonalità o un hex di brand, tramite uno script Node locale incluso.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

Generate a light and dark Preline theme from this brand hex color
Create an OKLCH color scale Preline theme matching our hue
Preview and validate this Preline design-token theme

Rapporto completo →