Cap 7: Design Mode y Browser Integrado

Browser integrado

Orca incluye un navegador integrado basado en Chromium que permite hacer preview de tu aplicación web sin salir del IDE. Esto es especialmente útil cuando un agente está modificando la UI y quieres ver los cambios en tiempo real.

Abrir el browser

# Desde CLI
orca browser open http://localhost:3000

# Atajo de teclado
Ctrl/Cmd + B

El browser se abre como un panel lateral o como una tab separada, según tu preferencia en Settings.

Características del browser

• Hot reload: se actualiza automáticamente cuando detecta cambios en el worktree
• DevTools integradas: inspector de elementos, consola, network, sin necesidad de abrir Chrome aparte
• Multi-worktree: cada worktree puede tener su propio servidor de desarrollo en un puerto diferente
• Responsive: botones para cambiar entre resoluciones de dispositivos

Qué es Design Mode

Design Mode es una funcionalidad que permite inspeccionar y modificar elementos visuales de tu UI directamente desde el browser integrado, sin escribir código manualmente. Está pensado para:

• Ajustar estilos (colores, espaciado, tipografía) visualmente
• Identificar componentes y su jerarquía
• Generar prompts precisos para agentes basándote en lo que ves

Activar Design Mode

# Toggle desde la barra del browser
Click en el ícono de pincel en la toolbar del browser

# Atajo
Ctrl/Cmd + Shift + D

Inspección visual

Con Design Mode activo, al pasar el cursor sobre cualquier elemento de la página:

• Se resalta el elemento con un borde visual
• Se muestra un tooltip con: componente, clases CSS, dimensiones
• Click para seleccionar y ver todas sus propiedades

flowchart LR
    H[Hover sobre elemento] --> T[Tooltip con info]
    T --> C[Click para seleccionar]
    C --> P[Panel de propiedades]
    P --> E1[Editar estilos]
    P --> E2[Copiar selector]
    P --> E3[Generar prompt para agente]

Panel de propiedades

Al seleccionar un elemento, el panel lateral muestra:

Sección	Contenido
Componente	Nombre del componente React/Vue/Astro
Estilos	CSS aplicado, computed styles
Layout	Box model visual (margin, padding, border)
Accesibilidad	Roles ARIA, contraste de color, tab order
Fuente	Archivo y línea donde se define el componente

Edición visual

Design Mode permite editar estilos directamente:

Editar inline

1. Selecciona un elemento
2. En el panel de propiedades, modifica valores CSS
3. Los cambios se reflejan en tiempo real en el browser
4. Click en “Apply” para que Orca escriba los cambios en el archivo fuente

Ejemplo: ajustar un botón

1. Seleccionar el botón en Design Mode
2. Panel muestra: background-color: #3b82f6, padding: 8px 16px
3. Cambiar a: background-color: #2563eb, padding: 12px 24px
4. Click "Apply" → Orca edita el CSS/Tailwind correspondiente

Generación de prompts desde Design Mode

Una de las funcionalidades más potentes es generar prompts para agentes basándote en la inspección visual:

1. Selecciona un componente en Design Mode
2. Click derecho > “Generate prompt for agent”
3. Orca genera un prompt con contexto visual:

Modifica el componente Button en src/components/Button.tsx:
- Aumenta el padding a 12px 24px
- Cambia el color de fondo de #3b82f6 a #2563eb
- Agrega border-radius: 8px
- El componente actualmente tiene estas clases: "btn-primary px-4 py-2"

4. El prompt se envía al agente activo para que haga los cambios

Multi-worktree preview

Cuando tienes múltiples agentes trabajando en la UI, puedes ver los previews lado a lado:

flowchart TB
    subgraph "Browser tabs"
        B1["localhost:3000<br/>(main)"]
        B2["localhost:3001<br/>(feat/auth - Claude)"]
        B3["localhost:3002<br/>(refactor/ui - Codex)"]
    end

Cada worktree ejecuta su propio servidor de desarrollo. Orca asigna puertos automáticamente y los mapea a las tabs del browser.

Configurar servidores de desarrollo

{
  "devServer": {
    "command": "bun dev",
    "portRange": [3000, 3010],
    "autoStart": true
  }
}

Capturas de pantalla

Orca puede tomar capturas de pantalla del browser integrado para:

• Documentar el estado visual antes y después de un cambio
• Incluirlas en PRs como referencia visual
• Enviarlas como contexto a agentes multimodales

# Desde CLI
orca screenshot --worktree feat-auth --output screenshot.png

# Desde la UI: botón de cámara en la toolbar del browser

Responsive testing

El browser integrado incluye presets de dispositivos:

Preset	Resolución
iPhone SE	375 x 667
iPhone 14 Pro	393 x 852
iPad	768 x 1024
Desktop HD	1920 x 1080
Custom	Definido por el usuario

Cambia entre presets con la dropdown en la toolbar del browser, o usa el atajo Ctrl/Cmd + Shift + R para rotar entre ellos.

Buenas prácticas

1. Preview continuo: mantén el browser abierto mientras los agentes trabajan en la UI
2. Design Mode para comunicar: usa los prompts generados para ser preciso con los agentes
3. Compara side-by-side: abre main y el worktree del agente lado a lado
4. Verifica responsive: prueba todos los breakpoints antes de aprobar cambios de UI
5. Accesibilidad: usa el panel de accesibilidad de Design Mode para verificar contraste y ARIA