Lecciones de Código con IA

En esta lección, exploraremos el proceso de especificación y desarrollo de plugins y plantillas personalizadas para WordPress, con un enfoque en la filosofía de "cero dependencias". Aprenderá a definir los requisitos de sus proyectos desde cero, evitando el uso de plugins externos y construyendo soluciones robustas y autónomas. Se detallará cómo utilizar herramientas de inteligencia artificial como Gemini (o ChatGPT, Claude) para generar documentación de proyectos, incluyendo la creación de PRD (Product Requirements Document). Analizaremos la estructura de tres proyectos específicos: dos plugins y una plantilla personalizada, destacando la importancia de la autonomía y la integración de APIs externas, como la de TMDB, para la gestión de contenido. Además, se abordará la creación de Custom Post Types (CPTs) para almacenar datos externos, la implementación de REST APIs con endpoints personalizados y la documentación de estas APIs utilizando estándares como Swagger y OpenAPI, asegurando una integración fluida y escalable.

En esta lección, exploraremos un caso práctico de desarrollo de una aplicación de diseño de interiores, enfocándonos en la resolución de problemas comunes y la implementación de funcionalidades avanzadas. Aprenderás a identificar y solucionar errores típicos en entornos de desarrollo, como la necesidad de reiniciar el servidor tras cambios en la base de datos, y a manejar la interacción con el usuario de manera efectiva.Se abordará la gestión de un proyecto con Habiteka y Prisma, discutiendo la importancia de la validación en tiempo de ejecución (runtime validation) y la gestión de chunks. Además, profundizaremos en la creación y manipulación de elementos de diseño en un entorno 2D y 3D, incluyendo la agrupación, desagrupación, posicionamiento y escalado de objetos, así como la adaptación de medidas reales en el diseño.Finalmente, la lección te mostrará cómo aplicar estilos de diseño predefinidos (minimalista, rústico, art deco, etc.) y generar renders a partir de un plano, utilizando prompts para especificar materiales y otros detalles. Esto te permitirá comprender el flujo de trabajo completo desde la creación del plano hasta la visualización en 3D y la generación de propuestas de diseño.

En esta lección, exploraremos el proceso de integración de diseños y funcionalidades en un proyecto web existente. Nos centraremos en cómo fusionar elementos de diferentes fuentes para crear una experiencia de usuario cohesiva y atractiva, prestando especial atención a la estructura y los componentes visuales. Aprenderemos a analizar y combinar elementos de diseño de dos proyectos, Open Design (OD) y Stitch, para construir una interfaz rica y funcional. Se discutirán conceptos como la integración de una landing page con una funcionalidad de chat, la aplicación de un design system, y la fusión de estilos visuales como el glamorfismo y patrones de giro. También abordaremos la importancia de una paleta de colores bien definida y la integración de animaciones puras. Veremos cómo implementar un chat dentro de la interfaz de la landing page, asegurando que el usuario pueda navegar fluidamente entre el chat y el contenido principal, con opciones para volver y contactar. Esto permitirá al usuario generar diseños web a partir de una conversación fluida, manteniendo toda la interacción dentro de una misma ventana.

En esta lección (Workshop 8) exploramos la creación de sistemas complejos como un CRM integrado, la automatización con clientes mediante hojas de cálculo y GitHub Issues, la planificación arquitectónica con IA multiagente (Predict), auditorías Red Team con claudekit, y la exploración de ecosistemas abiertos como Jan.ai para modelos fine-tuned.

En esta lección (Workshop 7), exploramos la automatización remota avanzada, la integración de MCPs (Model Context Protocol) y la orquestación multiagente con Multica y Hermes. Aprende a controlar tu entorno de desarrollo desde Telegram, publicar en redes sociales mediante APIs directas, actualizar dependencias de forma autónoma y ejecutar auditorías de seguridad con agentes especializados.

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%.