Multimodal Agents — Agentes con Visión + Texto + Código

Basado en arquitectura de agentes VLM (Vision-Language Models). Los agentes del futuro procesan screenshots, diagramas y texto simultáneamente.

Qué cambia para Savia Flow

Los agentes actuales (Claude Code) procesan texto. Los multimodales añaden:

• UI understanding: leen screenshots de la app para detectar bugs visuales
• Diagram comprehension: interpretan diagramas de arquitectura como input
• Cross-modal reasoning: conectan un wireframe con su spec técnica

Casos de uso en Savia Flow

1. Quality Gates con visión

• Gate visual: el agente toma screenshot de la app desplegada y compara con el wireframe de la spec
• Detecta: layout roto, colores incorrectos, texto cortado, responsive failures
• Integración: Gate 3 (integration) añade visual regression check

2. Board visualization from screenshots

• /flow-board puede leer un screenshot del board real de Azure DevOps
• Compara board real vs board esperado según la configuración
• Detecta: items mal posicionados, WIP violations visuales

3. Spec from wireframe

• /flow-spec --from-image acepta wireframe/mockup como input
• Genera spec funcional a partir del diseño visual
• Extrae: componentes, interacciones, datos necesarios

4. Diagramas como input para decompose

• /pbi-decompose --from-diagram acepta diagrama de arquitectura
• Extrae: servicios, conexiones, dependencias
• Genera: tasks alineadas con el diagrama

Arquitectura de agente multimodal

┌─────────────┐    ┌──────────────┐    ┌─────────────┐
│  Input       │    │  VLM Agent   │    │  Output     │
│  - text      │───>│  - reasoning │───>│  - spec     │
│  - image     │    │  - tool-use  │    │  - tasks    │
│  - diagram   │    │  - vision    │    │  - report   │
└─────────────┘    └──────────────┘    └─────────────┘

Tool-use pattern (OpenAI compatible)

payload = {
    "messages": [
        {"role": "user", "content": [
            {"type": "text", "text": "Analiza este wireframe..."},
            {"type": "image_url", "image_url": {"url": "data:image/png;base64,..."}}
        ]}
    ],
    "tools": [
        {"type": "function", "function": {
            "name": "create_spec",
            "description": "Create SDD spec from visual analysis",
            "parameters": {...}
        }}
    ]
}

Roadmap de integración

Modelos compatibles

• Claude (Anthropic): visión nativa en claude-opus-4, sonnet-4
• Qwen3.5 VLM (Alibaba): 400B params, MoE, native vision, tool-use
• GPT-4V (OpenAI): visión + tool-use

Para Savia, la prioridad es Claude nativo (ya es el modelo base). Qwen3.5 como alternativa open-source si necesitamos fine-tuning o deployment on-premises.