Inspector
Inspector · Programación
Inspector es un editor visual de front-end para desarrolladores que crean apps en React, Next.js o Vite con agentes de código con IA. Se conecta al agente que ya usas, así que en lugar de describir un cambio de texto y esperar a que el agente adivine qué archivo tocar, simplemente apuntas al elemento en pantalla. Editar un texto, ajustar una maquetación o cambiar un componente ocurre a través de una interfaz visual que escribe los cambios directamente en el código local de tu máquina. Sin copiar y pegar, sin buscar archivos a mano.
Acerca de Inspector
Qué es Inspector
Inspector es un editor visual de front-end creado para la era del código asistido por IA. Los proyectos de React, Next.js y Vite los escriben cada vez más agentes como Claude Code, Cursor o Codex, y el cuello de botella se ha desplazado, porque la parte difícil ya no es producir un componente. Es decirle al agente exactamente qué elemento cambiar y dónde vive ese elemento. Inspector cierra ese bucle. Coloca una capa visual sobre tu app en ejecución. Ahora puedes editar React con IA haciendo clic en un encabezado o arrastrando una tarjeta, y eso se convierte en una edición precisa sobre tus archivos fuente locales.
La herramienta gira en torno a una idea simple. Tus manos pertenecen a la interfaz, no al árbol de archivos. Editas el texto en línea. Mueves elementos de un lado a otro. Y vuelves a lanzar el agente sobre el cambio sin salir de la página que estás viendo. Funciona directamente sobre tu código local, así que nada llega a un servidor remoto antes de que decidas publicarlo.
Los límites principales conviene decirlos pronto. Inspector solo apunta a proyectos de React, Next.js y Vite. Un equipo de Vue o Svelte no sacará mucho partido. También da por hecho que ya usas un agente de código con su propia suscripción. Inspector se conecta a ese agente y no lo sustituye. ¿Todavía sin agente? Configúralo primero.
Primeros pasos
- Instala Inspector y abre tu proyecto para que detecte el framework y el servidor de desarrollo.
- Conecta el agente de código que ya usas, ya sea Claude Code, Cursor o Codex.
- Arranca tu servidor de desarrollo y abre la app dentro de la vista de Inspector.
- Haz clic en cualquier elemento para editar su texto, o arrástralo para cambiar su posición y su maquetación.
- Revisa el diff que genera Inspector y deja que el agente confirme el cambio en tu código.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Inspector.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores de front-end en equipos de React o Next.js
- Desarrolladores que ya pagan Claude Code, Cursor o Codex
- Creadores individuales que lanzan interfaces rápido
Tareas
- Reescribir el texto de la interfaz en toda una página
- Ajustar la maquetación y el espaciado
- Iterar sobre la estructura de un componente
Casos de uso
- Pulir una landing la noche antes de una demo
- Revisar la salida del agente en un proyecto real
- Incorporarte a un código que un agente ha montado
Funciones clave
Edición visual de textos y elementos
Inspector te deja seleccionar un elemento en la página y cambiarlo en el sitio. Edita un titular. Corrige la etiqueta de un botón. Mueve una tarjeta a otro lugar. La herramienta asigna cada acción a su origen en el código. La clave es la velocidad en esas cosas pequeñas que antes exigían una ida y vuelta completa de prompt y espera con tu agente.
Conexiones independientes del agente
Inspector funciona con Claude Code, Cursor y Codex en lugar de atarte a un solo proveedor. Se engancha al agente que ya pagas. Así conservas tu suscripción y tu flujo de trabajo actuales. Como herramienta de front-end para Claude Code, editor visual de Cursor o compañero de Codex, se adapta a lo que uses. Esa flexibilidad importa en equipos donde distintos desarrolladores usan agentes distintos sobre el mismo repositorio.
Ediciones directas sobre el código local
Cada cambio llega a tus archivos locales, no a un entorno alojado del editor. La estructura de tu proyecto, sus dependencias y su historial de versiones se quedan intactos. No se mueven. La capa visual se coloca encima de tu app real y nunca la sustituye por una réplica online limitada.
Compatibilidad con React, Next.js y Vite
La herramienta está afinada para el stack moderno de React. Maneja interfaces basadas en componentes, reconoce las convenciones del framework y sigue la estructura que esas herramientas de compilación generan en un proyecto típico. Si tu app corre sobre uno de estos frameworks, Inspector entiende lo que ve desde el primer momento.
Revisión del diff antes de confirmar
Inspector te muestra lo que va a cambiar para que lo apruebes o lo rechaces. Ves las ediciones del código que produjo el agente. Después decides si encajan con tu intención. Ese paso de revisión evita que un flujo visual rápido introduzca en silencio cambios que no pediste.
Vista previa integrada del servidor de desarrollo
Trabajas sobre tu servidor de desarrollo en vivo dentro de la herramienta, así que lo que editas es exactamente lo que el navegador renderizará delante de ti. Sin capturas desactualizadas y sin adivinar cómo quedará un cambio. La vista previa y el código se mantienen sincronizados mientras iteras.
Ventajas y desventajas
Ventajas
- Acelera los ajustes pequeños de texto y maquetación que de otro modo pedirían un prompt entero al agente.
- Funciona con el agente que ya usas en lugar de forzar una nueva suscripción.
- Edita tu proyecto local real, así que tus herramientas y el historial de git se mantienen intactos.
- La capa visual facilita detectar y corregir lo que un agente hizo mal.
- Se centra en React, Next.js y Vite, así que entiende las convenciones de ese stack.
Desventajas
- Solo admite React, Next.js y Vite, así que los equipos de Vue, Svelte o Angular no obtienen nada.
- Se conecta a un agente de código pero no incluye ninguno, así que primero necesitas tener Claude Code, Cursor o Codex en marcha.
- El soporte de plataformas se limita a macOS, lo que deja fuera por ahora a los desarrolladores de Windows y Linux.
- No diseña desde cero; edita interfaces que tu agente ya generó.
Preguntas frecuentes
Es un editor visual de front-end que se conecta a tu agente de código con IA. Apuntas a un elemento en tu app en ejecución, cambias el texto o la posición como quieres, e Inspector lo convierte en ediciones sobre tu código local de React, Next.js o Vite. Sustituye el paso de describirlo en un prompt por un clic directo.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Inspector.
Alternativas a Inspector
Base Code
Base44 (Wix) · Programación · ProductividadBase Code es un entorno de desarrollo en la nube compartido de Base44. El equipo describe cambios sobre un repositorio de GitHub en el chat, los ve en una vista previa y los envía como pull requests.
Google EmbeddingGemma 2
Google DeepMind · Escritura · Imagen · ProgramaciónGoogle EmbeddingGemma 2 es un modelo abierto de 740 millones de parámetros que convierte texto, código, imágenes, audio y fotogramas de vídeo en vectores de un mismo espacio de 768 dimensiones, y funciona en móviles y portátiles.
GitGlow
GitGlow · Programación · ProductividadGitGlow es un cliente Git de escritorio que reúne tu código y los cambios de tus agentes de IA en una sola revisión, para que sepas qué va a salir de tu máquina antes de publicarlo.