Preline Theme Generator

Genera archivos de tema CSS completos claro/oscuro de Preline a partir de un tono o hex de marca vía un script Node local incluido.

Por htmlstreamofficial · htmlstreamofficial/preline

Probado · Funciona ★ 9.6/10

Preline Theme Generator — Genera archivos de tema CSS completos claro/oscuro de Preline a partir de un tono o hex de marca vía un script Node local incluido.

Qué hace

Envuelve un generador Node.js autocontenido y sin red que convierte un color de marca o tono en un tema completo de tokens de diseño Preline (escala de color OKLCH, escala de grises, tokens semánticos de superficie/borde/gráfico/mapa, variantes claro+oscuro). Se activa con peticiones de crear, previsualizar, hacer coincidir o validar un tema de Preline, y excluye explícitamente trabajo de CSS genérico no-Preline o ejecución arbitraria de comandos.

Informe de la prueba

Ejecutó el script real incluido sin configuración ni llamadas de red, produciendo un archivo CSS de 682 líneas con una escala OKLCH completa y tokens de gráfico para modo oscuro, frente a una hoja escrita a mano de 16 propiedades sin nada de eso.

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

Instalación

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

Comandos y prompts de ejemplo

/preline-theme-generatorGenera archivos de tema CSS completos claro/oscuro de Preline a partir de un tono o hex de marca vía un script Node local incluido.

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 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

Informe completo →