Extensión de Chrome · para quienes construyen con IA

Haz clic en tu app,
dile a la IA qué arreglar.

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

Funciona con Claude CodeCursorGitHub Copilot WindsurfCodex — y cualquier otro sitio donde puedas pegar.

Cómo funciona

De “esto se ve mal” al diff: tres clics.

1

Invoca el panel

Pulsa Alt+Shift+A (Mac: ⌥⇧A) con tu app abierta, o haz clic en el icono de la barra. En localhost se carga solo.

2

Marca lo que te molesta

Fija una Note sobre cualquier elemento, arrastra un Frame sobre una zona o dibuja con el Pen. Escribe el cambio con tus palabras.

“Haz este botón más grande y verde, como el del header”
3

Copy for AI → pegar

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

Cuatro formas de señalar. Un brief preciso.

1NOTE clic en cualquier elemento · di qué cambiar

Señala lo que ves. Pide lo que quieres.

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”.

El panel de Notepix con dos marcas y sus instrucciones en lenguaje llano: suavizar un botón de upgrade e igualar los huecos entre tarjetas de estadísticas
2SOURCE src/demo/components/UpgradeButton.jsx:6:25

Cada marca conoce el código que hay detrás.

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.

Escribiendo una nota en el editor flotante con un círculo rojo a mano alzada sobre el gráfico; la leyenda dice: cada marca conoce el componente React y el archivo que hay detrás
3MEASURE font 14px · pad 18 20 · gap ←18 →18

Píxeles reales, nada de “a ojo”.

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.

Al pasar el cursor por una tarjeta se ven la etiqueta del componente, el anillo de padding y los huecos medidos de 18 píxeles hasta las tarjetas vecinas, con un chip que dice font 14px, pad 18 20, gap 18
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

Un clic. Un brief listo para cualquier agente.

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.

El bucle

Fija. Tu agente corrige. La tarjeta se tacha sola.

LIVE npx -y notepix-mcp setup · icono del enchufe → verde

Sáltate el portapapeles: el agente lee las marcas por su cuenta.

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.

El panel de Notepix con un icono de enchufe verde y la marca número uno pasada a DONE con su texto tachado — completada en vivo por un agente de IA conectado vía MCP

Detalles

Todo esto, de serie.

Pensado para el teclado

Alt+Shift+N fija una nota sin abrir el panel. Dentro, N F D S cambian de modo.

Capturas recortadas y limpias

La 📷 recorta justo ese componente — y antes quita los pines del propio Notepix.

Entiende las SPA

Cada ruta conserva sus marcas; el panel sigue tu navegación client-side.

Exportar / importar

Exporta a JSON, importa desde JSON — fusiona las marcas de un compañero o múdate de máquina.

Página limpia por defecto

Los pines solo se dibujan mientras marcas. Oculta el panel y tu app queda presentable.

Imágenes que se emparejan solas

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.

Hecho para iterar

Da una marca por ✓ hecha — se queda como referencia, pero ya no entra en la siguiente copia. Y cada borrado tiene su Undo.

No estorba

El modo Ghost atenúa el panel hasta que le pasas el cursor por encima. Arrástralo adonde quieras, redimensiona desde cualquier borde.

¿Dudas? Pulsa la ?

El ? reabre la guía de 30 segundos. Reasigna atajos en chrome://extensions/shortcuts.

Privacidad por diseño

Tu app nunca sale de tu máquina.

Sin servidor, sin cuenta

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 rastreo

Sin analítica, sin telemetría, sin informes de errores. Lo que anotas es asunto tuyo.

Una llamada de red, nada más

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

7 días gratis. Después, $6.43. Una sola vez.

$6.43 pago único · tuyo para siempre

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

  • Prueba gratis de 7 días, con todas las funciones — sin cuenta, sin tarjeta, sin darte de alta en nada.
  • Un solo pago lo desbloquea para siempre — sin suscripción y sin andar contando licencias.
  • Tus notas nunca se bloquean — ver, copiar y exportar las marcas existentes sigue funcionando después de la prueba, pagues o no.
  • Se muda contigo — la misma clave de licencia desbloquea Notepix en otra máquina.

FAQ

Dudas, resueltas.

¿Necesito React para que funcione?

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 qué agentes de IA funciona?

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.

¿Cómo le indico a mi agente de IA qué elemento cambiar?

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.

¿Es Notepix una herramienta de anotaciones UI o de feedback visual?

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.

¿Funciona en previews de Lovable, Replit, v0 o Bolt?

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.

¿Dónde viven mis notas?

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.

¿Qué envía Notepix por la red?

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.

¿Qué pasa cuando termina la prueba?

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.

¿El atajo de teclado no hace nada?

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.

¿Solo en Chrome?

Chrome 116+ y Edge basado en Chromium (probado). El listado en Edge Add-ons y más navegadores están en el roadmap.