Lecciones de Código con IA

En esta lección (correspondiente al Workshop 6), profundizamos en el ecosistema de inteligencia artificial aplicado al entorno de trabajo local, explorando el uso de asistentes personales, la automatización de procesos mediante sistemas de múltiples agentes y la eficiencia del contexto.

En esta sesión del taller profundizamos en la optimización de costes y recursos al trabajar con Inteligencia Artificial, la implementación de herramientas de diseño automatizadas, y la delegación de tareas a sistemas multiagente avanzados.

Ecosistemas Multiagente, Open Design y Arquitectura HeadlessEn esta lección profundizamos en el uso de herramientas de orquestación de agentes IA, la generación automatizada de interfaces visuales y la construcción paso a paso de un proyecto headless integrando WordPress y Astro. A continuación, se detallan los conceptos y procesos técnicos desarrollados durante la sesión:1. Sistemas Multiagente Avanzados (Hermes y Multica)La evolución del desarrollo web requiere delegar la codificación manual a sistemas orquestadores donde el programador actúa como un supervisor de agentes.Hermes: Es altamente recomendado para entornos multiagente complejos y asistencia personal. Ofrece la ventaja de integrarse con aplicaciones móviles como Telegram, permitiendo enviarle notas de voz para que ejecute tareas (por ejemplo, revisar el código o el estado de una rama de desarrollo) sin necesidad de estar frente al ordenador.Multica: Se presenta como una plataforma gratuita y de primer nivel para la gestión y orquestación de proyectos. Permite conectar diferentes entornos locales, importar skills (habilidades) desde repositorios, y lanzar múltiples agentes de inteligencia artificial para trabajar en equipo sobre el código base.2. Generación de Interfaces de Usuario con Open DesignOpen Design es una solución avanzada que permite generar interfaces visuales completas y totalmente responsivas (incluyendo la generación de paneles y dashboards) a partir de simples instrucciones de la IA.Uso de design.md: La mejor práctica consiste en utilizar esta herramienta para crear y estructurar un sistema de diseño (que incluya tipografías, colores, y espaciados). Posteriormente, se exporta este sistema como un archivo Markdown (design.md) y se le proporciona al asistente de IA (como Claude) para que este escriba el código del frontend manteniendo una coherencia visual perfecta en toda la aplicación.3. Arquitectura Headless (WooCommerce + Astro 6)Se plantea un proyecto práctico para construir una tienda en línea automatizada (orientada al dropshipping desde AliExpress) utilizando una arquitectura desacoplada o headless.El Backend (WordPress): Desplegado localmente utilizando Docker, opera exclusivamente como el gestor de contenidos y de la tienda utilizando el plugin WooCommerce.El Frontend (Astro 6): Se utiliza la versión más reciente del framework Astro (v6) para construir una interfaz web ultrarrápida. Este frontend extrae la información de los productos conectándose a los endpoints nativos de la API REST de WooCommerce.Autenticación API: Para conectar ambos sistemas de forma segura, se emplean claves de autenticación básica (Basic Auth) generadas desde WooCommerce. A su vez, para permitir la autenticación y la sincronización de los carritos de los usuarios registrados, se establece el uso del plugin JWT Authentication dentro del entorno de WordPress.4. Prevención de Errores y Gestión de Contexto con EngramDurante el desarrollo con asistentes locales (como Claude Code), es común que el chat se bloquee o se cuelgue al intentar procesar imágenes o capturas de pantalla pesadas, deteniendo el flujo de trabajo.Solución mediante Bifurcación (Fork): Si la terminal se bloquea, la técnica recomendada es hacer un fork o retroceder en el historial de la conversación a un punto estable anterior al error.Uso de Engram: Una vez en el punto estable, se le indica a Engram que guarde todo el contexto y la planificación en su memoria persistente. De este modo, se puede abrir una nueva ventana de chat, recuperar la memoria y continuar el proyecto intacto.5. Estrategia de Criterios de Éxito (Success Criteria)Al automatizar el desarrollo, no basta con proveer una descripción general de las funcionalidades; se debe exigir a la IA el cumplimiento de Criterios de Éxito medibles.Ejemplos prácticos: el diseño debe cargar con Server Side Rendering (SSR), las pruebas unitarias (tests) deben superar el 80% de cobertura en color verde, y el puntaje de PageSpeed de Google debe ser superior a 80 en móvil. Esto obliga al agente a ejecutar comprobaciones locales antes de marcar una tarea como completada.6. Configuración Profesional de Entorno y Control de VersionesEntornos de Ejecución Rápidos: Se establece como convención estricta dejar de utilizar el tradicional npm debido a su lentitud, adoptando alternativas modernas y rápidas como pnpm (o Bun) para instalar y gestionar dependencias.Flujo de Ramas (Branching) y Versionado Semántico: Cualquier desarrollo debe utilizar metodologías profesionales de Git. Esto incluye aislar cada nueva funcionalidad en ramas específicas (como develop o feature), dejando la rama main bloqueada exclusivamente para lanzamientos estables. Además, el avance del código se debe documentar mediante versionado semántico (SemVer) implementando etiquetas (tags) por cada fase terminada (ej. v0.1.0, v0.2.0).Mantenimiento de Herramientas: Es de extrema importancia mantener actualizados tanto el CLI general como las skills, ejecutando frecuentemente en terminal comandos como cloud update y ckupdate para evitar dependencias obsoletas.

Aprende a planificar, actualizar dependencias y diseñar una arquitectura multiagente para un CRM con IA. Exploramos Docker, EasyPanel, Hermes, Git Flow y Vitest en un proyecto real.

Sesión CatchUP 2: Casos prácticos sobre gestión de contenido con TipTap, optimización de despliegues con Docker y GitHub Actions, estrategias de seguridad, rendimiento con Bun, Design Systems y automatización con agentes IA.

Descubre la evolución hacia sistemas multiagente con herramientas como Biome, LangFuse, LiteLLM, Minio, Claude Code, Engram y Multica en el Workshop 3 de Codeiando. Aprende a automatizar flujos de trabajo completos con agentes autónomos, memoria persistente y plataformas multiagente.

Aprende a optimizar el desarrollo web con Claude Code, claudekit y Engram en el Workshop 2 de Codeiando. Descubre cómo usar Claude Code Switcher, skills de IA como AI Artist y Agent Browser, y memoria persistente con Engram para reducir costes y acelerar tus proyectos web hasta un 60%.

Objetivo: Crear un perfil de GitHub profesional que actúe como su carta de presentación técnica y que documente su punto de partida en redes sociales.

Objetivo de la lección: Aprender a integrar herramientas de Inteligencia Artificial en el desarrollo web, gestionar sistemas multi-agente, aplicar técnicas de web scraping de forma segura y establecer protocolos de seguridad y testing utilizando datos sintéticos.

Aprende a instalar Dokploy en Hostinger con un solo clic, entiende la diferencia entre contenedores y software nativo, y prepara el entorno para desplegar OpenClaw de forma profesional y ordenada.

Sesión de reflexión estratégica sobre todo lo construido durante el programa, las nuevas áreas de aprendizaje y cómo convertir el conocimiento adquirido en oportunidades profesionales.

Proyecto P18 – AI Orchestrator Desktop: aplicación tipo Notion para gestión multimodelo y multiagente. En esta sesión diseñamos una aplicación desktop multiplataforma profesional con Tauri 2 y React 19, con arquitectura orientada a agente, comparador paralelo de modelos, gestión de proveedores y wizard inicial de configuración.