Onlook: Ferramenta aberta para editar React visualmente¶
O Onlook surge como uma alternativa aberta às ferramentas de design tradicionais, permitindo que designers e desenvolvedores trabalhem diretamente no código real de um aplicativo React. Em vez de criar mockups que depois precisam ser reconstruídos, o Onlook exibe o app em execução e converte cada ajuste visual em atualizações de código imediatas.
Sobre o Onlook¶
O Onlook é descrito como “The Cursor for Designers”, uma ferramenta de código aberto (licença Apache 2.0) que permite editar visualmente componentes de um projeto React e ver o código ser gravado automaticamente nos arquivos fonte. Ele suporta projetos React e Next.js existentes, sem necessidade de migração, e está disponível como aplicativo desktop para Mac, Windows e Linux.
Observacao
O projeto já acumula 23 900 estrelas, 1,8 k forks e 1,634 commits no GitHub, indicando forte adoção da comunidade.
Como funciona¶
Ao abrir um projeto React no Onlook, o usuário vê a aplicação em execução. Ao clicar em qualquer elemento, pode:
- Arrastrar, redimensionar e restilar visualmente.
- Alterar espaçamento, layout, cores e outros estilos.
- Utilizar prompts de IA para gerar novos componentes, páginas ou seções.
Cada ação visual resulta em gravação direta de código limpo nos arquivos do projeto, sem arquivos de design separados ou etapas de exportação.
Dica
Como o design passa a ser o próprio código, não há mais necessidade de handoff ou de reconstruir telas a partir de arquivos Figma.
Comparação de custos¶
A seguir, uma tabela resumindo os valores mensais ou hora‑hora das ferramentas mencionadas no post:
| Serviço / Plano | Custo |
|---|---|
| Figma | $15 / usuário / mês |
| Webflow | $29 / mês |
| Framer | $20 / mês |
| Agências de design | $150 / hora |
| Onlook | Grátis (open source, Apache 2.0) |
Benefícios e considerações¶
- Integração direta: alterações são feitas no código real, evitando retrabalho.
- Colaboração unificada: designers e desenvolvedores trabalham no mesmo artefato.
- Geração assistida por IA: cria componentes a partir de descrições em linguagem natural.
- Multiplataforma: aplicativo desktop disponível para os principais sistemas operacionais.
Atencao
Apesar de ser gratuito e open source, a adoção em grandes equipes pode exigir avaliação de compatibilidade com fluxos de trabalho existentes e de suporte a longo prazo.
Pontos-chave¶
- O Onlook permite edição visual de aplicativos React com atualização automática do código.
- Funciona com projetos React e Next.js existentes, sem necessidade de migração ou arquivos de design separados.
- Oferece geração de componentes via prompts de IA e está disponível como desktop app para Mac, Windows e Linux.
- É totalmente gratuito, licenciado sob Apache 2.0 e já possui mais de 23 900 estrelas no GitHub.
- Elimina o ciclo de handoff entre designers e desenvolvedores, reduzindo custos e retrabalho comparado a ferramentas pagas como Figma, Webflow e Framer.
Ferramentas e Tecnologias¶
- [[Onlook]]
- [[React]]
- [[Figma]]
- [[Webflow]]
- [[Framer]]
Nota pessoal
https://x.com/i/status/2044988988944211972