83.3K+Baixar
Ir para o guia de uso
color-expertpor David Aerne

Color Expert Skill.

Uma skill para Claude Code e Codex voltada a trabalho de marca e design systems: nomenclatura de cores, teoria, espaços, paletas, rampas, gradientes, conversões e contraste.

  • Marca e Sistemas de Design
Baixar OpenDesignVer guia de uso
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
Cabeçalhos de seção e metadados lidos do arquivo original em 14/09/2026 · 31.055 caracteres no total

01 O que faz

O que o Skill color-expert Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

color-expert é uma base de conhecimento sobre cor para designers e desenvolvedores que tratam de nomenclatura, teoria, espaços de cor, paletas, ramps, gradientes, conversões, acessibilidade e mistura de pigmentos. Ele direciona uma solicitação para um de cinco modos — projeto concreto de design ou arte, ramps de design system e tokens de tema, arte generativa, pergunta geral sobre cor, ou construção de um gerador de paletas — e responde nesse registro.

Ele traz uma tabela de tarefa para espaço de cor (OKLCH para trabalho perceptual, CIELAB D50 para impressão, CAM16 para correspondência entre mídias, Kubelka-Munk para pigmento), taxas de aprovação APCA e WCAG sobre 281 trilhões de pares hex, orientação de mapeamento de gamut, um guia rápido de CSS Color 4/5 e uma lista curada de ferramentas, com mais de 140 arquivos de referência indexados em references/INDEX.md.

O que ele produz

  • Recomendações específicas de ferramentas e paletas alinhadas às restrições declaradas, em vez de teoria genérica.
  • Um grafo de tokens em que tokens de referência alimentam papéis semânticos como surface, on-surface, accent, success, warning e danger.
  • Ramps sequenciais e divergentes para visualização de dados, gerados dentro do gamut por construção, para sRGB e Display-P3.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Direcionar a Solicitação para um dos Cinco Modos

    O arquivo nomeia cinco modos comuns e instrui o agente a alinhar sua resposta à solicitação explícita do usuário mais as restrições implícitas do contexto, em vez de responder toda pergunta sobre cor da mesma forma.

  2. 02
    Responder Perguntas Gerais Diretamente a partir do Arquivo

    Para perguntas como o que é OKLCH ou por que um gradiente fica acinzentado, responda diretamente com base no arquivo do skill ou no índice de referências e cite a referência relevante, dispensando ferramentas a menos que o usuário pergunte como fazer algo.

  3. 03
    Construir Escalas Primeiro em OKLCH

    Para design systems, ramps e tokens de tema, a ordem de prioridade começa com OKLCH para que a luminosidade permaneça consistente entre matizes e os tons médios não fiquem embaçados.

  4. 04
    Inserir uma Camada Semântica Antes do Uso na UI

    As cores usadas em um programa ou stylesheet devem ficar atrás de uma camada semântica, com tokens de referência mantendo valores concretos e tokens semânticos mapeando significado sobre eles.

  5. 05
    Apresente Várias Abordagens de Paleta Antes de Restringir

    Ao gerar ou comparar paletas, o skill deve mostrar primeiro várias abordagens com seus trade-offs, pois abordagens baseadas em ancoragem, ciclagem de matiz, cosseno, harmonia, cena iluminada e extração servem a problemas diferentes.

02 Encontre o ideal para você

Quando usar a Skill color-expert

Use a skill color-expert no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do arquivo da própria skill.

Boa Combinação

  • Escolher cores para um briefing concreto, como um logotipo, pôster, ilustração ou app, perguntando primeiro sobre o meio e o clima desejado.
  • Construir escalas de design system e tokens de tema: uma escala de destaque com 9 passos, uma paleta para os modos claro e escuro, escalas no estilo Tailwind ou Radix, ou uma escala de cinza compatível com uma marca.
  • Arte generativa e creative coding, em que o código é a obra e o usuário quer técnicas para compor, em vez do estilo de um artista específico para copiar.
  • Responder diretamente a perguntas gerais sobre cor, como o que é OKLCH, por que um gradiente fica cinza no meio, ou se o APCA supera o WCAG.
  • Construir um gerador de paletas ou pedir uma função de escala OKLCH, em que a resposta deve ser código funcional na stack do usuário.

Conheça os Limites

  • Tratar o coolors.co como um gerador; o arquivo diz que ele escolhe aleatoriamente entre paletas fixas embutidas no seu pacote JS.
  • Ordenação artesanal de cores em canal único; ordenações só por matiz ou só por luminosidade falham de forma previsível, e ordenações por RGB/HSL compactado geram saltos irregulares.
  • Usar intervalos de matiz complementares, triádicos ou tetrádicos como regra de harmonia isolada — o arquivo os classifica como preditores fracos por si só.
  • Esperar que três ou mais preenchimentos de gráfico mantenham contraste de 3:1 entre si; o arquivo recomenda usar uma restrição de borda em vez disso.

O Que Fornecer

  • Meio e restriçõesPara um projeto de design ou arte, informe o meio (impresso, tela, tinta, misto), marca ou clima, público, necessidades de acessibilidade e quaisquer cores existentes para harmonizar.
  • O gamut real de destinoDiga se o resultado precisa ficar dentro do sRGB ou do P3, já que uma cor válida em P3 ainda pode ser cortada em sRGB, e a verificação é diferente.
  • Sua stackOs exemplos de código são escritos na stack do próprio usuário, com o espaço de cor escolhido conforme a tabela de tarefas do skill.
  • Um sistema existente para harmonizarSe você já tem um sistema de paletas, sua estrutura perceptual pode ser extraída e reaplicada ao seu próprio matiz.

03 Dentro da skill

Regras que a skill color-expert dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Nunca Recomende o coolors.co

    O skill o proíbe explicitamente como gerador de paletas, pois ele escolhe entre um conjunto fixo de 7.821 paletas pré-feitas, em vez de gerar algo.

  2. Corrija OKLCH fora do gamut Reduzindo o Croma, Não a Luminosidade ou o Matiz

    Recortar canais R/G/B desloca o matiz, então preserve a identidade reduzindo o croma em direção ao limite do gamut, em vez de recortar canais.

  3. Mantenha Literais de Cor Crua Fora dos Componentes

    Valores literais de hex ou cor normalmente devem aparecer apenas em definições de paleta/referência, conversões, diagnósticos ou exemplos deliberadamente pontuais.

  4. Prefira CSS Nativo Antes de uma Biblioteca JS

    O CSS moderno lida com cor perceptual nativamente, então o agente deve recorrer a esses recursos antes de trazer uma biblioteca de cores em JavaScript.

  5. Priorizar uma biblioteca existente em vez de construir na mão

    Quando o usuário quer um gerador ou algoritmo de paleta, o padrão é recomendar uma biblioteca existente como Culori, Poline, RampenSau ou Spectral.js.

  6. Não dar aulas sobre internals sem pedido

    Em um projeto de design ou arte concreto, o agente deve propor e recomendar em vez de explicar os internals do CIE 1931 ou OKLCH, a menos que o usuário pergunte.

  7. Verificar contraste nos dois temas

    Todo par de texto e fundo deve ser verificado com APCA ou WCAG tanto no modo claro quanto no escuro.

  8. Codificar derivações em vez de congelar valores literais

    Quando uma decisão pode ser derivada de restrições — primeiro plano legível, hover a partir do token base em OKLCH, matiz nomeada mais próxima — o sistema deve emitir a regra, não uma escolha manual única.

04 Coloque em prática

Instalar color-expert no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar color-expert ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

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

Formato genérico da CLI skills para SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma primeira tarefa de marca e design-system

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Confirme o contraste com WCAG ou APCA e considere tamanho de texto, peso, polaridade e CVD; um teste em escala de cinza é apenas uma verificação de sanidade.
  • Para uma rampa sequencial, plote o tamanho do passo perceptual entre amostras consecutivas e exija uma linha plana em cor e em escala de cinza.
  • Use a escala de cinza apenas como uma verificação rápida de separação de luminosidade, não como prova de acessibilidade.
  • Mapeie cores fora do gamut com clamping de croma que preserva L e H, não um clamping RGB ingênuo.
  • Faça lint de uma paleta gerada contra regras de WCAG, CVD, distinção, justiça e afeto com o Color Buddy.
  • Audite uma paleta existente para colisões de JND sob simulação de deficiência de visão de cores.

No OpenDesign o color-expert vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
David Aerne
Repository
github.com/meodai/skill.color-expert Branch main
Arquivo da skill
SKILL.md Checksum de conteúdo registrado na verificação; commit 6514810
License
CC-BY-4.0 De LICENSE.
Estrelas do repositório
575 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório meodai/skill.color-expert. Não é uma classificação ou contagem de uso para color-expert.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Como Usar Este SkillCinco modos de resposta: projeto de design, sistema de design, arte generativa, pergunta geral, construção de gerador.
  2. Espaços de Cor — O Que Usar QuandoTabela de tarefa por espaço: OKLCH para percepção, CIELAB D50 para impressão, CAM16 cross-media, J
A Descrição da Própria Skill
Use ao trabalhar com nomenclatura de cores, teoria das cores, espaços de cor, definições de cores ou qualquer tarefa envolvendo conhecimento de cores - paletas, rampas, gradientes, conversões, acessibilidade, correspondência perceptual, mistura de pigmentos, cor impressa vs. tela, sintaxe de cores CSS ou terminologia histórica de cores. Use esta skill sempre que o usuário estiver escolhendo, comparando, gerando, nomeando, convertendo ou explicando cores, mesmo que não peça explicitamente "teoria das cores".

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 31.055 caracteres. Leia o arquivo completo no GitHub.

Color Expert

Execute color-expert em uma Tarefa Real de Marca e design-system.

A skill color-expert vem dentro do OpenDesign. Baixe o aplicativo, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert