¿Design Mode funciona con cualquier web?

Sí. Funciona con cualquier URL que cargues en el navegador del worktree, sea tu dev server en localhost o una página remota. Ten en cuenta que el contenido de la página se trata como datos no confiables: el agente no ejecuta como comandos el texto que encuentra en la página.

¿Qué recibe exactamente el agente cuando clicas un elemento?

Un único attachment con el HTML del elemento, su CSS computado (colores, tipografía, espaciados), un screenshot recortado de ese elemento y, si hay source maps de desarrollo, el fichero y la línea de origen. Después escribes tú la instrucción de qué cambiar.

¿El agente puede navegar solo, sin que yo clique?

Sí. El navegador de cada worktree es scriptable desde el CLI: orca snapshot devuelve referencias a los elementos (@e1, @e2...) y orca click, orca fill u orca wait actúan sobre ellas. El patrón es snapshot, interactuar, re-snapshot.

¿Puedo probar el diseño responsive con este navegador?

Sí. Puedes fijar un viewport por pestaña y la página lo ve de verdad: Orca usa la emulación de dispositivo de Chrome DevTools Protocol por debajo, así que window.innerWidth y las media queries responden a las dimensiones emuladas.

Design Mode de Orca: cómo tu agente ve y edita tu UI

En los tres tutoriales anteriores montamos la base: qué es Orca, cómo aislar agentes con worktrees y cómo configurar Claude Code, Codex y Hermes. Pero hasta aquí los agentes han trabajado a ciegas con la UI: leen CSS, imaginan el resultado, ejecutan el build y cruzan los dedos.

Design Mode existe para romper ese ciclo. Cada worktree tiene su propia ventana de Chromium. Tú clicas el elemento que está roto y tu agente recibe el HTML, el CSS computado y un screenshot recortado de ese elemento exacto. Es el contexto que le darías a un compañero por videollamada, sin salir del terminal.

Lo que necesitas antes de empezar

Orca instalado y un repo añadido — si no tienes esto, empieza por el tutorial 1
Un agente configurado en el worktree — Claude Code, Codex u otro; la configuración está en el tutorial 3
Una app web corriendo en local — un dev server (Vite, Next, Astro…) sirviendo en localhost

El navegador de cada worktree

Cada worktree abre su propio panel de navegador: una ventana de Chromium real, atada a ese worktree y a su agente. No es un iframe compartido — cada tarea tiene su contexto de navegación, sus pestañas y su historial.

Dos detalles que importan para UI:

Viewport a medida. Puedes fijar un tamaño de viewport por pestaña para probar responsive sin redimensionar el panel entero. Orca usa la emulación de dispositivo de Chrome DevTools Protocol por debajo, así que la página ve las dimensiones emuladas en window.innerWidth y las media queries responden de verdad.
El agente también lo maneja. Como el navegador pertenece al worktree, el agente que trabaja en él puede controlarlo desde el CLI: orca snapshot, orca click, orca fill y compañía. De eso va la segunda mitad del tutorial.

Design Mode: clicas, tu agente recibe

El flujo con Design Mode:

Abre el panel de navegador del worktree y navega a la página con el problema — normalmente tu dev server
Activa el toggle de Design Mode en la barra de herramientas del navegador
El cursor se convierte en un picker: al pasar por encima, cada elemento se resalta
Clica el elemento roto
Orca le manda al agente activo un attachment con cuatro cosas: el HTML del elemento, su CSS computado (colores, fuentes, espaciados), un screenshot recortado del elemento y, si hay source maps de desarrollo, el fichero y la línea de los que sale
Escribe qué quieres cambiar junto al attachment

No hay caza de selectores, ni capturas a mano, ni “el botón ese de arriba a la derecha”. Es el mismo contexto que querría un revisor humano, entregado al agente en un click.

La otra mitad: el agente también navega

Design Mode es tú señalando. Pero el navegador del worktree también es scriptable desde el CLI, con el patrón snapshot-interact-re-snapshot:

