Inspector - Edita tu front-end visualmente

Qué

Inspector es una herramienta local de escritorio para editar visualmente bases de código de front-end. Conecta un agente de programación a una interfaz similar a un navegador para que los usuarios puedan seleccionar elementos en una página, moverlos, editar texto, añadir comentarios y aplicar esos cambios directamente al código subyacente.

El producto parece estar dirigido a desarrolladores y diseñadores que trabajan en aplicaciones de front-end, especialmente apps de React, que quieren una forma más rápida de pasar entre la inspección visual y los cambios en el código. Según la página, Inspector se posiciona como una capa visual sobre una base de código local, en lugar de un navegador o IDE tradicional, con soporte para flujos de trabajo asistidos por agentes mediante Claude Code, Codex y Cursor.

Funcionalidades

• Edición visual de elementos — Los usuarios pueden mover elementos visualmente y aplicar esos cambios para que se guarden de nuevo en la base de código.
• Edición de texto in situ — Al hacer doble clic en el texto de una página se permite su edición directa, que luego se escribe en los archivos subyacentes del proyecto.
• Vinculación entre elementos y código — Inspector asigna los elementos de la página a su línea exacta de código, lo que ayuda a los usuarios a entender dónde realizar o revisar cambios.
• Conexión con agentes de programación — Puede conectarse a cuentas de Claude Code, Codex o Cursor, lo que facilita flujos de trabajo de front-end asistidos por agentes.
• Capturas de pantalla con reconocimiento de página — La herramienta puede capturar pantallas ajustadas a elementos específicos de la página, lo que resulta útil para el contexto visual y la comunicación.
• Flujo de trabajo local con publicación en GitHub — Inspector funciona con bases de código locales y, según la página, permite crear ramas, confirmar cambios y publicar pull requests a través de GitHub.

Consejos útiles

• Valida pronto la compatibilidad con el framework — La página indica que Inspector funciona mejor con React, por lo que los equipos que usen otros frameworks de front-end deberían esperar un mapeo de contexto visual más débil y probar primero en proyectos representativos.
• Úsalo para acortar los ciclos entre diseño y código — Este tipo de herramienta es especialmente útil cuando diseñadores o PMs necesitan proponer pequeños cambios de UI sin rastrear manualmente los archivos de componentes.
• Revisa el flujo de trabajo del equipo en torno a proyectos locales — Inspector está pensado para bases de código locales, por lo que su adopción será más fluida para equipos que ya se sientan cómodos clonando repositorios y trabajando desde entornos locales.
• Revisa los límites de uso de agentes — Dado que el producto se conecta a agentes de programación externos, los equipos deberían definir cuándo las ediciones visuales son suficientes y cuándo sigue siendo necesaria una revisión de código más profunda.
• Ten en cuenta las limitaciones actuales de la plataforma — La página solo menciona disponibilidad para MacOS y dice que Windows aún no es compatible, lo que puede afectar un despliegue a nivel de todo el equipo.