Extensão do Chrome · para quem constrói com IA

Clique no seu app,
diga à IA o que corrigir.

Fixe notas no seu app rodando — seu agente de IA recebe o componente, o arquivo-fonte e o estilo exatos por trás de cada marcação.

Chrome 116+ · funciona no Edge · $6.43 uma única vez, sem assinatura

Funciona com Claude CodeCursorGitHub Copilot WindsurfCodex — qualquer lugar onde dê para colar.

Como funciona

Do incômodo ao diff em três cliques.

1

Invoque o painel

Pressione Alt+Shift+A (Mac: ⌥⇧A) com o app rodando, ou clique no ícone na barra de ferramentas. No localhost, carrega sozinho.

2

Marque o que te incomoda

Fixe uma Note em qualquer elemento, arraste um Frame ao redor de uma área ou rabisque com o Pen. Escreva a mudança em bom português.

“Deixa esse botão maior e verde, igual ao do header”
3

Copy for AI → colar

Um clique empacota cada marcação com o elemento exato por trás. Cole no chat do seu agente e veja as correções chegando.

As marcações

Quatro jeitos de apontar. Um briefing preciso.

1NOTE clique em qualquer elemento · diga o que mudar

Mostre onde. Diga o que quer.

Escolha Note e clique — um pin numerado pousa no elemento e você digita a mudança. Arraste um Frame ao redor de uma área ou rabisque com o Pen.

Anexe capturas limpas a cada marcação e aponte @referências para outros elementos — “deixa isso igual ao @Heading”.

O painel do Notepix listando duas marcações com instruções em linguagem simples: suavizar um botão de upgrade, igualar os espaços entre os cards de estatísticas
2SOURCE src/demo/components/UpgradeButton.jsx:6:25

Cada marcação conhece o código por trás dela.

Nada de div.css-1q2w3e — e sim <button> in UpgradeButton — src/components/UpgradeButton.jsx:6. React 18/19, Vite, Next.js, CRA. Seu agente abre o arquivo certo em vez de sair caçando no grep.

Cada marcação também guarda um snapshot do estilo computado e das classes do elemento. Página sem React? O fallback é um seletor CSS preciso.

Escrevendo uma nota no editor flutuante com um círculo vermelho à mão livre sobre o gráfico; a legenda diz: cada marcação conhece o componente React e o arquivo por trás dela
3MEASURE font 14px · pad 18 20 · gap ←18 →18

Cite pixels reais, não achismos.

Passe o mouse e aparece uma leitura digna do DevTools: padding, margin e o gap medido até cada vizinho — pixels renderizados de verdade.

Assim uma nota pode dizer “24px entre esses — deixa 8” sem você nem abrir o DevTools.

Ao passar o mouse, um card de estatísticas mostra o rótulo do componente, o anel de padding e os gaps medidos de 18 pixels até os cards vizinhos, com um chip mostrando font 14px, pad 18 20, gap 18
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

Um clique. Um briefing que qualquer agente executa.

O Copy for AI empacota todas as marcações abertas — elemento, arquivo-fonte, estilo, instrução — em um único Ctrl+V. Cinco formatos, incluindo um prompt de handoff para o Claude Code via Claude in Chrome.

As capturas saem carimbadas com o selo #id da marcação — imagem e instrução não se perdem uma da outra.

O loop

Fixe. Seu agente corrige. O card se risca sozinho.

LIVE npx -y notepix-mcp setup · ícone do plugue → verde

Pule a área de transferência: o agente lê as marcações sozinho.

Um comando registra o servidor local do Notepix em todos os agentes de código da sua máquina. O agente puxa cada marcação direto do navegador e vira o card para DONE na sua frente enquanto corrige.

Diga “vá corrigindo cada marcação que eu fixar” e continue clicando pelo app enquanto os diffs chegam. Tudo em 127.0.0.1.

O painel do Notepix com o ícone do plugue verde e a marcação número 1 virada para DONE, com o texto riscado — concluída ao vivo por um agente de IA conectado via MCP

Detalhes

E tem mais.

Atalhos para tudo

Alt+Shift+N fixa uma nota sem abrir o painel. Dentro dele, N F D S trocam de modo.

Capturas limpas, já recortadas

O 📷 recorta só aquele componente — os pins do próprio Notepix saem antes da captura.

Entende de SPA, por página

Cada rota guarda as próprias marcações; o painel acompanha sua navegação client-side.

Exportar / importar

Sai JSON, entra JSON — mescle as marcações de um colega ou leve tudo para outra máquina.

Página limpa por padrão

Os pins só aparecem enquanto você marca. Esconda o painel e seu app continua apresentável.

Imagens que se identificam sozinhas

Cada captura sai carimbada com o #id da marcação — o agente casa imagem e instrução pelo selo, não pela ordem em que você colou.

Marque, corrija, repita

Dê o ✓ numa marcação — ela fica de referência, mas sai da próxima cópia. Apagou sem querer? Tem Undo.

Não atrapalha

O modo Ghost esmaece o painel até você passar o mouse. Arraste para onde quiser, redimensione por qualquer borda.

