Onlook
Onlook · Programação
O Onlook é um editor visual de código aberto em que designers editam o código real de React e Next.js em uma tela, com a IA cuidando das edições pesadas, então o código segue como a fonte da verdade.
Sobre Onlook
What Is Onlook
O Onlook é um editor visual de código que roda no navegador. Em vez de exportar um mockup para um arquivo de design separado, ele carrega seu projeto real de React e Next.js, mostra os componentes em uma tela infinita e grava cada mudança direto no repositório. O código é a fonte da verdade, então o que você vê na tela é o produto de verdade, não uma foto dele.
A ferramenta ataca a divisão que costuma travar times de web. Como ferramenta de design para código, ela elimina o salto entre design e desenvolvimento: os designers trabalham em uma interface visual e os engenheiros puxam essas edições para o repositório com o mesmo fluxo de git que já usam. O Onlook lê seus tokens de design, sua tipografia e seus componentes de Storybook, e aplica tudo isso para que o que a IA gera combine com o que o time já publica.
Ser uma ferramenta de design de código aberto também pesa, porque os times podem ver como o editor funciona e ajustá-lo ao próprio ambiente, em vez de confiar em uma caixa preta.
O maior limite é o stack. O Onlook roda em projetos de React e Next.js com estilos de Tailwind CSS. Times que usam Vue, Svelte ou HTML puro não conseguem utilizá-lo hoje. O uso intenso da IA hospedada também esbarra no limite de mensagens do plano gratuito, então quem depende do assistente quase todo dia acaba precisando de um plano pago ou de um servidor próprio.
Getting Started
- Crie uma conta no app hospedado em onlook.com, ou clone o repositório de código aberto e rode por conta própria.
- Conecte uma conta do GitHub e importe um projeto existente de Next.js e Tailwind CSS, ou comece um novo dentro do editor.
- Na tela infinita, selecione qualquer elemento e edite à mão, ou descreva a mudança no chat e deixe a IA escrever.
- Confira a prévia ao vivo e o código por baixo ao mesmo tempo, e depois confirme ou envie as mudanças pelo git.
- Use o histórico de versões para voltar um passo, ou publique em um domínio próprio quando o trabalho estiver pronto.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Onlook.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Designers que trabalham com um time de frontend
- Desenvolvedores frontend
- Times pequenos de produto em startups
- Fundadores prototipando uma landing page
Tarefas
- Editar componentes de React ao vivo em uma tela
- Transformar um ajuste visual em uma mudança de código
- Manter a marca coerente em todas as páginas
- Importar um repositório existente
- Prototipar e idealizar uma página
Cenários
- Polir um site de marketing antes de um lançamento
- Testar ideias de layout em um produto real
- Integrar um designer a um projeto de React
Principais recursos
Edição visual sobre código real
O núcleo do Onlook é uma ferramenta de design Tailwind CSS e um editor visual de React na mesma tela infinita que renderiza seus componentes reais, não uma imagem estática. Você seleciona qualquer elemento e o arrasta, redimensiona, reordena ou muda o estilo. Como as edições voltam para os arquivos de origem, o que você move na tela é o que vai ao ar. Os designers mantêm a liberdade de uma ferramenta de design sem perder o vínculo com o repositório.
IA que edita seus componentes
O assistente do Onlook é um assistente de design com IA que lê seus componentes, seus tokens de design e sua configuração de Storybook, e depois sugere mudanças que seguem os padrões do time. Você pode editar um elemento sozinho ou passar a tarefa para o chat e deixar que ele escreva o código. Diferente dos geradores que só funcionam por chat, você mantém o controle visual completo enquanto a IA cuida das partes repetitivas.
Importe seu repositório
Você pode apontar o Onlook para um projeto existente de Next.js e Tailwind CSS no GitHub e começar a editar na hora. Não existe um formato de arquivo próprio do Onlook nem uma segunda cópia do design system para manter, então o projeto que você traz é o projeto que você publica.
Conformidade com o design system
O editor acompanha as fontes, as cores, o espaçamento e os padrões de componente da sua marca, e os aplica na geração. Cada elemento novo herda os mesmos tokens, o que mantém as páginas dentro da marca sem uma passada manual para corrigir desvios. Para times com um design system rígido, essa coerência importa mais do que a velocidade de geração.
Colaboração ao vivo e histórico de versões
Os times podem compartilhar um projeto e trabalhar na mesma tela em tempo real, como já fazem no Figma. Um histórico de revisões registra cada mudança para que qualquer pessoa volte a uma versão anterior. Essa rede de segurança facilita testar um layout ousado sem medo de perder um bom trabalho.
Camadas desenháveis e atalhos
O Onlook deixa traçar divs e textos direto no design para criar o código correspondente em tempo real. Os atalhos usuais vêm de outras ferramentas de design, então a memória muscular se transfere. As camadas permitem selecionar elementos aninhados com precisão quando uma seção tem uma árvore de componentes densa.
Publicar e auto-hospedar
O trabalho pronto pode sair para o GitHub, para um link ou para um domínio próprio. Como o Onlook é de código aberto sob a licença Apache 2.0, os times também podem auto-hospedá-lo de graça e manter cada design e mudança de código na própria infraestrutura. A versão hospedada acrescenta recursos de time como branches, temas e SSO com preço sob consulta.
Prós e contras
Prós
- O código segue como a fonte da verdade, então não há um arquivo de design separado para manter atualizado.
- É de código aberto sob Apache 2.0, com uma opção auto-hospedada gratuita que roda nos seus próprios servidores.
- A IA edita seguindo seus componentes e tokens existentes, então o resultado parece trabalho do próprio time.
- A colaboração ao vivo e o histórico de versões combinam com o jeito que design e desenvolvimento já trabalham juntos.
Contras
- Só aceita projetos de React e Next.js com estilos de Tailwind CSS, então outros frameworks ficam de fora hoje.
- O plano gratuito limita as mensagens de IA, o que reduz o que o assistente consegue fazer sem um plano pago.
- O plano Teams hospedado não tem preço público, então é preciso falar com vendas antes de comparar custos.
- Montar uma instância auto-hospedada exige certa desenvoltura técnica para publicar uma aplicação web.
Perguntas frequentes
O Onlook é um editor visual para editar código real de React e Next.js. Você constrói, estiliza e prototipa interfaces web em uma tela, e as mudanças vão para o repositório em vez de um arquivo de design isolado.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Onlook.
Alternativas a Onlook
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.