AInotate

AInotate

Capturas de pantalla anotadas para agentes de IA: el agente te muestra el botón en lugar de describir dónde está.

Pregúntale a un agente cómo publicar un enlace en Hacker News y normalmente obtienes instrucciones: la barra naranja en la parte superior, el último enlace después de jobs. Con AInotate envía la imagen de arriba y dice "haz clic en submit, donde apunta la flecha azul".

Captura una página web, una ventana o una captura de pantalla que ya tengas, encuentra los elementos que quieres decir, dibuja pasos numerados, flechas, recuadros y etiquetas donde menos oculten, tapa correos electrónicos y tokens, y revisa el resultado antes de enviarlo. Funciona en Claude Code, Cowork, Claude Desktop, Codex, Gemini CLI, Cursor y cualquier otro cliente MCP, y desde la línea de comandos o Python.

Lo construimos en DontPayFull porque nuestros propios agentes seguían respondiendo "¿dónde está?" con un párrafo. Una imagen con un número en el botón correcto resuelve la pregunta en un segundo, en un chat, un ticket o una guía.

Para qué sirve

• "¿Dónde está?" Ajustes, menús, botones que se esconden detrás de iconos. El agente responde con la propia pantalla, el control enmarcado y numerado.
• "Guíame paso a paso." Una imagen por paso, en el orden a seguir; ainotate guide las convierte en una guía Markdown, HTML o PDF.
• "Te toca a ti." Un interruptor de permisos, un código 2FA, una pantalla de pago o consentimiento: el agente no hace clic por ti. Muestra exactamente qué pulsar y dice qué hace el clic.
• Informes de errores y tickets. Lo que está mal, delineado en rojo, lo que está bien en verde, correos y tokens tachados antes de que nadie los vea.
• Documentación y registros de cambios. Capturas que señalan aquello de lo que habla el texto, recapturadas desde la misma especificación cuando la interfaz cambia; placas de antes y después para un cambio.

Configúralo en tu agente

1. Instala, una de estas opciones:

Con	Comando
Homebrew (macOS)	brew install dontpayfull/tap/ainotate
pipx o uv (Python 3.10+)	pipx install "ainotate[all]" o uv tool install "ainotate[all]"
Plugin de Claude o extensión de Desktop	nada que instalar primero: el paso 2 trae AInotate consigo

Luego ainotate doctor verifica la máquina e imprime la solución exacta para cualquier cosa que falte, incluido el comando que descarga Chromium para la captura web. Para actualizar más tarde: brew upgrade ainotate, pipx upgrade ainotate or uv tool upgrade ainotate; the plugin with /actualización del marketplace de plugins ainotate; la extensión de Desktop abriendo la versión más reciente .mcpb desde Releases.

2. Conéctalo al agente que uses:

Agente	Cómo
Claude Code	/plugin marketplace add dontpayfull/AInotate, luego /plugin install ainotate@ainotate: skill y servidor MCP en un solo paso
Cowork	Personalizar > Plugins > Añadir marketplace > dontpayfull/AInotate, luego instalar AInotate
Claude Desktop	descarga ainotate-<version>.mcpb desde Releases y ábrelo: una extensión de un clic
Codex	codex plugin marketplace add dontpayfull/AInotate, luego codex plugin add ainotate@ainotate: skill y servidor MCP
Gemini CLI	gemini extensions install https://github.com/dontpayfull/AInotate: skill y servidor MCP
Cursor	(necesita uv), más el skill de abajo
VS Code, Cline, otros clientes MCP	comando ainotate, argumentos mcp (stdio); también listado en el Registro MCP como io.github.dontpayfull/ainotate; los agentes pueden seguir llms-install.md

{"mcpServers": {"ainotate": {"command": "ainotate", "args": ["mcp"]}}}

AInotate se ejecuta en tu propio ordenador: Cowork lo alcanza a través de la aplicación de escritorio de Claude, así que mantén la aplicación abierta mientras una tarea lo usa. El plugin inicia el ainotate instalado, o lo ejecuta con uvx cuando no está instalado.

El skill enseña a un agente cuándo y cómo anotar: elegir una fuente, encontrar posiciones exactas, anotar, leer la imagen para verificar, entregar. El plugin lo trae consigo; sin el plugin se incluye con el paquete:

ainotate install-skill             # Claude Code and Codex (~/.claude/skills, ~/.agents/skills)
ainotate install-skill --zip ~/Desktop   # a ZIP for Claude Desktop, Cowork, claude.ai:
                                         # Customize > Skills > Upload a skill
