██████╗██╗  ██╗██████╗  ██████╗ ███╗   ███╗ █████╗
██╔════╝██║  ██║██╔══██╗██╔═══██╗████╗ ████║██╔══██╗
██║     ███████║██████╔╝██║   ██║██╔████╔██║███████║
██║     ██╔══██║██╔══██╗██║   ██║██║╚██╔╝██║██╔══██║
╚██████╗██║  ██║██║  ██║╚██████╔╝██║ ╚═╝ ██║██║  ██║
 ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚═╝  ╚═╝

Seu site parece amador e você não sabe por quê. É provavelmente a paleta de cores.

npx vibechroma@latest

→ Pegar token Free · → Assinar Pro

A IA escolheu as cores. Você ajustou aqui, trocou ali, adicionou uma cor nova no componente de loading. Agora tem 23 tons de cinza diferentes no projeto. O texto sobre fundo claro mal se lê. E você não faz ideia de onde cada cor está definida.

O CHROMA extrai a paleta real do seu código, calcula o contraste real e mostra onde o design está quebrando.

O que o CHROMA analisa

• Pares de cor reais extraídos do CSS — variáveis, seletores e classes Tailwind
• Contraste WCAG calculado matematicamente, não estimado
• Cores hardcoded espalhadas fora do sistema de design
• Consistência da paleta e coerência entre tokens
• Sistema de tipografia — fontes, hierarquia e display fonts

Como funciona

npx vibechroma
  ↓
Lê Tailwind config, extrai paleta, escaneia componentes
  ↓
  ✓ Pronto.

  Design: 72/100
  🔴 1 crítico(s)  🟡 3 aviso(s)

  ❌ Contraste insuficiente para leitura: --muted / --muted-foreground
     Ratio: 2.8:1 (mínimo para leitura ok: 4.5:1)
     impacto: Texto quase invisível pra usuários com baixa visão

  ⚠️  23 cores hardcoded fora do sistema de design
     Seu design vai ficar inconsistente quando você mudar o tema

  ⚠️  Sem fonte de display definida para headlines
  ↓
? CHROMA — O que você quer fazer?
  ❯ 🎨 Rodar nova análise
    🌈 Ver as cores do seu projeto
    ⚠️  Ver cores soltas no código (fora do sistema)
    ♿ Ver se as cores têm contraste legível
    📄 Abrir relatório completo

Free vs PRO

| | FREE | PRO | |---|---|---| | Auditoria completa de design | ✅ | ✅ | | Score 0-100 com críticos e avisos | ✅ | ✅ | | Extração de paleta real do CSS/Tailwind | ✅ | ✅ | | Cálculo de contraste WCAG real | ✅ | ✅ | | Detecção de cores hardcoded | ✅ | ✅ | | Skills de design injetáveis no agente IA | 12 skills | 30 skills | | Análise profunda de tokens e tipografia | — | ✅ | | Histórico de auditorias por projeto | — | ✅ |

Como instalar

1. Rode direto, sem instalar nada:

npx vibechroma@latest

2. Ou instale globalmente:

npm install -g vibechroma
vibechroma

3. Pegue um token Free em vibecodings.com.br/auryon — sem cartão de crédito.

Relatório salvo em

.vibeauryon/chroma-audit.md

Gerado automaticamente após cada análise com a paleta extraída, scores de contraste e todas as inconsistências encontradas.

Ecossistema VibeCodes

| Agente | Função | Instalar | |--------|--------|----------| | 🔐 CIPHER | Segurança e vulnerabilidades | npx vibecipher | | ✏️ AETHRAS | Copy e conversão | npx vibeaethras | | 🎨 CHROMA ← você está aqui | Design e identidade visual | npx vibechroma | | 📈 SYNTHEX | SEO e visibilidade | npx vibesynthex | | ⚡ VIVAX | Velocidade e performance | npx vibevivax |

Hub central: npx vibeauryon

Feito com ♥ por VibeCodes