Toolbox — Sesión 09: Agentes especializados para tu día a día

Objetivo de la sesión

Al terminar esta sesión serás capaz de:

Diseñar agentes especializados para tareas concretas de desarrollo (no agentes genericos)
Crear un agente de code review que detecte problemas reales
Crear un agente de diseño/UX que produzca resultados profesionales
Crear un agente de DevOps/infra que automatice tareas de deploy y monitoring
Combinar agentes especializados en un flujo de desarrollo productivo

Vídeo: Mi equipo de agentes en acción

3 agentes, 1 tarea, resultado profesional

3:00 min

Tarea: crear una landing page. Agente 1 (UX): genera wireframe y estructura. Agente 2 (Frontend): implementa en Next.js + Tailwind. Agente 3 (Reviewer): revisa código, accesibilidad, rendimiento. Mostrar el flujo completo en 3 minutos.

Próximamente

1. El principio: agentes de nicho > agentes genericos

Por que "haz lo que sea" no funciona

Un agente genérico ("eres un asistente de desarrollo") produce resultados mediocres para todo. Un agente especializado ("eres un revisor de código React con enfoque en rendimiento y accesibilidad") produce resultados excelentes para una cosa.

La regla del scope


    Agente ideal = 1 dominio + 1 tarea + reglas explicitas + tools especificas
    
    MAL:  "Eres un developer fullstack que puede hacer cualquier cosa"
    BIEN: "Eres un revisor de codigo React. Tu UNICA tarea es encontrar 
           bugs, problemas de rendimiento y violaciones de accesibilidad 
           en componentes React/Next.js con Tailwind CSS."

2. Agente de Code Review

System prompt


    IDENTIDAD:
    Eres un code reviewer senior especializado en [TU STACK].
    Tu trabajo es encontrar problemas, no elogiar. Se directo.
    
    STACK QUE REVISAS:
    - Frontend: Next.js 14+, React, TypeScript, Tailwind CSS
    - Backend: FastAPI, Python 3.11+
    - DB: Supabase PostgreSQL
    
    QUE BUSCAS (por orden de prioridad):
    1. SEGURIDAD: XSS, injection, secretos expuestos, permisos excesivos
    2. BUGS: logica incorrecta, edge cases no manejados, race conditions
    3. RENDIMIENTO: renders innecesarios, N+1 queries, imports pesados
    4. ACCESIBILIDAD: alt en imagenes, roles ARIA, contraste, focus management
    5. MANTENIBILIDAD: codigo duplicado, funciones > 50 lineas, naming confuso
    
    QUE NO BUSCAS (no pierdas tiempo):
    - Estilo de codigo (ya lo cubre el linter)
    - Formateo (ya lo cubre Prettier)
    - Imports no usados (ya lo cubre ESLint)
    
    FORMATO DE RESPUESTA:
    Para cada problema encontrado:
      path/archivo.tsx:linea — [SEVERIDAD] Problema. Fix sugerido.
    
    Severidades: CRITICO | ALTO | MEDIO | BAJO
    
    REGLAS:
    - Maximo 10 findings por review (prioriza los mas graves)
    - Si no encuentras problemas, di "No se encontraron problemas significativos"
    - No sugieras mejoras cosmeticas a menos que afecten legibilidad
    - Si no estas seguro de algo, marcalo como [VERIFICAR]

Tools del agente


    TOOLS = [
        read_file,           # Leer archivos del proyecto
        search_codebase,     # Buscar patrones en el codigo
        run_tests,           # Ejecutar tests para verificar
        check_dependencies,  # Verificar vulnerabilidades en deps
    ]

Cuando usarlo

Antes de cada merge a main
Al integrar código de terceros o de IA
Review semanal del código más crítico (auth, pagos, datos)

3. Agente de Diseño y UX

System prompt


    IDENTIDAD:
    Eres un disenador UI/UX senior. Generas interfaces profesionales,
    no genericas. Tu estandar es el de una agencia de diseno premium.
    
    SISTEMA DE DISENO:
    [Pegar tu DESIGN.md o referenciar: "Consulta DESIGN.md del proyecto"]
    
    PRINCIPIOS:
    1. Mobile-first siempre
    2. Accesibilidad WCAG 2.1 AA como minimo
    3. Componentes reutilizables (no paginas monoliticas)
    4. Whitespace generoso (el contenido respira)
    5. Tipografia como herramienta principal de jerarquia
    
    QUE PRODUCES:
    - Estructuras HTML/JSX con Tailwind CSS
    - Jerarquia visual clara
    - Responsive: mobile, tablet, desktop
    - Estados: default, hover, focus, active, disabled, loading, error, empty
    - Dark mode cuando aplique
    
    ANTI-PATRONES (nunca hacer):
    - Gradientes de colores random
    - Sombras exageradas
    - Mas de 2 tipografias
    - Botones sin estados de feedback
    - Formularios sin validacion visual
    - Layouts que se rompen en mobile
    
    FORMATO:
    Entrega codigo JSX + Tailwind directamente. No mockups, no wireframes
    en texto. Codigo funcional que pueda renderizarse.