npx skills add dontpayfull/AInotate      # any agent the skills CLI knows (Cursor, Windsurf, ...)

Rutas de configuración para cada sistema operativo, permisos y la lista de herramientas: skills/ainotate/references/mcp.md.

3. Pregunta. "Muéstrame dónde cambiar Wikipedia al modo oscuro." El agente captura la página, la anota, la verifica y envía la imagen. Con el skill también lo hace por su cuenta siempre que una respuesta dependa de dónde está algo en la pantalla: una pregunta de "cómo hago", un error visual, un antes/después de un cambio.

Galería

Cada imagen de abajo se hizo en una sola llamada shoot contra un sitio público: abrir la página, encontrar los elementos, colocar las etiquetas, dibujar, enmarcar. Las especificaciones están en docs/images/specs.

Pasos numerados en el concurrido encabezado de DontPayFull, cupones para más de 20 000 tiendas	Recuadro, flecha y resaltado en GitHub
Guía paso a paso con el marco del navegador y un marco degradado	Informe de error, correos redactados automáticamente por el escaneo de privacidad
Lupa y teclas para controles pequeños y atajos	Placa de antes / después a partir de dos tomas

Cuatro estilos de flecha: skitch (predeterminado: recta cuando el camino está despejado, una curva suave cuando es larga y diagonal, una curva alrededor del texto), curva, recta, línea

Ajuste preestablecido de teléfono: viewport móvil, táctil y agente de usuario

Etiquetas que se mantienen fuera del contenido

Una etiqueta colocada en un punto fijo junto a su objetivo normalmente aterriza sobre el texto que el lector necesita. AInotate coloca cada etiqueta por sí mismo:

• Primero mapea el contenido de la página (texto, iconos, líneas, imágenes) y prueba cientos de puntos por etiqueta. El espacio vacío cerca del objetivo gana; un punto sobre texto se usa solo cuando el marco no tiene espacio libre.
• Las flechas también se evalúan: una flecha larga, o una que cruza texto, otra etiqueta u otra marca, pierde frente a una más corta y limpia. Cuando el camino recto cruza texto, la flecha se curva a su alrededor.
• Todas las etiquetas se planifican juntas, para que la primera no pueda ocupar el único punto limpio que una posterior necesita.
• Las insignias de paso se colocan en la esquina de su recuadro que menos cubre.

La imagen nunca se amplía para hacer espacio. Si una etiqueta aún tiene que cubrir algo, AInotate lo dice en una advertencia, y label_at fija una etiqueta exactamente donde quieras.

Desde la línea de comandos

Guarda esto como hn.json:

{"url": "https://news.ycombinator.com",
 "frame": {"chrome": "browser"},
 "marks": [
  {"type": "step", "n": 1, "target": {"text": "new", "exact": true},
   "label": "Newest"},
  {"type": "step", "n": 2, "target": {"text": "login"},
   "label": "Sign in"}]}

ainotate shoot hn.json --draft    # temp file; drop --draft to save

La ruta de salida se imprime en stdout. Las imágenes se guardan en ~/Pictures/AInotate a menos que configures otra carpeta. ainotate --help lista cada comando (capturar, anotar, localizar por OCR, cuadrícula, zoom, captura de ventana con objetivos de elementos de interfaz, elementos, guía, comparar, animar, copiar, instalar-skill); la especificación completa está en skills/ainotate/references/spec.md. Códigos de salida: 0 correcto, 1 no se puede guardar, 2 especificación no válida, 3 no se puede dibujar, 4 falló la captura o falta una dependencia opcional, 5 objetivo de texto ambiguo, 6 objetivo no encontrado.

Python. El mismo flujo de trabajo es importable:

from ainotate.shoot import shoot
res = shoot({"url": "https://en.wikipedia.org/wiki/Screenshot",
             "marks": [{"type": "box",
                        "target": {"text": "View history"},
                        "label": "Past edits"}]}, draft=True)
print(res.paths[0], res.redactions)

Características

