Color Systempor Owl-Listener

Color System Skill.

Transforme uma cor de marca em um conjunto utilizável de papéis de interface e combinações de primeiro plano e fundo.

Design de cor
Orientação de design

Revisão da fonte · Color SystemSKILL.md

Tarefa UX Produz • Escalas tonais de marca e neutras • Papéis semânticos de primeiro plano, fundo, borda e ícone • Uma matriz de contraste e uso Antes de começar Forneça as cores da marca, os papéis da interface e as metas de acessibilidade. Use estados reais dos componentes e uma ferramenta de verificação de contraste para avaliar as combinações de cores propostas.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Color System: Criar cores semânticas de produto

Camadas de paleta do produto, escalas tonais, mapeamento semântico de cores e orientações de uso voltadas ao contraste.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Color System serve para criar ou refazer a paleta de um produto. Ela separa escalas de marca, neutros, cores semânticas de status e usos estendidos. O resultado é mais do que um punhado de amostras atraentes: cada cor precisa de um papel e de relações utilizáveis com as superfícies vizinhas.

A fonte combina escalas tonais com verificações de contraste e alerta contra comunicar apenas por cor. Também pede mapeamentos para o modo escuro desde cedo. Uma paleta gerada é uma proposta de design até que os textos, componentes e combinações de estados reais tenham sido verificados.

Entregas esperadas

Escalas tonais de marca e neutras
Papéis semânticos de primeiro plano, fundo, borda e ícone
Uma matriz de contraste e uso

Ver o briefing de exemplo

Do briefing à revisão

01
Defina as camadas da paleta
Parta da direção da marca e derive os neutros e os papéis de status que o produto realmente usa.
02
Mapeie pares reais
Atribua cores a texto, superfícies, bordas e estados, em vez de deixá-las como amostras sem rótulo.
03
Verifique a acessibilidade
Teste as combinações pretendidas e adicione sinais que não dependam de cor onde o status precisa ser compreendido.

02 Quando usar

Quando usar

Forneça as cores da marca, os papéis da interface e as metas de acessibilidade. Use estados reais dos componentes e uma ferramenta de verificação de contraste para avaliar as combinações de cores propostas.

Bom encaixe

Uma nova paleta de produtoCrie uma base quando ainda não existem cores baseadas em papéis.
Cores de status inconsistentesResolva tratamentos concorrentes de sucesso, aviso e erro entre componentes.

Limites a verificar

Não é apenas adaptação ao modo escuroA tradução para o modo escuro de uma paleta clara existente é a tarefa separada de modo escuro.
Sem conformidade automáticaAs combinações reais de componentes e texto ainda exigem medição e revisão.

Traga estas informações

Direção da marcaForneça as cores de marca existentes e suas restrições.
Papéis da interfaceListe superfícies, níveis de texto, ações e status.
Meta de acessibilidadeInforme os requisitos relevantes de contraste e de comunicação sem depender de cor.

03 Decisões importantes

Decisões que importam

Papéis acima de amostras
O mapeamento semântico torna a paleta utilizável entre componentes.
Pares são a unidade de teste
Uma cor não tem resultado significativo de contraste de texto sem o fundo e o uso.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com o seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo de origem upstream

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

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use color-system para criar uma paleta para este produto de agendamento a partir do azul de marca fornecido. Defina escalas tonais e neutras, papéis semânticos de sucesso/aviso/erro e uma matriz de combinações reais de texto sobre superfície. Sinalize valores de contraste não verificados em vez de afirmar conformidade.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Todo papel proposto tem orientação de uso.
Os pares importantes têm contraste medido.
O status não é transmitido apenas pelo matiz.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/color-system/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Camadas de paleta do produto, escalas tonais, mapeamento semântico de cores e orientações de uso voltadas ao contraste.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Isto é apenas uma paleta de marca?

Não. Inclui neutros, estados semânticos e relações de uso.

O modo escuro deve ser considerado agora?

A fonte recomenda planejar os mapeamentos cedo, deixando a adaptação detalhada para uma tarefa separada.

Uma paleta segura para daltonismo resolve tudo?

Não. A fonte também pede rótulos, formas ou outras pistas onde o significado importa.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design