Ajuda a um ? de distância

O ? reabre o guia de 30 segundos. Troque os atalhos em chrome://extensions/shortcuts.

Privado por design

Seu app nunca sai da sua máquina.

Sem servidor, sem conta

Sem backend. Notas, capturas e caminhos de código-fonte ficam no armazenamento local do Chrome, na sua máquina — e em nenhum outro lugar.

Sem rastreamento

Sem analytics, sem telemetria, sem relatórios de erro. O que você anota é assunto seu.

Uma chamada de rede. Ponto.

Zero requisições até você digitar uma chave de licença — depois, um tipo só: verificar a chave com a Gumroad. Nunca suas páginas ou notas.

Preço

Grátis por 7 dias. Depois, $6.43. Uma vez só.

$6.43 pagamento único · seu para sempre

Em análise na Chrome Web Store — o botão de instalar entra no ar junto com a listagem.

Checkout na Gumroad · chave de licença por e-mail · desbloqueia no painel

  • Teste grátis de 7 dias, completo — sem conta, sem cartão, sem cadastro.
  • Um pagamento desbloqueia para sempre — sem assinatura, sem cobrança por assento.
  • Suas notas nunca ficam reféns — ver, copiar e exportar as marcações existentes continua funcionando depois do teste, pagando ou não.
  • Vai com você — a mesma chave de licença desbloqueia o Notepix na máquina nova.

FAQ

Tira-dúvidas.

Preciso de React para o Notepix funcionar?

Não — o Notepix marca qualquer página. Em um build dev de React (Vite, Next.js, CRA; React 18 e 19), cada marcação também registra o nome do componente e o arquivo:linha de origem por trás do elemento. Em builds de produção e páginas sem React, o fallback é um seletor CSS preciso. A resolução de código-fonte para Vue e Svelte está no roadmap.

Funciona com quais agentes de IA?

Qualquer lugar onde dê para colar: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, uma janela de chat comum. O briefing é texto puro na sua área de transferência — sem conta, sem configuração. Também dá para pular o Ctrl+V, de dois jeitos: com o Claude Code conectado via Claude in Chrome (escolha o formato de handoff e ele lê as marcações direto da página), ou adicionando o servidor MCP opcional do Notepix — um comando, npx -y notepix-mcp setup, o registra em todos os agentes de código da sua máquina — para o agente puxar sozinho as marcações e capturas e ir dando baixa em cada uma conforme corrige.

Como mostro para o agente de IA qual elemento mudar?

É só clicar. O Notepix fixa uma nota numerada no elemento e registra o componente React, o arquivo e a linha de origem, o estilo computado e uma captura limpa por trás dele. O Copy for AI transforma tudo isso em um único briefing — cole no Claude Code, no Cursor ou no Copilot — ou deixe o agente ler as marcações sozinho via MCP.

O Notepix é uma ferramenta de anotações de UI ou de feedback visual?

As duas coisas — feito para o loop de código com IA. Use como uma ferramenta de design review ou de bug report — post-its, frames e rabiscos em qualquer página web, localhost incluído — com uma diferença: cada anotação vem com o contexto de código (componente, arquivo, seletor, estilo) que um agente de IA precisa para de fato entregar a correção.

Funciona em previews do Lovable, Replit, v0 ou Bolt?

Sim — clique no ícone do Notepix na barra de ferramentas em qualquer página http(s), previews na nuvem incluídos, e marque à vontade. Em servidores dev no localhost, o Notepix carrega sozinho a cada reload; ativar isso com um clique para domínios de preview é a próxima atualização prevista.

Onde ficam minhas notas?

No armazenamento local de extensões do Chrome, por página e por rota de SPA. Em servidores dev no localhost, o Notepix carrega sozinho, então as notas continuam lá depois de cada reload. Você pode exportar as marcações de qualquer página como um arquivo JSON e importá-las onde quiser.

O que o Notepix envia pela rede?

Nada sai do seu computador — até você digitar uma chave de licença. Daí em diante existe exatamente um tipo de requisição: verificar sua chave na API de licenças da Gumroad, na ativação e no máximo uma vez por semana. Ela leva só a chave e o id do produto — nunca conteúdo de página, notas ou capturas. Se você ativar a conexão MCP opcional, ela conversa só com 127.0.0.1 — a sua própria máquina — e com mais ninguém. A política completa está na página de privacidade.

O que acontece quando o teste acaba?

Criar marcações novas passa a pedir o desbloqueio único de $6.43. Tudo o que você já criou continua aí para sempre: dá para ver, copiar, exportar e apagar — suas notas são suas.

O atalho de teclado não funciona?

Alt+Shift pode brigar com a troca de layout do teclado, principalmente no Windows. Abra chrome://extensions/shortcuts e troque “Toggle the Notepix panel” para o atalho que quiser — o ícone na barra e o menu do botão direito sempre funcionam.

Só no Chrome?

Chrome 116+ e Edge baseado em Chromium (testado). A listagem no Edge Add-ons e o suporte a outros navegadores estão no roadmap.