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

Design audit CLI for vibe coders. Extracts your real color palette, calculates WCAG contrast and finds every hardcoded color breaking your design system.

npx vibechroma@latest

→ Free Token · → Go Pro

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

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.

What VibeChroma scans

┌──────────────────────────────────────────────────────────┐
│               VIBECHROMA — SCOPE                         │
│                                                          │
│  🌈 Real Palette      extracted from CSS/Tailwind vars   │
│  ♿ WCAG Contrast     mathematically calculated, exact   │
│  🔩 Hardcoded Colors  scattered outside design system   │
│  🎨 Token Consistency palette coherence and coverage    │
│  🔤 Typography        fonts, hierarchy, display fonts   │
└──────────────────────────────────────────────────────────┘

• Paleta real extraída do CSS, variáveis CSS 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
• 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: --muted / --muted-foreground
     Ratio: 2.8:1 (mínimo legível: 4.5:1 — WCAG AA)
     impacto: Texto quase invisível pra usuários com baixa visão

  ⚠️  23 cores hardcoded fora do sistema de 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 | — | ✅ |

Install

# Run directly, no install needed
npx vibechroma@latest

# Or install globally
npm install -g vibechroma
vibechroma

Token grátis 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.

VibeCodes Ecosystem

npx vibeauryon        ← hub central que orquestra todos os agentes

| Agente | Função | Instalar | |--------|--------|----------| | 🔐 VibeSecurity | Segurança e vulnerabilidades | npx vibecipher | | ✏️ VibeAethras | Copy e conversão | npx vibeaethras | | 🎨 VibeChroma ← você está aqui | Design e identidade visual | npx vibechroma | | 📈 VibeSynthex | SEO e visibilidade | npx vibesynthex | | ⚡ VibeVivax | Velocidade e performance | npx vibevivax |

Made with ♥ by VibeCodes