Color Systempor Owl-Listener

Color System Skill.

Convierte un color de marca en un conjunto utilizable de roles de interfaz y combinaciones de primer plano y fondo.

Diseño del color
Guía de diseño

Revisión de la fuente · Color SystemSKILL.md

Tarea UX Produce • Escalas tonales de marca y neutras • Roles semánticos de primer plano, fondo, borde e icono • Una matriz de contraste y uso Antes de empezar Aporta los colores de marca, los roles de la interfaz y los objetivos de accesibilidad. Usa estados reales de los componentes y una herramienta de comprobación de contraste para evaluar las combinaciones de color propuestas.

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

01 Qué hace

Color System: Crear color semántico de producto

Capas de paleta de producto, escalas tonales, asignación semántica de color y pautas de uso orientadas al contraste.

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

El enfoque de trabajo

Color System sirve para crear o rehacer una paleta de producto. Separa escalas de marca, neutros, colores semánticos de estado y usos ampliados. El resultado es más que un puñado de muestras atractivas: cada color necesita un rol y relaciones utilizables con las superficies vecinas.

La fuente combina escalas tonales con comprobaciones de contraste y advierte contra comunicar solo mediante el color. También pide definir pronto las asignaciones para modo oscuro. Una paleta generada es una propuesta de diseño hasta que se hayan comprobado sus textos, componentes y combinaciones de estados reales.

Entregables esperados

Escalas tonales de marca y neutras
Roles semánticos de primer plano, fondo, borde e icono
Una matriz de contraste y uso

Ver el brief de ejemplo

Del brief a la revisión

01
Define las capas de la paleta
Parte de la dirección de marca y deriva los neutros y los roles de estado que el producto realmente usa.
02
Asigna pares reales
Asigna colores a texto, superficies, bordes y estados en lugar de dejarlos como muestras sin etiquetar.
03
Comprueba la accesibilidad
Prueba las combinaciones previstas y añade señales que no dependan del color donde deba entenderse el estado.

02 Cuándo usarlo

Cuándo usarlo

Aporta los colores de marca, los roles de la interfaz y los objetivos de accesibilidad. Usa estados reales de los componentes y una herramienta de comprobación de contraste para evaluar las combinaciones de color propuestas.

Buen encaje

Una nueva paleta de productoCrea una base cuando aún no existen colores basados en roles.
Colores de estado inconsistentesResuelve tratamientos contradictorios de éxito, advertencia y error entre componentes.

Límites que conviene revisar

No es solo adaptación a modo oscuroLa traducción a oscuro de una paleta clara existente es una tarea distinta, la del modo oscuro.
Sin cumplimiento automáticoLas combinaciones reales de componentes y texto siguen requiriendo medición y revisión.

Aporta estos datos

Dirección de marcaFacilita los colores de marca existentes y sus restricciones.
Roles de la interfazEnumera superficies, niveles de texto, acciones y estados.
Objetivo de accesibilidadIndica los requisitos de contraste y de comunicación sin depender del color que sean relevantes.

03 Decisiones importantes

Decisiones que importan

Roles antes que muestras
La asignación semántica hace que la paleta sea utilizable en todos los componentes.
Los pares son la unidad de prueba
Un color no tiene un resultado de contraste de texto significativo sin su fondo y su uso.

04 Ejemplo de brief

Prueba un brief concreto

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

Revisa la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible de tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo fuente original

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

Empieza con un entregable

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

Brief de ejemplo

Usa color-system para crear una paleta para este producto de programación de citas a partir del azul de marca proporcionado. Define escalas tonales y neutras, roles semánticos de éxito, advertencia y error, y una matriz de combinaciones reales de texto sobre superficie. Señala los valores de contraste no verificados en lugar de afirmar que se cumple la normativa.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada rol propuesto tiene pautas de uso.
Los pares importantes tienen contraste medido.
El estado no se transmite solo con el tono.

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

Descargar OpenDesign Leer la guía rápida

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 del skill: ui-design/skills/color-system/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Capas de paleta de producto, escalas tonales, asignación semántica de color y pautas de uso orientadas al contraste.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Es solo una paleta de marca?

No. Incluye neutros, estados semánticos y relaciones de uso.

¿Debería considerarse ya el modo oscuro?

La fuente recomienda planificar las asignaciones pronto, y tratar la adaptación detallada por separado.

¿Una paleta apta para daltonismo lo resuelve todo?

No. La fuente también pide etiquetas, formas u otras señales cuando el significado importa.

OpenDesign

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

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

Descargar OpenDesign Explorar skills de diseño