Domscribe
Domscribe · Programación
Domscribe es una herramienta de depuración frontend de código abierto que le da ojos a los agentes de codificación con IA sobre tu frontend en ejecución. Piénsalo como una herramienta de desarrollo de código abierto hecha para una sola tarea: cerrar la distancia entre lo que dice tu código y lo que el navegador realmente renderiza. Conecta el navegador con el código fuente en las dos direcciones: haces clic en un elemento del DOM y describes un cambio, o tu agente consulta un archivo fuente para ver la instantánea del DOM en vivo, las props del componente y su estado. Por dentro funciona con un vínculo de DOM a código fuente construido en tiempo de compilación, así que cada elemento apunta de vuelta al archivo y la línea exactos. Trabaja con cualquier agente compatible con MCP y con cualquier bundler, se distribuye bajo licencia MIT y elimina toda la instrumentación de las builds de producción. Sin planes de pago. Sin límites de asientos.
Acerca de Domscribe
Qué es Domscribe
Domscribe es un puente de píxel a código para el trabajo frontend asistido por IA. Los agentes de codificación pueden leer tus archivos fuente, pero no ven lo que de verdad se renderiza en el navegador, y por eso adivinan la maquetación, los estilos y la estructura de los componentes. Domscribe cierra esa brecha construyendo un enlace bidireccional entre el DOM y tu árbol de código fuente.
La herramienta inyecta atributos deterministas data-ds en tiempo de compilación mediante análisis de AST. Registra cada vínculo en un manifiesto. En tiempo de ejecución captura props, estado e instantáneas del DOM en vivo. Después tu agente hace una pregunta sencilla: ¿qué se renderiza en esta línea? Y obtiene una respuesta real en lugar de una captura de pantalla que tiene que interpretar.
El mayor límite es el alcance. Domscribe cubre hoy React, Vue, Next.js y Nuxt, con adaptadores personalizados para otras configuraciones, así que los detalles internos específicos de frameworks no soportados no se vinculan con precisión. También da por hecho que tu agente habla MCP, lo que deja fuera a las herramientas que solo aceptan prompts en texto plano.
Cómo empezar
- Instala el paquete y ejecuta
npx domscribe initdentro de la raíz de tu proyecto. - Añade el plugin del bundler para tu herramienta de build (Vite 5-7, Webpack 5 o Turbopack) para que los archivos fuente reciban IDs
data-dsestables. - Apunta tu agente compatible con MCP, como Claude Code, GitHub Copilot, Cursor o Gemini, al endpoint MCP de Domscribe.
- Arranca tu servidor de desarrollo, abre la app y haz clic en cualquier elemento para registrar una petición de cambio en lenguaje natural.
- Deja que el agente consulte la ubicación en el código fuente, haga la edición y confirme el resultado contra el DOM en vivo.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Domscribe.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores frontend
- Ingenieros full-stack que trabajan con agentes de IA
- Equipos que ya usan Claude Code o Cursor
Tareas
- Corregir fallos de maquetación y estilos
- Ajustar props y estilos de un componente
- Revisar qué renderiza una línea del código fuente
Casos de uso
- Iteración rápida de UI durante el desarrollo de una función
- Depurar un render guiado por el estado
- Incorporarse a un código que no conoces
Funciones clave
IDs estables en tiempo de compilación
Domscribe analiza cada archivo fuente durante la build e inyecta atributos deterministas data-ds con xxhash64, y luego registra cada vínculo en un manifiesto. Estos IDs se mantienen estables entre el hot module replacement y el fast refresh, lo que significa que sobreviven al ciclo de editar, guardar y recargar que define casi todo el trabajo frontend. No se rompen en cuanto editas un archivo. Sin heurísticas en tiempo de ejecución. Sin adivinar qué elemento es cuál.
Enlace bidireccional entre DOM y código fuente
La herramienta funciona en las dos direcciones. Haz clic en un elemento del DOM y describe el cambio que quieres, y Domscribe lo resuelve a la ubicación exacta del código que tu agente debería editar. O pide al agente que consulte un archivo y una línea del código fuente para ver qué se renderiza ahí ahora mismo. La dirección que uses depende de la tarea. Ninguno de los dos lados se queda adivinando sobre el otro.
Captura profunda en tiempo de ejecución
Más allá del HTML en bruto, Domscribe extrae props, estado y metadatos de componentes en vivo mediante el recorrido del fiber de React y la inspección del VNode de Vue. Tu agente obtiene todo el contexto del componente detrás de un elemento renderizado, no solo el marcado. Eso importa. Significa que el agente puede razonar por qué algo se ve como se ve.
Soporte MCP con una capa REST
Las anotaciones viven como archivos JSON en una carpeta .domscribe/annotations/ dentro de tu repositorio, expuestas a través de APIs REST que el servidor MCP envuelve para el acceso del agente. Domscribe ofrece 12 herramientas y 4 prompts sobre MCP, y trabaja con Claude Code, GitHub Copilot, Cursor, Gemini, Kiro y cualquier otro cliente MCP. Todo se queda local, sin dependencias externas.
Redacción de datos personales
Los correos, tokens y patrones sensibles se limpian de forma automática antes de que cualquier dato salga del navegador. Es una protección real. Para equipos que trabajan en apps que manejan datos reales de usuarios, es la diferencia entre una herramienta que puedes ejecutar contra un entorno de staging y una que no.
Cero impacto en producción
Cada atributo data-ds, script de superposición y conexión de retransmisión se elimina de las builds de producción, y la CI lo hace cumplir. Tu bundle publicado se mantiene limpio, así que no sacrificas tamaño del bundle ni expones la instrumentación a los usuarios finales.
Ventajas y desventajas
Ventajas
- Gratis y de código abierto bajo licencia MIT, sin planes de pago ni límites de asientos.
- Vincula los elementos del DOM con ubicaciones exactas del código fuente, así que los agentes dejan de editar el archivo equivocado.
- Captura props y estado en vivo, y da al agente un contexto que las capturas de pantalla no pueden ofrecer.
- Agnóstica de framework dentro de su lista soportada y compatible con cualquier agente basado en MCP.
- La redacción de datos personales y la limpieza en producción mantienen a raya los datos sensibles y el tamaño del bundle.
Desventajas
- Requiere un framework soportado (React, Vue, Next.js, Nuxt) o un adaptador personalizado; los stacks no soportados no se vinculan con precisión.
- Solo sirve con agentes compatibles con MCP, así que las herramientas de prompt en texto plano no pueden usarla.
- La configuración toca tu configuración del bundler y el servidor de desarrollo, lo que añade un paso antes de que haga nada.
Preguntas frecuentes
Construye un puente entre tu frontend en ejecución y tu agente de codificación con IA. El agente puede responder a un clic sobre un elemento del DOM o consultar una línea del código para ver el DOM, las props y el estado en vivo, y luego hacer una edición con todo el contexto.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Domscribe.
Alternativas a Domscribe
Forefront
Forefront · ProgramaciónForefront es una plataforma web para construir con IA de código abierto. Te deja ajustar los principales modelos de lenguaje de código abierto con tus propios datos, evaluar cómo rinden y ejecutarlos a través de una API o exportarlos para alojarlos tú mismo. Los desarrolladores que quieren la comodidad de una plataforma cerrada pero insisten en ser dueños de sus modelos y sus datos son el público objetivo.
Startkit
StartKit.AI · ProgramaciónStartkit es un boilerplate para crear productos de SaaS con IA y wrappers de IA. Piénsalo como un boilerplate para startups de IA con las partes aburridas ya conectadas: autenticación, pagos con Stripe y Lemon Squeezy, límites de uso, correo transaccional y un kit de inicio de API de IA que habla con OpenAI, Anthropic, Groq o Llama. Clonas el repositorio, pones tu precio y te dedicas a la parte del producto por la que la gente paga de verdad. Está hecho con Next.js sobre React y Tailwind, así que buena parte del código boilerplate ya te resulta familiar.
Testim
Tricentis · ProgramaciónTestim es una plataforma de automatización de pruebas impulsada por IA para crear y ejecutar pruebas de extremo a extremo en aplicaciones web, móviles y Salesforce. Se apoya en el aprendizaje automático para mantener las pruebas estables cuando cambia una interfaz, así que los equipos dedican menos tiempo a reparar selectores rotos. No está nada mal para una herramienta de pruebas automatizadas que puedes empezar a usar hoy mismo. Creas pruebas grabando acciones en un navegador y luego añades JavaScript cuando necesitas más control. Es una opción sólida para equipos de QA con mucho trabajo.