• Marcas: step numerados, box, arrow, click ondulación, keys (teclas), magnify (lupa), highlight, spotlight, text, sólido redact, y decorativos blur / pixelate.
• Colocación que se lee bien: las etiquetas van al espacio libre cerca de su objetivo y se planifican juntas; las flechas son formas cónicas estilo Skitch con una sombra suave que se curvan alrededor del texto (ver Etiquetas que se mantienen fuera del contenido). Advertencias para etiquetas superpuestas, flechas que se cruzan, más de 6 marcas o etiquetas de más de 4 palabras.
• Captura web en una sola llamada: ainotate shoot abre una página (portátil, ancha o ajuste de teléfono), ejecuta acciones (clic, rellenar, esperar, desplazarse), mide cada objetivo, redacta, anota y guarda.
• Cualquier navegador: su propio Playwright Chromium, Firefox o WebKit, o conéctate por CDP a un Chromium que ya uses y en el que hayas iniciado sesión (Chrome, Edge, Brave, Arc, BrowserOS). El ajuste preestablecido se aplica a esa pestaña y se restaura después.
• Cualquier imagen: locate encuentra texto por OCR (Apple Vision, Windows OCR o Tesseract); grid y zoom localizan iconos a resolución completa. La captura de pantalla, ventana y portapapeles está integrada.
• Aplicaciones de escritorio en macOS: ainotate window ID --target mide botones, interruptores y campos a través de la API de Accesibilidad, para que las marcas se coloquen exactamente sobre el control, iconos incluidos; ainotate elements --app NAME lista lo que puede encontrar.
• Marcos: fondos degradados (automáticos desde la captura, o ajustes preestablecidos), esquinas redondeadas, sombra, marco de navegador o ventana, proporciones sociales.
• Compartir: guías en Markdown, HTML y PDF; placas de antes/después; animaciones APNG y GIF; copiar al portapapeles.
• Especificaciones estrictas: un error tipográfico detiene la ejecución con una lista de cada problema en lugar de guardar una imagen incorrecta o sin redactar. Códigos de salida claros.
• Diacríticos: fuente Inter incluida, para que las etiquetas en rumano, alemán, francés y otros alfabetos latinos se rendericen correctamente en todas partes.

Privacidad

• La redacción es sólida. redact pinta un bloque opaco. AInotate nunca usa desenfoque para ocultar datos: el desenfoque y la pixelación se pueden revertir. blur y pixelate existen solo para restar importancia al desorden, y una marca marcada "sensitive": true se rechaza para ellos.
• La redacción automática está activada para capturas web. shoot escanea la página en vivo (texto y valores de entrada) en busca de correos, números de teléfono, números de tarjeta, IBAN, claves de API, tokens, JWT, campos de contraseña y datos personales, y los tacha. En imágenes se ejecuta sobre OCR cuando pasas --privacy auto. Puedes incluir tus propias direcciones en la lista de permitidos o añadir expresiones regulares.
• Es un esfuerzo de buena fe. La detección omite cosas: texto dibujado en imágenes o canvas, formatos inusuales, datos divididos entre elementos, marcos incrustados de otros sitios (reportados, no redactados). Siempre mira la imagen antes de compartirla. El skill hace esta verificación obligatoria para los agentes.
• Local. La captura, el OCR y el renderizado se ejecutan en tu máquina. AInotate no hace solicitudes de red propias más allá de cargar las páginas que le pides capturar.

Soporte de plataformas

	macOS	Windows	Linux
Anotar, marcos, exportar	verificado	experimental	experimental
Captura web (Playwright, CDP)	verificado	experimental	experimental
Captura de pantalla y ventana	verificado	experimental	experimental (X11)
Elementos de interfaz (window --target, elements)	verificado (Accesibilidad)	aún no	aún no
OCR (locate, objetivos de texto)	verificado (Vision)	experimental (Windows OCR)	experimental (Tesseract)
Portapapeles	verificado	experimental	experimental
Servidor MCP	verificado	experimental	experimental

Experimental significa implementado y probado con unit tests con mocks, aún no verificado en máquinas reales con Windows o Linux. Los informes son bienvenidos.

Licencia

Copyright © 2026 DontPayFull. AInotate es software libre bajo la GNU Affero General Public License v3.0 o posterior. Si ejecutas un AInotate modificado como servicio de red, la AGPL requiere que ofrezcas su código fuente a los usuarios de ese servicio.

Trabajo de terceros incluido y derivado (la fuente Inter, proporciones de flecha de Arrowshot, una idea de colocación de etiquetas de github/awesome-copilot) y las licencias de dependencias se listan en NOTICE.

---

Hecho con ❤️ por el equipo de DontPayFull
_{Cupones y códigos de descuento para más de 20,000 tiendas}