Extensión de Chrome · para builders con IA

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

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

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

Cómo funciona

Tres clics del picor al diff.

1

Invoca el panel

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.

2

Marca lo que te molesta

Fija una Note en cualquier elemento, arrastra un Frame alrededor de un área 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 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

Cuatro formas de señalar. Un brief preciso.

1NOTE clic en cualquier elemento · di el cambio

Señala la cosa. Di lo que quieres.

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

El panel de Notepix listando dos marcas con instrucciones en palabras llanas: suavizar un botón de upgrade, 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 captura el estilo computado 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 detrás
3MEASURE font 14px · pad 18 20 · gap ←18 →18

Cita píxeles reales, no sensaciones.

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.

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 que cualquier agente puede ejecutar.

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.

El bucle

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

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

Sáltate el portapapeles: el agente lee las marcas él mismo.

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.

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 por MCP

Detalles

También en la caja.

Teclado primero

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

Recortes de captura limpios

La 📷 recorta solo ese componente — los pines del propio Notepix se eliminan antes.

Consciente de SPA, por página

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

Exportar / importar

JSON fuera, JSON dentro — fusiona las marcas de un compañero o cambia 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 atan solas

Cada captura va sellada con el #id de su marca — los agentes emparejan imagen e instrucción por insignia, no por orden de pegado.

Un bucle, no un disparo único

Marca una nota como ✓ hecha — se queda como referencia pero sale de la próxima copia. Cada borrado ofrece Undo.

No se interpone

El modo Ghost atenúa el panel hasta que pasas el cursor. Arrástralo a donde sea, redimensiona desde cualquier borde.

La ayuda está a un ? de distancia

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

Privado por diseño

Tu app nunca sale de tu máquina.

Sin servidor, sin cuenta

Sin backend. Notas, capturas y rutas fuente viven en el almacenamiento local de Chrome en tu máquina — en ningún otro sitio.

Sin rastreo

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

Una llamada de red, en total

Cero peticiones hasta que introduces una clave de licencia — luego solo una clase: verificarla con Gumroad. Nunca tus páginas ni tus notas.

Precio

Gratis 7 días. Luego $6.43. Una vez.

$6.43 pago único · tuyo para siempre

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

  • Prueba de 7 días, completa — sin cuenta, sin tarjeta, sin registrarte.
  • Un pago desbloquea para siempre — sin suscripción, sin contar asientos.
  • Tus notas nunca se bloquean — ver, copiar y exportar marcas existentes sigue funcionando tras la prueba, pagues o no.
  • Se muda contigo — la misma clave de licencia desbloquea Notepix en una máquina nueva.

FAQ

Preguntas, respondidas.

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

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.

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

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.

¿Dónde viven mis notas?

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.

¿Qué envía Notepix por la red?

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.

¿Qué pasa cuando termina la prueba?

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.

¿El atajo de teclado no hace nada?

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.

¿Solo Chrome?

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