Theming Systempor Owl-Listener

Theming System Skill.

Permite que una misma biblioteca de componentes cambie de apariencia sin duplicar su estructura.

Sistemas de diseño
Temas

Revisión de la fuente · Theming SystemSKILL.md

Tarea Sistemas de diseño Produce • Una arquitectura de tokens de tres capas con reglas de sobrescritura. • Una matriz de temas que cubre los modos de color, marca o densidad necesarios. • Orientación sobre la cobertura de componentes y sobre los tokens fijos frente a los personalizables por tema. Antes de empezar La implementación usa el sistema de tokens del proyecto o equivalentes de la plataforma; el cambio en tiempo de ejecución debe construirse y probarse.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Admite varios temas mediante tokens

Una arquitectura de temas en capas para componentes compartidos entre marcas, modos de color y variantes de densidad.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Theming System coloca las diferencias entre temas en una arquitectura de tokens por capas. Los valores sin procesar de la paleta alimentan roles semánticos, que a su vez alimentan tokens específicos de cada componente. Las sobrescrituras de tema cambian principalmente la capa semántica, lo que permite que los mismos componentes sirvan a distintas marcas o modos de color.

La fuente distingue los temas de la simple inversión de colores. Las superficies oscuras, la elevación, la saturación y las variantes de imagen requieren un tratamiento deliberado. También incluye la densidad como dimensión de tema, por lo que la especificación es relevante más allá del color.

Entregables esperados

Una arquitectura de tokens de tres capas con reglas de sobrescritura.
Una matriz de temas que cubre los modos de color, marca o densidad necesarios.
Orientación sobre la cobertura de componentes y sobre los tokens fijos frente a los personalizables por tema.

Ver el brief de ejemplo

Del brief a la revisión

01
Separar las capas de tokens
Identifica las primitivas sin procesar, los alias basados en su propósito y las referencias a nivel de componente.
02
Mapear las sobrescrituras de tema
Cambia los roles semánticos de cada tema solicitado y conserva el contrato del componente.
03
Revisar toda la biblioteca
Revisa cada componente en cada tema admitido, incluidas las imágenes y el comportamiento según la preferencia del sistema operativo.

02 Cuándo usarlo

Cuándo usarla

La implementación usa el sistema de tokens del proyecto o equivalentes de la plataforma; el cambio en tiempo de ejecución debe construirse y probarse.

Buen encaje

Productos multimarcaÚtil cuando las interfaces de marca blanca o submarcas deben compartir una biblioteca de componentes.
Más allá del claro y el oscuroTambién ofrece una estructura para variantes de alto contraste o de densidad.

Límites que conviene comprobar

No es un ejercicio de paleta únicaElegir un solo conjunto de colores no establece una arquitectura de temas mantenible.
Sin certificación automática de contrasteAun así, hay que probar cada combinación real de texto, superficie y estado.

Aporta estos datos

Temas admitidosEnumera las marcas, los modos de color, los modos de contraste y los requisitos de densidad.
Tokens existentesProporciona la paleta, los alias semánticos y las referencias de componentes.
Elementos de marca fijosIdentifica los recursos o valores que no deben cambiar entre temas.

03 Decisiones importantes

Decisiones que importan

Sobrescribir en la capa adecuada
Los alias semánticos evitan dispersar colores específicos de cada marca por las implementaciones de los componentes.
Los recursos forman parte del tema
Las imágenes e ilustraciones pueden necesitar variantes; cambiar solo las variables de CSS puede no bastar para lograr un modo oscuro coherente.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada en el repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

La implementación usa el sistema de tokens del proyecto o equivalentes de la plataforma; el cambio en tiempo de ejecución debe construirse y probarse.

Empieza con un solo entregable

Adapta el alcance, el material de partida y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa theming-system para una biblioteca de componentes compartida por dos marcas en modos claro y oscuro. Define las capas primitiva, semántica y de componente, identifica los tokens fijos y muestra cómo funcionan las sobrescrituras de tema. Incluye variantes de imagen y una matriz de control de calidad de componente por tema, sin dar por hecho que invertir los colores sea suficiente.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Los tokens de componente se resuelven mediante los roles semánticos documentados.
Se distinguen los valores personalizables por tema de los fijos.
La matriz de pruebas incluye todos los temas admitidos.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill incluya sus herramientas externas, credenciales ni dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: design-systems/skills/theming-system/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Una arquitectura de temas en capas para componentes compartidos entre marcas, modos de color y variantes de densidad.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no un indicador del uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Dónde deben los temas sobrescribir los tokens?

La fuente sitúa las sobrescrituras principales en la capa semántica, entre los valores sin procesar y los tokens específicos de cada componente.

¿Puede la densidad ser un tema?

Sí. La fuente incluye las densidades cómoda, compacta y espaciosa junto con los modos de color y de marca.

¿Prescribe una herramienta de implementación concreta?

Menciona propiedades personalizadas de CSS, archivos de tokens, modos de variables de Figma y cambio en tiempo de ejecución, sin imponer una única pila tecnológica.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, el material de partida y tu trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño