Communitygithub.com

Composición de Paletas de Color

Crea, revisa, critica o documenta temas de color de alta atención para interiores, gráficos, marcas, páginas web, interfaces, visualizaciones de datos e impresión. Úsalo siempre que una solicitud necesite una paleta coordinada, esquema de color, proporciones, ubicación, mezcla o jerarquía visual; no para una elección de color aislada.

¿Qué es Composición de Paletas de Color?

Esta habilidad proporciona un flujo de trabajo completo y canónico para generar o revisar paletas de color y temas, priorizando la distribución controlada de la atención sobre la mera selección de muestras atractivas. Es útil para desarrolladores, diseñadores y agentes de IA que necesitan crear esquemas de color coordinados para diversos medios (interiores, gráficos, UI, visualización de datos, impresión) con una jerarquía visual clara. Funciona con plataformas como Codex y modelos como GPT-5, aplicando métodos duales obligatorios de teoría del color (contrastes de Itten y sistema Munsell) para garantizar decisiones de diseño fundamentadas. La habilidad exige un contrato de nomenclatura robusto que separe nombres de marca oficiales de nombres de historia canónicos y alias de roles semánticos, y requiere un handoff estructurado en formato YAML que documente todos los aspectos de la paleta, incluyendo peso visual, pruebas de contraste y accesibilidad. Para empezar, se debe cargar el documento de composición principal y luego el módulo específico según el medio o la necesidad (aplicación, kits de inicio o validación).

Compatible con~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/getrdone/agent-skills/tree/main/skills/color-palette-composition

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Composición de Paletas de Color?

Construye una distribución controlada de la atención, no un montón de muestras atractivas. El tono es secundario al peso visual: el área, el croma, el contraste local, la temperatura y el aislamiento determinan si una paleta se sostiene.

Esta es la habilidad canónica para generar o revisar materialmente una paleta/tema. Otros sistemas pueden proporcionar restricciones de fuente, historia, roles semánticos, tokens de implementación o evidencia de interpretación; no reemplazan este flujo de trabajo de composición.

Carga solo lo que la tarea necesita

Lee composición principal para cada tema nuevo o revisado sustancial. Luego carga exactamente el módulo relevante:

NecesidadLee
Ubicación en interiores, gráficos/editorial, UI, visualización de datos o impresiónaplicación según medio
Ejemplos de inicio o un patrón de armonía con nombrekits de inicio
Transferencia formal, verificación de contraste/producción, procedencia o puente de tokens de diseñovalidación y transferencia

No cargues kits de inicio para una crítica rutinaria, y no cargues cada módulo solo porque la tarea es una tarea de paleta. El núcleo sigue siendo obligatorio; el módulo adicional hace que la habilidad sea precisa sin hacer que las solicitudes rutinarias sean costosas.

Comienza con el brief

Identifica el medio, el estado de ánimo y la audiencia previstos, la fuente/historia, los colores o materiales fijos, las condiciones de iluminación/salida, el requisito de accesibilidad y un objetivo de atención. Conserva exactamente un color bloqueado. Etiqueta los valores serios como official, extracted, harmonized o semantic; una muestra derivada no debe convertirse en un estándar de marca falso.

Usa campo / compañero / chispa siempre que "primario" pueda ser ambiguo. En una composición de habitación o editorial, el color más grande es generalmente el campo. En UI, primary a menudo significa un color de acción pequeño y de alto énfasis; usa canvas, surface y on-* para roles amplios.

Método de lente dual obligatorio para temas

Para cada esquema de color o tema propuesto de manera sustancial, aplica e informa ambas lentes. Una armonía o receta con nombre por sí sola es insuficiente.

  1. Itten: nombra uno o dos de los siete contrastes que realizan el trabajo compositivo (tono, claro-oscuro, frío-cálido, complementario, simultáneo, saturación o extensión). Cuando dos áreas cromáticas coexisten, toma una decisión de extensión en lugar de asumir áreas iguales.
  2. Munsell: nombra la ruta HVC que construye la familia (valor vertical, tono lateral o hacia adentro a través del gris hacia el opuesto), luego realiza una corrección de valor-croma. Un color pequeño e intenso puede equilibrar un campo mucho más grande y apagado; el porcentaje solo no es equilibrio.
  3. Peso visual: evalúa peso ~= área x croma x contraste local. La temperatura y el aislamiento lo amplifican o amortiguan. Esta es una heurística de diseño direccional, no un cálculo físico.
  4. Lectura humana: incluye un theory_summary de una o dos oraciones que nombre los patrones de Itten y Munsell utilizados, lo que cambiaron y por qué un humano podría investigarlos.

Contrato de nomenclatura requerido

Aplica esto antes de la transferencia. Las Directivas de Diseño poseen la arquitectura de tokens; esta habilidad requiere el comportamiento de paleta que la alimenta.

  • Asigna a la paleta completa y a las muestras canónicas/de historia nombres cortos, evocadores y específicos de la fuente (normalmente de 1 a 3 palabras). No llames a un color de diseño real Naranja 1 o Azul Oscuro.
  • Conserva exactamente el nombre oficial de un fabricante o color de marca; regístralo como official en lugar de reemplazarlo con un alias poético.
  • Mantén los nombres de historia canónicos separados de los alias de roles semánticos: por ejemplo, Llama puede mapearse a --llama, mientras que --color-primary o action describe su trabajo de implementación. Un rol puede cambiar sin renombrar la historia de color.
  • Nombra los degradados característicos a partir de la imagen/historia que crean (Núcleo de Fuego, Barrido de Ala), nunca Degradado 1. Una etiqueta de construcción genérica es solo provisional.
  • Si una fuente proporcionada usa nombres genéricos, conserva la etiqueta de la fuente en la procedencia y propón un nombre canónico evocador solo cuando no esté bloqueado/oficial.

Flujo de trabajo rápido

  1. Construye primero la estructura de valor: campo legible más tinta/color sobre el color. Un diseño que muere en escala de grises tiene una jerarquía no resuelta.
  2. Elige un objetivo de atención. Dale la ventaja más fuerte en croma, contraste de valor, contraste cálido/frío, aislamiento o escala, no a todos los elementos.
  3. Considera 70/20/10 para trabajo editorial/campaña/habitación liderado por la atención o 80/15/5 para trabajo denso, refinado y liderado por la información. Estos son primeros ensayos favorecidos, no reglas. Usa otra división con una razón de peso visual; usa 60/30/10 solo cuando su sesgo de interior equilibrado se ajuste.
  4. Asigna roles de campo, compañero, chispa, neutro/color sobre el color y estado semántico; mapéalos a superficies o componentes.
  5. Aplica las decisiones de contraste de Itten y HVC/valor-croma de Munsell. Construye una familia relacionada antes de importar un tono no relacionado.
  6. Realiza la prueba focal de dos segundos, las comprobaciones de contraste/señal no cromática y la prueba de medio/salida.

Salvaguardas no negociables

  • 60/30/10 es una convención documentada de interiores, no un valor predeterminado global ni una ley científica.
  • Un color de marca bloqueado que falla en el contraste cambia de rol. Un color derivado no bloqueado puede cambiar de valor/croma, rol o ambos.
  • El color nunca transmite un estado, categoría, acción o error por sí solo; agrega palabras, iconos, formas, patrones, posición o subrayado según corresponda.
  • No trates un HEX de pantalla como una fórmula de pintura o una especificación CMYK de producción. Prueba de impresión con su perfil de salida; prueba muestras de pintura bajo la luz instalada y junto a materiales fijos.
  • Las recetas de inicio son direcciones, nunca marcas predeterminadas. Cámbiales el nombre y derívalas de nuevo a partir de la fuente presente.

Transferencia requerida

Para una respuesta de paleta sustancial, incluye lo siguiente según corresponda:

palette:
  medium: interior | graphic | ui | data-viz | print | mixed
  concept:
  attention_target:
  naming:
    theme_name:
    canonical_story_names: []
    semantic_role_aliases: {}
    signature_gradient_names: []
    official_names_preserved: []
  theory_lens: "Itten + Munsell"
  itten_application: { contrasts: [], extension_decision: "" }
  munsell_application: { hvc_path: "", value_chroma_correction: "" }
  visual_weight: "fundamento campo / compañero / chispa"
  theory_summary: "Una o dos oraciones: patrón nombrado, decisión y por qué."
  harmony:
  allocation:
  provenance: {}
  field: { name, value_or_material, placement }
  partner: { name, value_or_material, placement }
  spark: { name, value_or_material, placement }
  neutrals_and_on_colors: []
  semantic_states: []
  contrast_status:
  non_color_cues:
  production_or_light_test:
  do_not_use_as: []

theory_lens, itten_application, munsell_application y theory_summary son obligatorios para un tema creado. En una explicación informal, indícalos de forma compacta en lugar de emitir el bloque completo.

Terminado cuando

  • Cada color superviviente tiene un nombre canónico o nombre oficial conservado, rol, asignación, ubicación y procedencia.
  • El campo, el compañero y la chispa son evidentes en dos segundos.
  • El croma/contraste más fuerte gana su atención.
  • Tanto las decisiones de Itten como las de Munsell están nombradas, aplicadas y explicadas.
  • El texto, los controles, los gráficos significativos y los estados funcionan en el contexto real y no se distinguen solo por el color.
  • El resultado se prueba en su condición real de luz, pantalla, material o salida cuando sea aplicable.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados