Extensión de Chrome · para quienes construyen con IA
Fija notas sobre tu app en marcha — tu agente de IA recibe el componente, el archivo fuente y el estilo exactos que hay detrás de cada marca.
Chrome 116+ · funciona en Edge · pago único de $6.43, sin suscripción
Cómo funciona
Pulsa Alt+Shift+A (Mac: ⌥⇧A) con tu app abierta, o haz clic en el icono de la barra. En localhost se carga solo.
Fija una Note sobre cualquier elemento, arrastra un Frame sobre una zona o dibuja con el Pen. Escribe el cambio con tus palabras.
Un clic reúne todas las marcas, cada una con el elemento exacto que hay detrás. Pégalo en el chat de tu agente y mira cómo van cayendo los arreglos.
Las marcas
Elige Note y haz clic — un pin numerado se planta en el elemento y escribes el cambio. Arrastra un Frame sobre una zona o garabatea con el Pen.
Adjunta capturas limpias a cada marca y añade @referencias a otros elementos — “haz que esto quede como @Heading”.
No div.css-1q2w3e — sino <button> in UpgradeButton — src/components/UpgradeButton.jsx:6. React 18/19, Vite, Next.js, CRA. Tu agente abre el archivo correcto en vez de buscarlo con grep.
Cada marca también guarda el estilo calculado y la lista de clases del elemento. ¿Página sin React? Recurre a un selector CSS preciso.
Al pasar el cursor aparece una medición digna de DevTools: padding, margen y el hueco medido hasta cada vecino — píxeles reales, ya renderizados.
Así una nota puede decir “24px entre estos — déjalo en 8” sin tocar DevTools.
Copy for AI reúne todas las marcas abiertas — elemento, fuente, estilo, instrucción — en un solo texto listo para pegar. Cinco formatos, incluido un prompt de traspaso a Claude Code vía Claude in Chrome.
Las capturas salen selladas con la insignia #id de su marca — la imagen y su instrucción no se separan jamás.
# 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
El bucle
Un solo comando registra el servidor local de Notepix en todos los agentes de código de tu máquina. Tu agente saca cada marca directamente del navegador y pasa su tarjeta a DONE delante de ti mientras la corrige.
Di “corrige cada marca en cuanto la fije” y sigue haciendo clic por tu app mientras van cayendo los diffs. Todo en 127.0.0.1.
Detalles
Alt+Shift+N fija una nota sin abrir el panel. Dentro, N F D S cambian de modo.
La 📷 recorta justo ese componente — y antes quita los pines del propio Notepix.
Cada ruta conserva sus marcas; el panel sigue tu navegación client-side.
Exporta a JSON, importa desde JSON — fusiona las marcas de un compañero o múdate de máquina.
Los pines solo se dibujan mientras marcas. Oculta el panel y tu app queda presentable.
Cada captura va sellada con el #id de su marca — los agentes casan imagen e instrucción por su insignia, no por el orden de pegado.
Da una marca por ✓ hecha — se queda como referencia, pero ya no entra en la siguiente copia. Y cada borrado tiene su Undo.
El modo Ghost atenúa el panel hasta que le pasas el cursor por encima. Arrástralo adonde quieras, redimensiona desde cualquier borde.
El ? reabre la guía de 30 segundos. Reasigna atajos en chrome://extensions/shortcuts.
Privacidad por diseño
Sin backend. Notas, capturas y rutas de archivos viven en el almacenamiento local de Chrome, en tu máquina — y en ningún sitio más.
Sin analítica, sin telemetría, sin informes de errores. Lo que anotas es asunto tuyo.
Cero peticiones hasta que introduces tu clave de licencia — y a partir de ahí, un único tipo: verificarla con Gumroad. Nunca tus páginas ni tus notas.
Precio
En revisión en la Chrome Web Store — el botón de instalación se activará en cuanto se publique el listado.
Pago en Gumroad · clave de licencia por email · se desbloquea en el panel
FAQ
No — Notepix marca cualquier página. En un build dev de React (Vite, Next.js, CRA; React 18 y 19) cada marca guarda además el nombre del componente y el archivo:línea del código que hay detrás del elemento. En builds de producción y páginas sin React recurre a un selector CSS preciso. Resolver el código fuente en Vue y Svelte está en el roadmap.
Con cualquiera donde puedas pegar: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, una ventana de chat cualquiera. El brief es texto plano en tu portapapeles — sin cuenta ni configuración. También puedes saltarte el pegado por completo, de dos formas: con Claude Code conectado mediante Claude in Chrome (elige el formato de traspaso y leerá las marcas directamente de la página), o añadiendo el servidor MCP opcional de Notepix — un solo comando, npx -y notepix-mcp setup, lo registra en todos los agentes de código de tu máquina — para que tu agente lea por su cuenta las marcas y capturas y las vaya tachando según las corrige.
Con un clic. Notepix fija una nota numerada en el elemento y guarda su componente React, su archivo fuente y línea, el estilo calculado y una captura limpia. Copy for AI lo convierte todo en un único brief — pégalo en Claude Code, Cursor o Copilot — o deja que el agente lea las marcas por su cuenta vía MCP.
Las dos cosas, pensada para el bucle de programación con IA. Úsala como una herramienta de revisión de diseño o de reporte de bugs — notas adhesivas, marcos y trazos sobre cualquier página web, localhost incluido — con una diferencia: cada anotación lleva el contexto de código (componente, archivo, selector, estilo) que un agente de IA necesita para entregar el arreglo de verdad.
Sí — haz clic en el icono de Notepix de la barra de herramientas en cualquier página http(s), previews en la nube incluidas, y empieza a marcar. En servidores dev en localhost, Notepix se carga solo después de cada recarga; la siguiente actualización prevista: carga automática con un clic para dominios de preview.
En el almacenamiento local de extensiones de Chrome, organizadas por página y por ruta de la SPA. En servidores dev en localhost, Notepix se carga solo, así que las notas siguen ahí después de cada recarga. Puedes exportar las marcas de cualquier página como un archivo JSON e importarlas donde quieras.
Nada sale de tu equipo — hasta que introduces una clave de licencia. A partir de ahí hay exactamente un tipo de petición a internet: verificar tu clave contra la API de licencias de Gumroad al activarla y, como mucho, una vez por semana. Lleva la clave y el id del producto — nunca el contenido de tus páginas, notas ni capturas. Si activas la conexión MCP opcional, esa va a 127.0.0.1 — tu propia máquina — y a ningún otro sitio. La política completa está en la página de privacidad.
Crear marcas nuevas requiere el pago único de $6.43. Todo lo que ya hiciste se puede seguir viendo, copiando, exportando y borrando para siempre — tus notas son tus datos.
Alt+Shift puede chocar con el cambio de distribución del teclado, sobre todo en Windows. Abre chrome://extensions/shortcuts y reasigna “Toggle the Notepix panel” al atajo que prefieras — el icono de la barra y el menú contextual funcionan siempre.
Chrome 116+ y Edge basado en Chromium (probado). El listado en Edge Add-ons y más navegadores están en el roadmap.