OnUI: Extensión de Navegador para Retroalimentación Precisa de la Interfaz de Usuario en Claude Code
OnUI es una extensión de navegador que proporciona contexto visual para correcciones de interfaz de usuario cuando trabajas con Claude Code. Resuelve el problema común de tener que describir qué elemento de la interfaz necesita atención permitiendo anotaciones directas en las páginas web.
Qué hace OnUI
Puedes hacer clic en elementos o dibujar regiones en cualquier página web, agregar notas sobre lo que está mal y exportar un informe estructurado. Claude Code lee este informe a través de MCP local (Protocolo de Contexto del Modelo), dándole información exacta sobre el elemento DOM, su ruta, tu intención y nivel de severidad. Esto elimina descripciones ambiguas como "el botón de la derecha, no el otro".
Implementación técnica
El desarrollador creó OnUI usando Claude Code durante varias semanas. Claude Code escribió la mayor parte del código base en TypeScript, incluyendo tanto la extensión del navegador como el servidor MCP local. Los desafíos técnicos específicos abordados durante el desarrollo incluyen:
- Iterar en el aislamiento del Shadow DOM para evitar conflictos de CSS con las páginas anfitrionas
- Construir la interfaz de diálogo de anotaciones y los formateadores de exportación
- Depurar el puente de mensajería nativa entre la extensión y el MCP local
Disponibilidad y licencia
OnUI es gratuito para usar sin niveles de pago. Está disponible para instalación con un clic desde Chrome Web Store y también funciona en Edge y Firefox. El proyecto tiene licencia GPL-3.0, cero dependencias en la nube, cero telemetría y es completamente gratuito.
Flujo de trabajo de desarrollo
El desarrollador señala la ironía de construir una herramienta para Claude Code usando el propio Claude Code. Su flujo de trabajo actual de iteración de interfaz es: anotar → Claude corrige → verificar → repetir.
📖 Leer la fuente completa: r/ClaudeAI
👀 Ver también
OpenClaw Integra Características de la Filtración de Código de Claude
Un usuario de OpenClaw hizo que su bot analizara el código filtrado de Claude (la recreación en Rust de Instructkr) y portó selectivamente patrones arquitectónicos específicos a su configuración de OpenClaw. La integración se centra en mejoras prácticas como la continuidad automática de inicio, la compactación de conversaciones y un marco de hooks pre-herramienta/post-herramienta.
TeamHero v2.6.1: Plataforma de Código Abierto para Gestionar Agentes de IA Claude
TeamHero v2.6.1 es una plataforma local-first y de código abierto que crea un equipo gestionado de agentes Claude con funciones como modo piloto automático, anidamiento de subtareas, vistas de flujo y memoria persistente. La herramienta se ejecuta en Node.js con un panel de control HTML/CSS/JS básico y no requiere base de datos.
PhantomCrowd: Simulador de Audiencia Multiagente Utilizando Claude Code
PhantomCrowd es un motor de predicción multiagente centrado en marketing que simula cómo reaccionan audiencias reales al contenido antes de publicarlo. Genera 10-500 personas con datos demográficos y personalidades únicas, cada una reaccionando de forma independiente a contenido como textos publicitarios o publicaciones sociales.
DebugBase: Una Base de Conocimiento Colectiva de Errores para Agentes de Codificación de IA a través de MCP
DebugBase es una herramienta compatible con MCP que proporciona una base de conocimiento compartida donde los agentes de codificación de IA pueden buscar soluciones conocidas para errores comunes, como desajustes de hidratación de Next.js o problemas de resolución de TypeScript. Incluye 11 herramientas MCP y viene precargada con 58 pares de error/solución de sesiones reales de agentes.