Inspector
Inspector · Programação
O Inspector é um editor visual de front-end para desenvolvedores que criam apps em React, Next.js ou Vite com agentes de código com IA. Ele se conecta ao agente que você já usa, então em vez de descrever uma mudança de texto e esperar que o agente adivinhe qual arquivo mexer, você simplesmente aponta para o elemento na tela. Editar um texto, ajustar um layout ou trocar um componente acontece por uma interface visual que grava as mudanças direto no código local da sua máquina. Sem copiar e colar, sem caçar arquivos na mão.
Sobre Inspector
O que é o Inspector
O Inspector é um editor visual de front-end feito para a era do código assistido por IA. Projetos em React, Next.js e Vite são cada vez mais escritos por agentes como Claude Code, Cursor ou Codex, e o gargalo mudou de lugar, porque a parte difícil não é mais produzir um componente. É dizer ao agente exatamente qual elemento mudar e onde esse elemento vive. O Inspector fecha esse ciclo. Ele coloca uma camada visual sobre o seu app em execução. Agora você edita React com IA clicando em um título ou arrastando um card, e isso vira uma edição precisa nos seus arquivos-fonte locais.
A ferramenta gira em torno de uma ideia simples. Suas mãos pertencem à interface, não à árvore de arquivos. Você edita o texto na própria linha. Move elementos de um lado para o outro. E roda o agente de novo sobre a mudança sem sair da página que está vendo. Ele trabalha direto no seu código local, então nada chega a um servidor remoto antes de você decidir publicar.
Os limites principais vale a pena dizer logo. O Inspector atende apenas projetos de React, Next.js e Vite. Uma equipe de Vue ou Svelte não vai tirar muito proveito. Ele também parte do princípio de que você já usa um agente de código com assinatura própria. O Inspector se conecta a esse agente e não o substitui. Ainda sem agente? Configure isso primeiro.
Primeiros passos
- Instale o Inspector e abra seu projeto para que ele detecte o framework e o servidor de desenvolvimento.
- Conecte o agente de código que você já usa, seja Claude Code, Cursor ou Codex.
- Suba seu servidor de desenvolvimento e abra o app dentro da visualização do Inspector.
- Clique em qualquer elemento para editar o texto, ou arraste-o para mudar posição e layout.
- Revise o diff que o Inspector gera e deixe o agente confirmar a mudança no seu código.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Inspector.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores de front-end em times de React ou Next.js
- Desenvolvedores que já pagam Claude Code, Cursor ou Codex
- Criadores individuais que lançam interfaces rápido
Tarefas
- Reescrever o texto da interface em uma página inteira
- Ajustar layout e espaçamento
- Iterar sobre a estrutura de um componente
Cenários
- Polir uma landing page na véspera de uma demo
- Revisar a saída do agente em um projeto real
- Entrar em um código que um agente montou
Principais recursos
Edição visual de textos e elementos
O Inspector deixa você selecionar um elemento na página e mudá-lo no lugar. Edite uma manchete. Corrija o rótulo de um botão. Mova um card para outro ponto. A ferramenta mapeia cada ação de volta para o código-fonte. O ponto é a velocidade nas coisas pequenas que antes exigiam uma ida e volta completa de prompt e espera com o agente.
Conexões independentes do agente
O Inspector funciona com Claude Code, Cursor e Codex em vez de prender você a um único fornecedor. Ele se conecta ao agente que você já paga. Assim você mantém sua assinatura e seu fluxo atuais. Como ferramenta de front-end para Claude Code, editor visual do Cursor ou companheiro do Codex, ele se adapta ao que você roda. Essa flexibilidade importa em times onde desenvolvedores diferentes usam agentes diferentes no mesmo repositório.
Edições diretas no código local
Cada mudança chega aos seus arquivos locais, não a um ambiente hospedado do editor. A estrutura do seu projeto, as dependências e o histórico de versões ficam intactos. Não se movem. A camada visual fica por cima do seu app real e nunca o troca por uma réplica online limitada.
Suporte a React, Next.js e Vite
A ferramenta é afinada para o stack moderno de React. Ela lida com interfaces baseadas em componentes, reconhece as convenções do framework e segue a estrutura que essas ferramentas de build geram em um projeto típico. Se o seu app roda em um desses frameworks, o Inspector entende o que está vendo de cara.
Revisão do diff antes de confirmar
O Inspector mostra o que está prestes a mudar para você aprovar ou rejeitar. Você vê as edições no código que o agente produziu. Depois decide se elas batem com a sua intenção. Esse passo de revisão evita que um fluxo visual rápido introduza em silêncio mudanças que você não pediu.
Prévia integrada do servidor de desenvolvimento
Você trabalha sobre seu servidor de desenvolvimento ao vivo dentro da ferramenta, então o que edita é exatamente o que o navegador vai renderizar na sua frente. Sem capturas de tela desatualizadas e sem adivinhar como uma mudança vai ficar. A prévia e o código ficam em sincronia enquanto você itera.
Prós e contras
Prós
- Acelera os pequenos ajustes de texto e layout que de outra forma pediriam um prompt inteiro para o agente.
- Funciona com o agente que você já usa em vez de forçar uma nova assinatura.
- Edita seu projeto local real, então suas ferramentas e o histórico do git ficam intactos.
- A camada visual facilita achar e corrigir o que um agente errou.
- Foca em React, Next.js e Vite, então entende as convenções desse stack.
Contras
- Só suporta React, Next.js e Vite, então times de Vue, Svelte ou Angular não ganham nada.
- Ele se conecta a um agente de código mas não inclui nenhum, então você precisa ter Claude Code, Cursor ou Codex rodando primeiro.
- O suporte a plataformas se limita ao macOS, o que deixa de fora por ora os desenvolvedores de Windows e Linux.
- Ele não desenha do zero; edita interfaces que o seu agente já gerou.
Perguntas frequentes
É um editor visual de front-end que se conecta ao seu agente de código com IA. Você aponta para um elemento no app em execução, muda o texto ou a posição do jeito que quer, e o Inspector transforma isso em edições no seu código local de React, Next.js ou Vite. Ele substitui o passo de descrever no prompt por um clique direto.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Inspector.
Alternativas a Inspector
Base Code
Base44 (Wix) · Programação · ProdutividadeO Base Code é um ambiente de desenvolvimento em nuvem compartilhado da Base44. O time descreve mudanças em um repositório do GitHub pelo chat, confere tudo na prévia e envia o resultado como pull request.
Google EmbeddingGemma 2
Google DeepMind · Escrita · Imagem · ProgramaçãoGoogle EmbeddingGemma 2 é um modelo aberto de 740 milhões de parâmetros que transforma texto, código, imagens, áudio e quadros de vídeo em vetores de um único espaço de 768 dimensões, rodando em celulares e notebooks.
GitGlow
GitGlow · Programação · ProdutividadeO GitGlow é um cliente Git de desktop que coloca seu código e as mudanças dos seus agentes de IA na mesma revisão, para você saber o que vai sair da máquina antes de publicar.