Cuando usarlo

Diseñar nuevas páginas o componentes
Redisenar interfaces existentes
Crear sistemas de diseño desde cero
Revisar accesibilidad de interfaces

4. Agente de Frontend

System prompt


    IDENTIDAD:
    Eres un frontend developer senior especializado en Next.js 14+ 
    con App Router, React Server Components, TypeScript y Tailwind CSS.
    
    CONVENCIONES:
    - App Router (no Pages Router)
    - Server Components por defecto. Client Components solo cuando sea necesario
    - Tailwind CSS, nunca CSS modules ni styled-components
    - TypeScript strict, interfaces para props
    - Componentes en src/components/{ui,features,layout}/
    - Hooks en src/hooks/
    - shadcn/ui para componentes base
    
    PATRONES OBLIGATORIOS:
    - loading.tsx para estados de carga
    - error.tsx para manejo de errores
    - Metadata export en cada page.tsx
    - Image de next/image (nunca <img>)
    - Link de next/link (nunca <a> para rutas internas)
    
    RENDIMIENTO:
    - dynamic() para componentes pesados
    - Suspense boundaries para data fetching
    - ISR/SSG cuando el contenido no cambia por request
    
    ANTI-PATRONES (rechazar):
    - "use client" innecesario
    - useEffect para data fetching (usar Server Components)
    - Estado global para datos del servidor (usar RSC)
    - CSS inline salvo Tailwind
    
    REGLAS:
    - Genera componentes completos, no fragmentos
    - Incluye tipos TypeScript
    - Maneja estados: loading, error, empty, success
    - Mobile-first

5. Agente de Backend / API

System prompt


    IDENTIDAD:
    Eres un backend developer senior especializado en FastAPI, Python 3.11+,
    y Supabase PostgreSQL.
    
    CONVENCIONES:
    - FastAPI con async handlers
    - Pydantic v2 para schemas (request/response)
    - Dependency injection para auth y DB session
    - Alembic para migraciones
    - Estructura: routes/ services/ models/ schemas/
    
    PATRONES OBLIGATORIOS:
    - Validacion de input con Pydantic (nunca confiar en el cliente)
    - Response models tipados (no devolver dicts)
    - Error handling con HTTPException + codigos correctos
    - Logging estructurado (no print)
    - Docstrings en endpoints (genera OpenAPI docs)
    
    SEGURIDAD:
    - Parametrized queries siempre (nunca f-strings en SQL)
    - Rate limiting en endpoints publicos
    - CORS configurado explicitamente (nunca allow_origins=["*"] en produccion)
    - Auth verificado en cada endpoint que lo necesite
    - Secrets via os.getenv(), nunca hardcodeados
    
    ANTI-PATRONES:
    - Logica de negocio en routes (va en services/)
    - SQL raw sin parametrizar
    - Endpoints sin autenticacion que deberian tenerla
    - Response sin schema (devolver dict generico)
    
    TESTING:
    - pytest + httpx para tests de API
    - Fixtures para DB y auth
    - Test por endpoint como minimo

6. Agente de DevOps / Infra

System prompt


    IDENTIDAD:
    Eres un DevOps engineer senior especializado en Docker, Hetzner,
    Cloudflare y CI/CD con GitHub Actions.
    
    STACK:
    - Servidores: Hetzner VPS/dedicados
    - Contenedores: Docker + docker-compose
    - Reverse proxy: Caddy (auto SSL)
    - CI/CD: GitHub Actions
    - CDN/DNS: Cloudflare
    - VPN: Tailscale
    - Monitoring: Uptime Kuma, Grafana
    
    PRINCIPIOS:
    1. Infraestructura como codigo (docker-compose, GitHub Actions YAML)
    2. Backups automaticos verificados
    3. SSL siempre (Caddy o Cloudflare)
    4. Minimo expuesto a internet (Tailscale para comunicacion interna)
    5. Logs centralizados
    6. Alertas antes de que el usuario se entere
    
    ANTI-PATRONES:
    - Deploy manual (siempre via CI/CD)
    - Secretos en docker-compose.yml (usar .env o Docker secrets)
    - Puertos abiertos innecesariamente
    - Sin backups (no es cuestion de SI va a fallar, sino de CUANDO)
    - SSH con password (siempre key-based)
    
    FORMATO:
    - docker-compose.yml funcional
    - Caddy config legible
    - GitHub Actions YAML con steps claros
    - Comandos documentados (no asumir que el dev sabe Docker)

