Preline Theme Generator

Genererar kompletta ljusa/mörka Preline CSS-temafiler från en nyans eller varumärkeshex via ett medföljande lokalt Node-skript.

av htmlstreamofficial · htmlstreamofficial/preline

Testad · Fungerar ★ 9.6/10

Preline Theme Generator — Genererar kompletta ljusa/mörka Preline CSS-temafiler från en nyans eller varumärkeshex via ett medföljande lokalt Node-skript.

Vad den gör

Wrappar en fristående, nätverksfri Node.js-generator som omvandlar en varumärkesfärg eller nyans till ett komplett Preline-designtoken-tema (OKLCH-färgskala, gråskala, semantiska tokens för yta/kant/diagram/karta, ljus- och mörkvarianter). Aktiveras vid förfrågningar om att skapa, förhandsvisa, matcha eller validera ett Preline-tema, och utesluter uttryckligen generiskt icke-Preline-CSS-arbete eller godtycklig kommandokörning.

Testrapport

Körde det faktiska medföljande skriptet helt utan konfiguration och utan nätverksanrop, vilket gav en 682-raders CSS-fil med en fullständig OKLCH-skala och tokens för mörkt läge till diagram, jämfört med en handskriven 16-egenskapersfil helt utan sådana.

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

Installation

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

Kommandon och exempelprompter

  • /preline-theme-generatorGenererar kompletta ljusa/mörka Preline CSS-temafiler från en nyans eller varumärkeshex via ett medföljande lokalt Node-skript.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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