Domscribe
Domscribe · Programação
O Domscribe é uma ferramenta de depuração frontend de código aberto que dá olhos aos agentes de codificação com IA sobre o seu frontend em execução. Pense nele como uma ferramenta de desenvolvimento de código aberto feita para uma única tarefa: fechar a distância entre o que o seu código diz e o que o navegador de fato renderiza. Ele conecta o navegador ao código-fonte nas duas direções: você clica em um elemento do DOM e descreve uma mudança, ou o seu agente consulta um arquivo-fonte para ver o instantâneo do DOM ao vivo, as props do componente e o estado. Por dentro, ele roda sobre um mapeamento de DOM para código-fonte construído em tempo de compilação, então cada elemento aponta de volta para o arquivo e a linha exatos. Funciona com qualquer agente compatível com MCP e qualquer bundler, sai sob licença MIT e remove toda a instrumentação das builds de produção. Sem planos pagos. Sem limite de assentos.
Sobre Domscribe
O que é o Domscribe
O Domscribe é uma ponte de pixel para código para o trabalho frontend assistido por IA. Os agentes de codificação conseguem ler os seus arquivos-fonte, mas não veem o que de fato é renderizado no navegador, e é por isso que chutam o layout, o estilo e a estrutura dos componentes. O Domscribe fecha essa lacuna ao construir uma ligação bidirecional entre o DOM e a sua árvore de código-fonte.
A ferramenta injeta atributos determinísticos data-ds em tempo de compilação por meio de análise de AST. Ela registra cada mapeamento em um manifesto. Em tempo de execução, captura props, estado e instantâneos do DOM ao vivo. Depois, o seu agente faz uma pergunta simples: o que é renderizado nesta linha? Recebe uma resposta real em vez de uma captura de tela que precisa interpretar.
O maior limite é o escopo. O Domscribe cobre hoje React, Vue, Next.js e Nuxt, com adaptadores personalizados para outras configurações, então detalhes internos específicos de frameworks não suportados não são mapeados com precisão. Ele também parte do princípio de que o seu agente fala MCP, o que deixa de fora ferramentas que só aceitam prompts em texto puro.
Como começar
- Instale o pacote e rode
npx domscribe initna raiz do seu projeto. - Adicione o plugin do bundler para a sua ferramenta de build (Vite 5-7, Webpack 5 ou Turbopack) para que os arquivos-fonte recebam IDs
data-dsestáveis. - Aponte o seu agente compatível com MCP, como Claude Code, GitHub Copilot, Cursor ou Gemini, para o endpoint MCP do Domscribe.
- Suba o seu servidor de desenvolvimento, abra o app e clique em qualquer elemento para registrar um pedido de mudança em linguagem natural.
- Deixe o agente consultar a localização no código-fonte, fazer a edição e confirmar o resultado contra o DOM ao vivo.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Domscribe.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores frontend
- Engenheiros full-stack que trabalham com agentes de IA
- Equipes que já usam Claude Code ou Cursor
Tarefas
- Corrigir bugs de layout e estilo
- Ajustar props e estilos de um componente
- Revisar o que uma linha do código-fonte renderiza
Cenários
- Iteração rápida de interface durante o desenvolvimento de um recurso
- Depurar render guiado por estado
- Entrar em um código que você não conhece
Principais recursos
IDs estáveis em tempo de compilação
O Domscribe analisa cada arquivo-fonte durante a build e injeta atributos determinísticos data-ds com xxhash64, depois registra cada mapeamento em um manifesto. Esses IDs permanecem estáveis entre o hot module replacement e o fast refresh, o que significa que sobrevivem ao ciclo de editar, salvar e recarregar que define quase todo o trabalho frontend. Não quebram no momento em que você edita um arquivo. Sem heurísticas em tempo de execução. Sem adivinhar qual elemento é qual.
Ligação bidirecional entre DOM e código-fonte
A ferramenta funciona nas duas direções. Clique em um elemento do DOM e descreva a mudança que você quer, e o Domscribe a resolve para a localização exata do código que o seu agente deve editar. Ou peça ao agente para consultar um arquivo e uma linha do código-fonte para ver o que é renderizado ali agora. A direção que você usa depende da tarefa. Nenhum dos dois lados fica adivinhando sobre o outro.
Captura profunda em tempo de execução
Além do HTML puro, o Domscribe extrai props, estado e metadados de componentes ao vivo por meio da caminhada pelo fiber do React e da inspeção do VNode do Vue. O seu agente recebe todo o contexto do componente por trás de um elemento renderizado, não só a marcação. Isso importa. Significa que o agente consegue raciocinar por que algo se parece com o que se parece.
Suporte a MCP com uma camada REST
As anotações ficam como arquivos JSON em uma pasta .domscribe/annotations/ dentro do seu repositório, expostas por APIs REST que o servidor MCP encapsula para o acesso do agente. O Domscribe entrega 12 ferramentas e 4 prompts via MCP, e funciona com Claude Code, GitHub Copilot, Cursor, Gemini, Kiro e qualquer outro cliente MCP. Tudo fica local, sem dependências externas.
Redação de dados pessoais
E-mails, tokens e padrões sensíveis são limpos automaticamente antes que qualquer dado saia do navegador. É uma proteção real. Para equipes que trabalham em apps que lidam com dados reais de usuários, é a diferença entre uma ferramenta que você pode rodar contra um ambiente de staging e uma que não pode.
Zero impacto em produção
Cada atributo data-ds, script de sobreposição e conexão de retransmissão é removido das builds de produção, e a CI garante isso. O seu bundle publicado permanece limpo, então você não troca tamanho de bundle nem expõe a instrumentação aos usuários finais.
Prós e contras
Prós
- Gratuito e de código aberto sob licença MIT, sem planos pagos nem limite de assentos.
- Mapeia elementos do DOM para localizações exatas do código-fonte, então os agentes param de editar o arquivo errado.
- Captura props e estado ao vivo, dando aos agentes um contexto que capturas de tela não conseguem oferecer.
- Agnóstico de framework dentro da sua lista suportada e compatível com qualquer agente baseado em MCP.
- A redação de dados pessoais e a limpeza em produção mantêm os dados sensíveis e o tamanho do bundle sob controle.
Contras
- Exige um framework suportado (React, Vue, Next.js, Nuxt) ou um adaptador personalizado; stacks não suportados não são mapeados com precisão.
- Só é útil com agentes compatíveis com MCP, então ferramentas de prompt em texto puro não podem usá-la.
- A configuração mexe no seu config do bundler e no servidor de desenvolvimento, o que adiciona um passo antes de ela fazer qualquer coisa.
Perguntas frequentes
Ele constrói uma ponte entre o seu frontend em execução e o seu agente de codificação com IA. O agente pode responder a um clique em um elemento do DOM ou consultar uma linha do código para ver o DOM, as props e o estado ao vivo, e então fazer uma edição com todo o contexto.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Domscribe.
Alternativas a Domscribe
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.