VS Code planifica los planos, Chrome los graba

Nuestro planificador lee una página en línea y propone vídeos. No puede saber que una función llegó ayer, ni que un filtro es lo que más gusta. Claude Code, que trabaja en tu editor con tu repositorio abierto, sí: lee el historial, abre las rutas y comprueba que una página existe de verdad antes de nombrarla.

Por eso nuestra extensión de VS Code se basa en una decisión deliberada. Nunca llama a un modelo por su cuenta. Prepara una tarea precisa y se la pasa a la extensión de Claude Code que ya tienes abierta en el editor, y eres tú quien pulsa Intro. Tu sesión, tu contexto y la última palabra siguen siendo tuyos, y nunca se envía nada en tu nombre. Claude Code escribe un plan de captura en el proyecto, y el panel se actualiza en cuanto cambia el archivo.

Conectarla es un clic, inspirado en el de drurls.com, nuestro producto hermano. La web concede acceso solo después de que inicies sesión y lo apruebes, comprueba con rigor adónde te devuelve y reutiliza tu clave actual, así que conectar VS Code nunca desconecta la extensión de Chrome.

Hasta ahora, grabar en Chrome siempre lo dirigía una persona: movías el ratón y nuestro cursor con estilo te seguía. Para reproducir un plan, la extensión ahora maneja la página por sí misma. Su motor de recorridos desliza el cursor hasta cada objetivo con una trayectoria suavizada y escribe carácter a carácter, con el mismo ritmo natural que nuestros vídeos del servidor.

Está hecho para webs reales:

• supera los cuadros de diálogo en lugar de quedarse parado;
• cuando un selector falla, encuentra el elemento por su texto visible;
• los clics envían la secuencia completa de eventos de puntero, para que las interfaces modernas respondan;
• nota cuando un recorrido se sale de la web y da a cada paso su propio límite de tiempo.

Dos reglas del navegador marcaron el resto. Grabar la pantalla exige un clic real tuyo, así que un botón Empezar inicia la sesión y luego el recorrido avanza solo. Y al cargar una página se borra todo lo que se le había añadido, así que un recorrido se divide en cada navegación y el cursor vuelve después de cada una.

La primera versión mezclaba los papeles: VS Code convertía él mismo salidas de terminal y diferencias de código en imágenes, Chrome grababa screencasts por separado y el campo que debía unirlos aún no se usaba. Hoy trazamos una línea clara.

• VS Code escribe recorridos y no captura nada. Un recorrido es una dirección real más unos pasos guionizados, cada uno con una etiqueta que lo nombra como escena y una estimación de su tiempo en pantalla.
• Chrome graba. Un clic reproduce cada recorrido con el cursor con estilo, luego captura cada plano previsto al que puede llegar, y marca el resto como pendiente de una persona en lugar de saltárselo.
• Cada paso se convierte en un recurso. En cada paso el grabador guarda la vista y los datos de la página y marca dónde empieza el paso en el clip. Un recorrido completo llega en un solo envío: la grabación más una imagen por paso.

Y puedes instalarla hoy: la extensión de VS Code se ofrece ahora para descargar en su propia página, junto a la de Chrome, con los pasos de instalación en los cuatro idiomas.

Antes de cerrar las instrucciones que sigue Claude Code, leímos cómo escribe sus recorridos la extensión de drurls.com y adoptamos tres reglas que ya había demostrado:

1. 1Navegar haciendo clic por la web en vez de saltar entre direcciones, porque saltar solo demuestra que las páginas existen.
2. 2Desplazarse hasta el final, no hasta un número de píxeles, ya que un asistente que lee el código fuente no puede saber cuánto mide una página renderizada.
3. 3No guionizar nunca un inicio de sesión con contraseña: el navegador que graba ya tiene tu sesión iniciada.

La unión entre dos extensiones en dos entornos distintos es donde las cosas pueden escaparse, así que pusimos pruebas justo ahí. Una prueba de ida y vuelta pasa un plan por el código real, desde que se escribe hasta las comprobaciones del grabador, y confirma que cada navegación y cada desplazamiento llegan intactos. Otra confirma que las acciones que puede usar Claude Code son exactamente las que el grabador sabe reproducir. Una tercera comprueba que cada elemento del que depende el panel está de verdad en su página.

Si construyes un producto, tu mejor demo suele ser la función que publicaste esta semana, y nadie la conoce mejor que tu código. Ahora el asistente que ya conoce tu código puede planificar el vídeo, y el navegador puede rodarlo, paso a paso, con un cursor que se mueve como una mano.

El resultado son imágenes fieles a lo que hace hoy tu producto, con cada paso etiquetado, cronometrado y listo para convertirse en escena. Las dos extensiones tienen su página: VS Code y Chrome.