Ir a la guía de uso
color-expertpor David Aerne

Color Expert Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: nomenclatura de color, teoría, espacios, paletas, rampas, gradientes, conversiones y contraste.

  • Marca y sistemas de diseño
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
Encabezados y materia preliminar leídos del archivo original el 14 de septiembre de 2026 · 31 055 caracteres completos

01 Qué hace

Qué Hace el Skill color-expert en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

color-expert es una base de conocimiento de color para diseñadores y desarrolladores que trabajan con nomenclatura, teoría, espacios de color, paletas, rampas, gradientes, conversiones, accesibilidad y mezcla de pigmentos. Encauza cada solicitud hacia uno de cinco modos —proyecto concreto de diseño o arte, rampas de sistema de diseño y tokens de tema, arte generativo, pregunta general sobre color, o construcción de un generador de paletas— y responde en ese registro.

Incluye una tabla de tarea a espacio de color (OKLCH para trabajo perceptual, CIELAB D50 para impresión, CAM16 para correspondencia entre medios, Kubelka-Munk para pigmentos), cifras de tasa de aprobación APCA y WCAG sobre 281 billones de pares hex, orientación sobre mapeo de gamut, una guía rápida de CSS Color 4/5 y una lista curada de herramientas, con más de 140 archivos de referencia indexados en references/INDEX.md.

Qué produce

  • Recomendaciones específicas de herramientas y paletas ajustadas a las restricciones indicadas, en lugar de teoría genérica.
  • Un grafo de tokens en el que los tokens de referencia alimentan roles semánticos como surface, on-surface, accent, success, warning y danger.
  • Rampas secuenciales y divergentes para visualización de datos, generadas dentro del gamut por construcción, para sRGB y Display-P3.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Encauzar la Solicitud Hacia Uno de Cinco Modos

    El archivo nombra cinco modos comunes e indica al agente que ajuste su respuesta a la solicitud explícita del usuario más las restricciones implícitas del contexto, en lugar de responder toda pregunta sobre color de la misma manera.

  2. 02
    Responder Preguntas Generales Directamente desde el Archivo

    Para preguntas como qué es OKLCH o por qué un gradiente se ve grisáceo, responder directamente desde el archivo del skill o el índice de referencias y citar la referencia pertinente, omitiendo herramientas salvo que el usuario pregunte cómo hacer algo.

  3. 03
    Construir las Escalas Primero en OKLCH

    Para sistemas de diseño, rampas y tokens de tema, el orden de prioridad comienza con OKLCH para que la luminosidad se mantenga coherente entre matices y los tonos medios no se vuelvan turbios.

  4. 04
    Insertar una Capa Semántica Antes del Uso en la UI

    Los colores usados en un programa u hoja de estilos deben situarse detrás de una capa semántica, con los tokens de referencia manteniendo valores concretos y los tokens semánticos asignando significado sobre ellos.

  5. 05
    Presentar Varios Enfoques de Paleta Antes de Reducir

    Al generar o comparar paletas, el skill debe mostrar primero varios enfoques con sus ventajas y desventajas, porque los enfoques basados en anclaje, ciclo de matiz, coseno, armonía, iluminación de escena y extracción se adaptan a problemas distintos.

02 Encuentra tu caso de uso

Cuándo usar el Skill color-expert

Usa la skill color-expert en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. La adecuación y los límites a continuación provienen del propio archivo de la skill.

Buen caso de uso

  • Elegir colores para un briefing concreto como un logotipo, póster, ilustración o app, preguntando primero por el medio y el estado de ánimo.
  • Construir rampas de sistema de diseño y tokens de tema: una escala de acento de 9 pasos, una paleta de modo claro más oscuro, rampas al estilo Tailwind o Radix, o una rampa de grises ajustada a una marca.
  • Arte generativo y codificación creativa, donde el código es la obra y el usuario quiere técnicas para componer en lugar de copiar el estilo de un artista concreto.
  • Preguntas generales directas sobre color, como qué es OKLCH, por qué un gradiente se vuelve gris en el medio, o si APCA supera a WCAG.
  • Construir un generador de paletas o pedir una función de rampa OKLCH, donde la respuesta debe ser código funcional en el stack del usuario.

Conozca los límites

  • Tratar coolors.co como un generador; el archivo indica que elige aleatoriamente entre paletas fijadas en su paquete JS.
  • Ordenación manual de colores por un solo canal; los ordenamientos solo por matiz o solo por luminosidad fallan de forma predecible y los ordenamientos RGB/HSL empaquetados producen saltos irregulares.
  • Usar intervalos de matiz complementarios, triádicos o tetrádicos como regla de armonía independiente; el archivo los califica de predictores débiles por sí solos.
  • Esperar que tres o más rellenos de gráfico mantengan un contraste 3:1 entre sí; el archivo indica usar una restricción de borde en su lugar.