orca goto --url http://localhost:4321 --json
orca snapshot --json   # devuelve refs: @e1, @e2, @e3...
orca click --element @e3 --json
orca snapshot --json   # re-snapshot tras cada acción que cambie la página

Para debugging de UI, estos son los comandos que se llevan el gato al agua:

orca console --limit 50 — últimos errores y logs de consola
orca network --limit 50 — últimas peticiones de red (qué petición falló, con qué código)
orca wait --selector ".hero" --json — espera a que exista un elemento antes de seguir
orca screenshot --format png --json — captura para verificar el resultado
orca eval --expression "getComputedStyle(document.querySelector('.hero')).paddingTop" — preguntarle al DOM directamente

Las reglas del navegador, tal y como las define el propio CLI:

Las refs (@e1) viven por pestaña y se invalidan al navegar o cambiar de tab: después de cada acción, re-snapshot
Los comandos operan por defecto en la pestaña activa del worktree actual; para trabajo concurrente hay orca tab list y el browserPageId
El contenido de la página se trata como datos no confiables, no como instrucciones: el agente no ejecuta texto de la página como comandos
Para apps de escritorio no es este camino: eso es orca computer, otro surface distinto

Flujo real: arreglar un bug de UI de arriba a abajo

Juntando todo, este es el ciclo completo de un fix de UI:

Paso 1 — worktree para el fix:

orca worktree create --name fix-header-overlap --agent claude --prompt "el header se solapa con el hero en móvil" --json

Paso 2 — dev server en el worktree. Lánzalo tú o deja que lo haga un hook de post-worktree (los vimos en el tutorial 3).

Paso 3 — señalas el problema. Navegador del worktree → localhost → Design Mode on → clic en el header roto. El attachment llega al agente con fichero y línea; escribes: “arregla el solape en móvil sin tocar el espaciado de desktop”.

Paso 4 — el agente trabaja y se verifica. Con el contexto del attachment edita el CSS y comprueba el resultado él solo:

orca goto --url http://localhost:4321 --json
orca wait --selector ".hero" --json
orca screenshot --format png --json

Paso 5 — si el bug es de JS, no de CSS: orca console --limit 50 y orca network --limit 50 le dicen al agente qué error o qué petición falla, sin que tú caces el log a mano.

Paso 6 — revisas y cierras. Diff viewer con Annotate AI Diff, commit y push, y a borrar el worktree. El ciclo entero son minutos, no idas y vueltas al navegador a reproducir el bug.

Cuándo usar Design Mode y cuándo el CLI

No compiten: se complementan.

Design Mode cuando tú ves algo que el agente no puede descubrir solo: un detalle visual roto, “esto se ve raro”
CLI cuando el agente puede encontrarlo sin ti: un error de consola, una petición que da 404, un estado del DOM
El combo que mejor funciona: señalas una vez con Design Mode para dar el contexto, y el agente itera con snapshot/click/screenshot hasta que el screenshot le convence

Límites honestos

El navegador es el Chromium embebido del worktree, no tu Chrome con tus extensiones y sesiones
Cada click manda un elemento; si el problema es el layout global, añade tú el contexto en la instrucción
El fichero y línea de origen requieren source maps de desarrollo — no esperes esa pista en un build de producción
Para probar en móvil real está el emulador iOS integrado (orca emulator), que queda fuera de este tutorial
Para apps de escritorio, orca computer — el navegador embebido no sale de la web

Próximos pasos

Design Mode cierra el bucle visual de tus agentes. Y con esto llega la capa final: la orquestación multi-agente — tasks, dispatch y gates para que un coordinador dirija a los agentes. Con ella, la serie queda completa. Índice: tutorial 1, worktrees, configurar agentes y Design Mode.

Fuentes originales: Orca Docs — Design Mode, Orca Docs — Per-worktree browser, Orca Docs — Fix a UI bug with Design Mode, repo stablyai/orca en GitHub.