Extensão do Chrome · para quem constrói com IA
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
Como funciona
Pressione Alt+Shift+A (Mac: ⌥⇧A) com o app rodando, ou clique no ícone na barra de ferramentas. No localhost, carrega sozinho.
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.
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
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”.
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.
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.
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.
# UI annotations Page: http://localhost:3000/demo.html ## #1 — note - jsx: `<button> in UpgradeButton` @ src/components/UpgradeButton.jsx:6 - style: 14px 800 · #fff on #f7a11b→#ef6820 · pad 11 22 - instruction: Tone it down — ghost style ## #2 — frame - jsx: `<div> in StatCard` @ src/components/StatCard.jsx:15 - area: x=64 y=170 w=1152 h=124 - instruction: Equal gaps between these cards
O loop
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.
Detalhes
Alt+Shift+N fixa uma nota sem abrir o painel. Dentro dele, N F D S trocam de modo.
O 📷 recorta só aquele componente — os pins do próprio Notepix saem antes da captura.
Cada rota guarda as próprias marcações; o painel acompanha sua navegação client-side.
Sai JSON, entra JSON — mescle as marcações de um colega ou leve tudo para outra máquina.
Os pins só aparecem enquanto você marca. Esconda o painel e seu app continua apresentável.
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.
Dê o ✓ numa marcação — ela fica de referência, mas sai da próxima cópia. Apagou sem querer? Tem Undo.
O modo Ghost esmaece o painel até você passar o mouse. Arraste para onde quiser, redimensione por qualquer borda.
O ? reabre o guia de 30 segundos. Troque os atalhos em chrome://extensions/shortcuts.
Privado por design
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 analytics, sem telemetria, sem relatórios de erro. O que você anota é assunto seu.
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
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
FAQ
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.
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.
É 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.
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.
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.
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.
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.
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.
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.
Chrome 116+ e Edge baseado em Chromium (testado). A listagem no Edge Add-ons e o suporte a outros navegadores estão no roadmap.