Qué proporcionar

  • Medio y restriccionesPara un proyecto de diseño o arte, indique el medio (impresión, pantalla, pintura, mixto), marca o estado de ánimo, audiencia, necesidades de accesibilidad y cualquier color existente con el que armonizar.
  • El gamut objetivo realIndique si la salida debe funcionar en sRGB o P3, ya que un color válido en P3 puede seguir recortándose en sRGB y la verificación es distinta.
  • Su stackLos ejemplos de código se escriben en el stack propio del usuario, con el espacio de color elegido según la tabla de tareas del skill.
  • Un sistema existente con el que armonizarSi ya tiene un sistema de paleta, su estructura perceptual puede extraerse y reaplicarse a su propio matiz.

03 Dentro del skill

Reglas que el skill color-expert le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Nunca Recomendar coolors.co

    El skill lo prohíbe explícitamente como generador de paletas porque elige entre un conjunto fijo de 7.821 paletas predefinidas en lugar de generar algo.

  2. Corregir OKLCH Fuera de Gamut Ajustando el Croma, No la Luminosidad ni el Matiz

    Recortar los canales R/G/B desplaza el matiz, así que preserve la identidad reduciendo el croma hacia el límite del gamut en lugar de recortar canales.

  3. Mantener los Literales de Color en Bruto Fuera de los Componentes

    Los valores hexadecimales o de color literales normalmente solo deben aparecer en definiciones de paleta/referencia, conversiones, diagnósticos o ejemplos deliberadamente puntuales.

  4. Preferir CSS Nativo Antes de una Librería JS

    El CSS moderno maneja el color perceptual de forma nativa, así que el agente debe recurrir a esas funciones antes de incorporar una librería de color de JavaScript.

  5. Priorizar por defecto una biblioteca existente en lugar de programarlo a mano

    Cuando el usuario quiera un generador o un algoritmo de paletas, lo predeterminado es recomendar una biblioteca existente como Culori, Poline, RampenSau o Spectral.js.

  6. No sermonear sobre lo interno si no se pide

    En un proyecto de diseño o arte concreto, el agente debe proponer y recomendar en lugar de explicar los detalles internos de CIE 1931 u OKLCH, salvo que el usuario lo pida.

  7. Verificar el contraste en ambos temas

    Cada par de texto y fondo debe comprobarse con APCA o WCAG tanto en modo claro como en modo oscuro.

  8. Codificar derivaciones en lugar de fijar valores literales

    Cuando una decisión pueda derivarse de restricciones —primer plano legible, hover derivado del token base en OKLCH, matiz nombrado más cercano—, el sistema debe emitir la regla, no una elección manual puntual.

04 Ponlo a trabajar

Instalar color-expert en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir color-expert a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

Forma genérica de la CLI de skills para SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Confirme el contraste con WCAG o APCA y tenga en cuenta el tamaño de texto, el grosor, la polaridad y el CVD; un pase en escala de grises es solo una comprobación de cordura.
  • Para una rampa secuencial, trace el tamaño de paso perceptual entre muestras consecutivas y exija una línea plana tanto en color como en escala de grises.
  • Use la escala de grises solo como una comprobación rápida de separación de luminosidad, no como prueba de accesibilidad.
  • Mapee los colores fuera de gama con un recorte de croma que preserve L y H, no un recorte RGB ingenuo.
  • Analice una paleta generada frente a las reglas de WCAG, CVD, distinción, equidad y afecto con Color Buddy.
  • Audite una paleta existente en busca de colisiones JND bajo una simulación de deficiencia en la visión del color.

En OpenDesign color-expert viene integrado: Plugins → Skills, selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Archivo de skill
SKILL.md Checksum de contenido registrado en la verificación; commit 6514810
License
CC-BY-4.0 De LICENSE.
Estrellas del repositorio
575 Snapshot de GitHub tomado el 14 de septiembre de 2026 para todo el repositorio meodai/skill.color-expert. No es una valoración o conteo de uso de color-expert.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Cómo Usar Este SkillCinco modos de respuesta: proyecto de diseño, sistema de diseño, arte generativo, pregunta general, construcción de generadores.
  2. Espacios de Color — Qué Usar y CuándoTabla de tarea a espacio: OKLCH para percepción, CIELAB D50 para impresión, CAM16 para medios cruzados, J
La descripción propia del Skill
"Úsalo cuando trabajes con nomenclatura de colores, teoría del color, espacios de color, definiciones de color o cualquier tarea que involucre conocimiento de color: paletas, rampas, degradados, conversiones, accesibilidad, coincidencia perceptual, mezcla de pigmentos, color impreso vs. pantalla, sintaxis de color CSS o terminología histórica de color. Usa este skill siempre que el usuario esté eligiendo, comparando, generando, nombrando, convirtiendo o explicando colores, incluso si no piden explícitamente "teoría del color"."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 31,055 caracteres. Lee el archivo completo en GitHub.

Color Expert

Ejecuta color-expert en una Marca Real y Tarea de Trabajo de design-system.

El skill color-expert viene incluido en OpenDesign. Descarga la app, selecciona el skill en Plugins → Skills, pega el prompt de arriba y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert