Extensión de Chrome · para builders con IA
Fija notas sobre tu app en ejecución — tu agente de código IA recibe el componente, el archivo fuente y el estilo exactos detrás de cada marca.
Chrome 116+ · funciona en Edge · $6.43 una vez, sin suscripción
Cómo funciona
Pulsa Alt+Shift+A (Mac: ⌥⇧A) en tu app en ejecución, o haz clic en el icono de la barra. Se carga solo en localhost.
Fija una Note en cualquier elemento, arrastra un Frame alrededor de un área o dibuja con el Pen. Escribe el cambio con tus palabras.
Un clic empaqueta cada marca con el elemento exacto que hay detrás. Pégalo en el chat de tu agente y mira aterrizar los arreglos.
Las marcas
Elige Note y haz clic — un pin numerado cae sobre el elemento y escribes el cambio. Arrastra un Frame alrededor de un área o garabatea con el Pen.
Adjunta capturas limpias por marca y suelta @referencias a otros elementos — “que esto coincida con @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 captura el estilo computado y la lista de clases del elemento. ¿Página sin React? Recurre a un selector CSS preciso.
Al pasar el cursor aparece una lectura de nivel DevTools: padding, margen y el hueco medido hasta cada vecino — píxeles reales renderizados.
Así una nota puede decir “24px entre estos — déjalo en 8” sin abrir DevTools jamás.
Copy for AI empaqueta cada marca abierta — elemento, fuente, estilo, instrucción — en un solo pegado. Cinco formatos, incluido un prompt de traspaso para Claude Code vía Claude in Chrome.
Las capturas salen selladas con la insignia #id de su marca — imágenes e instrucciones no pueden separarse.
# 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 comando registra el servidor local de Notepix en cada agente de código de tu máquina. Tu agente extrae cada marca directamente del navegador y pone su tarjeta en DONE ante tus ojos mientras la corrige.
Di “corrige cada marca según la fijo” y sigue haciendo clic por tu app mientras aterrizan 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 solo ese componente — los pines del propio Notepix se eliminan antes.
Cada ruta conserva sus marcas; el panel sigue tu navegación client-side.
JSON fuera, JSON dentro — fusiona las marcas de un compañero o cambia 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 emparejan imagen e instrucción por insignia, no por orden de pegado.
Marca una nota como ✓ hecha — se queda como referencia pero sale de la próxima copia. Cada borrado ofrece Undo.
El modo Ghost atenúa el panel hasta que pasas el cursor. Arrástralo a donde sea, redimensiona desde cualquier borde.
El ? reabre la guía de 30 segundos. Reasigna atajos en chrome://extensions/shortcuts.
Privado por diseño
Sin backend. Notas, capturas y rutas fuente viven en el almacenamiento local de Chrome en tu máquina — en ningún otro sitio.
Sin analítica, sin telemetría, sin informes de errores. Lo que anotas es asunto tuyo.
Cero peticiones hasta que introduces una clave de licencia — luego solo una clase: verificarla con Gumroad. Nunca tus páginas ni tus notas.
Precio
En revisión en la Chrome Web Store — el botón de instalar se activará con 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 registra además el nombre del componente y el archivo:línea fuente detrás del elemento. En builds de producción y páginas sin React recurre a un selector CSS preciso. La resolución de fuentes para Vue y Svelte está en el roadmap.
Con cualquiera donde puedas pegar: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, una ventana de chat normal. El brief es texto plano en tu portapapeles — sin cuenta ni configuración. También puedes saltarte el pegado por completo, de dos maneras: con Claude Code conectado mediante Claude in Chrome (eliges el formato de traspaso y lee las marcas de la página), o añadiendo el servidor MCP opcional de Notepix — un comando, npx -y notepix-mcp setup, lo registra en cada agente de código de tu máquina — para que tu agente extraiga él mismo las marcas y capturas y las vaya tachando a medida que las corrige.
Sí — haz clic en el icono de Notepix en la barra de herramientas en cualquier página http(s), previews en la nube incluidas, y márcala. En servidores dev en localhost Notepix se carga solo tras cada recarga; la carga automática con un clic para dominios de preview es la próxima actualización prevista.
En el almacenamiento local de extensiones de Chrome, por página y por ruta de SPA. En servidores dev en localhost Notepix se carga solo, así que las notas siguen ahí tras cada recarga. Puedes exportar las marcas de cualquier página como archivo JSON e importarlas donde quieras.
Nada sale de tu ordenador — hasta que introduces una clave de licencia. Desde entonces 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 contenido de 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 pide el desbloqueo único de $6.43. Todo lo que ya hiciste sigue siendo visible, copiable, exportable y borrable para siempre — tus notas son tus datos.
Alt+Shift puede chocar con el cambio de distribución de teclado, sobre todo en Windows. Abre chrome://extensions/shortcuts y reasigna “Toggle the Notepix panel” a lo que quieras — el icono de la barra y el menú contextual funcionan siempre.
Chrome 116+ y Edge basado en Chromium (probado). Un listado en Edge Add-ons y otros navegadores están en el roadmap.