Olhinhos Coloridos

o que é e como funciona na prática

olhinhos coloridos é uma ferramenta de prototipagem visual focada em interfaces, amplamente usada por desenvolvedores brasileiros que precisam validar layouts sem entrar num projeto completo de design system. Ela funciona como um canvas interativo onde você arrasta componentes, define comportamentos básicos e gera código compatível com React ou Vue no final. Não é nada revolucionário do ponto de vista técnico, mas o fluxo é rápido o suficiente para ser útil em sprints curtos. O diferencial real está na forma como os componentes são tratados como blocos independentes com estilos inline, o que elimina a necessidade de lidar com arquivos CSS separados durante a fase de prototipagem. Isso significa que, se você está acostumado com workflows mais tradicionais, vai levar uns dias para se adaptar à lógica. Mas depois que entra no jeito, o ganho de tempo é perceptível.

instalando e configurando olhinhos coloridos

O processo de instalação é direto. Você baixa o instalador pelo repositório oficial no GitHub, roda o comando de setup e ele instala as dependências de forma automática. O pacote leva cerca de 300 MB, o que é considerável se você trabalha em máquinas com pouco espaço disponível. Recomendo ter pelo menos 1 GB livres antes de começar, só para garantir que o cache durante a compilação inicial não cause problemas. Após a instalação, rode o comando init na pasta do seu projeto. Ele cria uma estrutura básica com três pastas principais: componentes, páginas e assets. A pasta de componentes é onde você vai passar a maior parte do tempo. Os arquivos têm extensão .oly e são basicamente JSON estruturado com regras de layout embutidas.

Um problema comum que muita gente encontra na primeira vez é o conflito de portas. O servidor de desenvolvimento sobe na porta 3000 por padrão, mas se você já tiver outro serviço rodando ali, o startup falha silenciosamente. A solução é passar a flag --port 8080 ou editar o arquivo config.json na raiz do projeto para definir a porta antes de iniciar.

construindo o primeiro protótipo

Vou descrever o fluxo real que eu uso, não a teoria do manual. Abro o editor integrado do olhinhos coloridos, crio um novo canvas e começo arrastando um componente de layout. Não tente fazer tudo de uma vez. O erro mais comum é colocar cinco componentes na tela e depois gastar 40 minutos tentando ajustar espaçamentos que não estão funcionando. Primeiro monte a estrutura base com grid ou flexbox usando os controles visuais. O editor tem um painel lateral com as propriedades de cada componente selecionado, incluindo padding, margin, border-radius e cores. As cores podem ser definidas tanto por valor hexadecimal quanto por variáveis globais que você configura no arquivo theme.json. Trabalhar com variáveis de tema economiza bastante tempo quando você precisa mudar a paleta inteira depois.

Quando a estrutura estiver pronta, exporte para código. O botão de exportar fica no canto superior direito e gera arquivos separados para cada componente. No meu caso, costumo exportar direto para uma pasta do meu projeto React existente e ajustar manualmente os imports. O código gerado é limpo, mas não é perfeito. Há cases onde o gerador coloca divs desnecessárias ou aplica estilos inline que conflitam com o Tailwind do projeto. Um detalhe que ninguém menciona no tutorial oficial: o gerador de código não preserva comentários do arquivo .oly. Se você documentou alguma decisão de layout dentro do protótipo, vai precisar refazer isso depois da exportação. Perde uns minutos, mas é importante manter o código organizado desde o início.

limitações que você precisa saber antes de adotar

olhinhos coloridos não escala bem para projetos grandes. Já tentei montar um protótipo com mais de cinquenta telas e o desempenho do editor começou a degradar significativamente. O canvas fica lento para renderizar e as operações de zoom e pan entram em lag. Se o seu projeto tem mais de trinta componentes interligados, considere usar uma ferramenta mais robusta como Figma ou Stitch em paralelo. Outro ponto fraco é a falta de suporte a animações avançadas. O editor permite transições básicas de fade e slide, mas nada com easing complexo ou keyframes personalizados. Se o seu protótipo precisa demonstrar microinterações sofisticadas, você vai ter que fazer isso manualmente no código mesmo.

A documentação é parcialmente em português e parcialmente em inglês, o que gera confusão quando você busca por um erro específico. Os fóruns de suporte também são pequenos. Encontrei um bug relacionado a componentes aninhados que só funcionavam corretamente após uma reinicialização dupla do servidor. A workaround que encontrei foi colocar um componente wrapper vazios ao redor dos grupos que estavam com problema. Funciona, mas é meio gambiarra.

quando vale a pena e quando não vale

Para MVPs, landing pages e protótipos rápidos de validação, olhinhos coloridos funciona bem. O ciclo de iteração é curto e o código exportado é legível o suficiente para ser integrado diretamente. Para produtos que precisam de design system consistente, múltiplos temas e testes de acessibilidade, o investimento em outras ferramentas provavelmente será mais produtivo a longo prazo. O custo é zero no tier gratuito, o que remove muita barreira para quem está começando. A versão paga oferece colaboração em tempo real e integração com GitHub, mas essas funcionalidades só fazem diferença em times maiores. Se você trabalha sozinho ou em dupla, o plano gratuito cumpre o papel.