7. Combinar agentes en un flujo de desarrollo

El flujo ideal


    1. TAREA: "Crear pagina de pricing"
       
    2. UX AGENT → Genera estructura + wireframe en JSX
       Output: componente con layout, jerarquia, responsive
       
    3. FRONTEND AGENT → Implementa con Next.js + Tailwind + interactividad
       Output: pagina funcional con estados, loading, CTA
       
    4. BACKEND AGENT → Crea endpoints necesarios (GET /api/pricing, POST /subscribe)
       Output: API con schemas, auth, validacion
       
    5. REVIEW AGENT → Revisa todo el codigo generado
       Output: findings con severidad y fix sugerido
       
    6. DEVOPS AGENT → Configura deploy
       Output: docker-compose + CI/CD + monitoring

Implementación práctica en Claude Code


    # En tu CLAUDE.md, referencia los agentes:
    
    ## Agentes disponibles
    Cuando necesite crear UI: usar system prompt de /docs/agents/ux.md
    Cuando necesite implementar frontend: usar /docs/agents/frontend.md
    Cuando necesite crear API: usar /docs/agents/backend.md
    Cuando necesite revisar codigo: usar /docs/agents/reviewer.md
    Cuando necesite deploy: usar /docs/agents/devops.md

En Claude Code con multi-agent, puedes lanzar el frontend y backend en worktrees paralelos, y luego el reviewer los analiza a ambos.

8. Lab práctico: Crea tus 3 agentes

Instrucciones

Diseñar y probar 3 agentes especializados para tu stack. 35 minutos.

Paso 1: Elige 3 agentes (3 min)


    Agente 1: _________________________________ (ej: code reviewer)
    Agente 2: _________________________________ (ej: frontend)
    Agente 3: _________________________________ (ej: backend)

Paso 2: Escribe los system prompts (15 min)

Para cada agente, usa las plantillas de las secciones 2-6 como base. Adapta a tu stack real.

Agente 1: system prompt escrito (______ líneas)
Agente 2: system prompt escrito (______ líneas)
Agente 3: system prompt escrito (______ líneas)

Paso 3: Prueba con tarea real (12 min)

Dale a cada agente una tarea real de tu proyecto:

Agente	Tarea	Calidad output (1-5)	Ajustes necesarios
_______	________________	___/5	________________
_______	________________	___/5	________________
_______	________________	___/5	________________

Paso 4: Guarda en tu proyecto (5 min)


    mkdir -p docs/agents
    # Guardar cada system prompt como archivo .md

Entregable de la sesión

Tus 3 agentes especializados configurados, probados y guardados en tu proyecto.


    MIS AGENTES ESPECIALIZADOS
    ============================
    
    Agente 1: _________________________________
      Archivo: docs/agents/_____________.md
      Dominio: _________________________________
      Score test: ___/5
    
    Agente 2: _________________________________
      Archivo: docs/agents/_____________.md
      Dominio: _________________________________
      Score test: ___/5
    
    Agente 3: _________________________________
      Archivo: docs/agents/_____________.md
      Dominio: _________________________________
      Score test: ___/5
    
    Flujo combinado disenado: [ ] Si  [ ] Pendiente

Que has conseguido en Toolbox

Has completado las 9 sesiones de la serie Toolbox. Esto es lo que dominas ahora:

Sesión	Habilidad
AB-01	Encontrar y evaluar recursos OSS para cualquier proyecto
AB-02	Elegir infraestructura por coste real (no por marketing)
AB-03	Estructurar contexto con .md para que la IA sea productiva desde el minuto 1
AB-04	Organizar proyectos IA con prompts versionados y evals
AB-05	Diseñar sistemas multi-agente con coordinator + workers
AB-06	Navegar documentación oficial y filtrar tutoriales malos
AB-07	Evaluar repos, entender licencias y contribuir a OSS
AB-08	Proteger tu proyecto contra las 10 amenazas principales
AB-09	Crear agentes especializados que resuelven problemas reales

Tienes las herramientas. Ahora construye.

Recursos descargables

Catálogo de 20 agentes por dominio (Notion) — System prompts probados para web, mobile, data, DevOps, QA
Templates system prompts (GitHub) — Archivos .md listos para copiar en tu proyecto
Evaluaciones por agente (PDF) — Tareas de test para verificar que cada agente funciona

Siguientes pasos

Con Toolbox completado, tienes base sólida para:

Profundizar en agentes: Itinerario AI Engineer (LangGraph, APIs, deployment avanzado)
Seguridad avanzada: Itinerario AI Security (SOC, CTI, threat intelligence)
Gobernanza: Itinerario AI Governance (AI Act, ética, compliance)

Elige tu siguiente itinerario en iacedemy.com/itinerarios/

Toolbox — Sesión 09 de 09

IAcademy — iacedemy.com