Preline Theme Generator

Erzeugt vollständige Hell-/Dunkel-Preline-CSS-Themedateien aus einem Farbton oder Marken-Hex-Wert über ein mitgeliefertes lokales Node-Skript.

von htmlstreamofficial · htmlstreamofficial/preline

Getestet · Funktioniert ★ 9.6/10

Preline Theme Generator — Erzeugt vollständige Hell-/Dunkel-Preline-CSS-Themedateien aus einem Farbton oder Marken-Hex-Wert über ein mitgeliefertes lokales Node-Skript.

Was es kann

Kapselt einen eigenständigen, netzwerkfreien Node.js-Generator, der eine Markenfarbe oder einen Farbton in ein vollständiges Preline-Design-Token-Theme verwandelt (OKLCH-Farbskala, Grauskala, semantische Surface-/Border-/Chart-/Map-Tokens, Hell- und Dunkel-Varianten). Reagiert auf Anfragen, ein Preline-Theme zu erstellen, in der Vorschau anzuzeigen, abzugleichen oder zu validieren, und schließt generische Nicht-Preline-CSS-Arbeit oder beliebige Befehlsausführung ausdrücklich aus.

Testbericht

Das mitgelieferte Skript lief ohne jedes Setup und ohne Netzwerkaufrufe und erzeugte eine 682-zeilige CSS-Datei mit vollständiger OKLCH-Skala und Dark-Mode-Chart-Tokens, verglichen mit einem handgeschriebenen 16-Eigenschaften-Sheet ohne all das.

Getestet am: 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

Befehle & Beispiel-Prompts

/preline-theme-generatorErzeugt vollständige Hell-/Dunkel-Preline-CSS-Themedateien aus einem Farbton oder Marken-Hex-Wert über ein mitgeliefertes lokales Node-Skript.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →