/impeccable colorize
Colorize
Adicione cor estratégica a interfaces monocromáticas sem ficar chamativo.
Quando usar
/impeccable colorize é o contrapeso para “tudo é cinza”. Dashboards que parecem uma parege bege, formulários sem cor de destaque, páginas de conteúdo que poderiam ser de qualquer produto SaaS. Use quando a interface é funcional, mas emocionalmente plana, e você quer calor sem cair na paleta de cores da IA (roxo-para-rosa, ciano neon, brilho no modo escuro).
Como funciona
A skill começa lendo sua cor de marca, se existir, depois decide onde a cor ganha seu lugar:
- Ação primária recebe a expressão mais forte do tom da marca.
- Acentos secundários recebem variantes muted ou tingidas, não uma segunda cor completa.
- Neutros são tingidos em direção ao tom da marca com croma baixo (cerca de 0.005 a 0.01), o que é quase invisível por pixel, mas cria coesão subconsciente.
- Categorias de conteúdo recebem um sistema de acentos limitado e intencional, não um arco-íris.
Importante, ela usa OKLCH em vez de HSL para que passos de luminosidade iguais pareçam iguais. Conforme a luminosidade se move em direção aos extremos, o croma cai automaticamente. É assim que você obtém cor que parece considerada em vez de computada.
Experimente
/impeccable colorize the dashboard
Diff esperado:
- Cor de marca movida de um hex fixo para
--color-accent: oklch(62% 0.18 240) - Neutros tingidos com 0.007 de croma em direção ao tom da marca
- Botão primário recebe o acento completo, botões secundários recebem ink/mist
- Série do gráfico usa 3 tons distintos, todos com luminosidade equivalente para que nenhuma série domine visualmente
- Ilustração do estado vazio recebe um lavagem suave de acento
Armadilhas
- Executar sem um tom de marca. Colorize precisa de um ponto de partida. Se o
PRODUCT.mdnão especifica um, ele perguntará. Não deixe escolher entre os padrões da paleta de cores da IA. - Esperar que resolva o problema da paleta de cores da IA. Se seu design já tem gradientes roxos e ciano neon, você precisa de
/impeccable quieterprimeiro, depois colorize pode reconstruir. - Usar em interfaces já coloridas. Isso é trabalho para
/impeccable quieter. Colorize adiciona, não subtrai.