1. El Nuevo Programador y el Desarrollo Asistido por IA [16]

thumbnail El "nuevo programador" integra herramientas y paradigmas asistidos por inteligencia artificial (IA) para ampliar sus capacidades de desarrollo.

1.1. Fundamentos del Desarrollo con IA [16]

  1. El nuevo programador es aquel que combina los fundamentos de la programación con herramientas y paradigmas asistidos por IA. [17]
  2. El objetivo es ampliar el perfil del programador para incorporar estas nuevas capacidades. [20]
  3. La primera clase cubrió dos capas iniciales: [21]
    1. Fundamentos de IA: Desarrollar con IA manteniendo el control, sin cederlo a la herramienta. [21]
    2. Ingeniería de contexto (harness): El valor del contexto es crucial para la capacidad de los agentes de IA. [22]

1.2. Repaso del Día 1: Proyecto y Herramientas [24]

  1. El proyecto inicial era un diario de estudio que registraba rachas, el cual se seguiría ampliando. [25]
  2. Se logró una primera aplicación con HTML, JavaScript y CSS usando un prompt inicial. [27]
  3. Se añadió el concepto de agente con un archivo Agents MD para definir cómo debe "pensar" el agente. [27]
  4. Se incorporó memoria persistente para que el agente iterara y se modificara con la evolución del proyecto. [28]
  5. Todo esto se realizó utilizando OpenCode, una herramienta que permite trabajar con comandos y se actualiza fácilmente. [29]

2. Harness Avanzado: Comandos Personalizados y Skills [58]

thumbnail

El harness avanzado permite delegar más trabajo a los agentes de IA mediante la creación de comandos personalizados y habilidades (skills) que automatizan tareas repetitivas y proporcionan conocimiento contextual.

2.1. Comandos Personalizados [71]

  1. Los comandos personalizados son prompts reutilizables que automatizan tareas repetitivas. [71]
    1. Se crean para evitar lanzar el mismo prompt una y otra vez. [74]
    2. Esto asegura que una tarea se realice siempre de la misma manera deseada. [101]
  2. Para crear un comando personalizado en OpenCode, se sigue una estructura específica: [85]
    1. Se crea el directorio .opencode/commands. [85]
    2. Dentro, se crea un archivo con el nombre del comando (por ejemplo, feature.md). [85]
    3. El archivo contiene la descripción del comando y el prompt a automatizar, usando $arguments para añadir funcionalidad. [113]
  3. Un ejemplo de uso es el comando feature para añadir nuevas funcionalidades. [103]
    1. Este comando planifica una nueva funcionalidad antes de tocar el código, utilizando el modo plan. [116]
    2. El modo plan permite al agente razonar y repensar la tarea antes de ejecutarla, requiriendo la aprobación del usuario. [118]
    3. Al ejecutar feature "mostrar el total de minutos estudiados esta semana", el agente cambia al modo plan y genera un plan de implementación. [133]
    4. Después de revisar el plan, se puede cambiar al modo Build (construcción) para que el agente implemente la funcionalidad. [144]
  4. El comando diff permite ver las diferencias en el código después de la implementación, similar a cómo funciona Git. [151]
    1. Tras implementar la funcionalidad de "mostrar el total de minutos estudiados esta semana", la aplicación muestra los minutos acumulados y actualiza la racha de estudio. [157]

2.2. Agent Skills (Habilidades del Agente) [166]

  1. Las Agent Skills son conjuntos de instrucciones reutilizables, similares a los comandos, pero con una diferencia clave. [166]
    1. A diferencia de los comandos, que deben ser invocados explícitamente, el agente puede decidir usar una skill por sí mismo si la tarea lo requiere. [177]
    2. Esto le da al agente un "conocimiento" o "habilidad" para aplicar de forma autónoma. [185]
  2. Para implementar una skill, se crea una carpeta .agents/skills en la raíz del proyecto. [190]
    1. Dentro de skills, se crea una carpeta con el nombre de la skill (por ejemplo, local-dates). [193]
    2. Dentro de esa carpeta, se crea un archivo skill.md que contiene el prompt con el nombre y la descripción de la skill. [197]
  3. Un ejemplo es la skill local-dates, diseñada para que el agente entienda cómo trabajar con fechas. [180]
    1. La descripción de la skill indica: "Úsala siempre que escribas, modifiques o revises código que trabaje con fechas, días, semanas o rachas en el diario de estudio". [208]
    2. Al pedirle al agente que "muestre cuántos días he estudiado este mes" usando el comando feature, el agente reconoce la relación con fechas y utiliza automáticamente la skill local-dates. [243]
  4. Las skills pueden ser invocadas explícitamente con @ (en OpenCode v2) o / (en versiones anteriores), pero su principal ventaja es la invocación autónoma por parte del agente. [229]

2.3. Skills de Terceros [255]

  1. Además de crear skills propias, se pueden utilizar skills de terceros creadas por la comunidad o por empresas como Microsoft o Vercel. [255]
  2. La plataforma Skills.com es un recurso oficial para encontrar y utilizar estas habilidades. [257]
    1. Es importante leer la descripción de la skill para asegurar que se ajusta al proyecto y que el código no es malicioso. [264]
  3. La instalación de skills de terceros se realiza mediante npx y un asistente que guía el proceso. [279]
    1. Se puede elegir instalar la skill a nivel global (para cualquier proyecto) o a nivel de proyecto. [290]
  4. Un ejemplo es la skill frontend-design, que mejora el diseño de la aplicación. [268]
    1. Al invocarla explícitamente con @frontend-design y el prompt "con lo que sabes mejora el diseño", el agente rehace la aplicación para mejorar su estética. [301]
    2. El agente también edita la memoria (memory) para registrar los cambios y aprendizajes. [313]
    3. Después de aplicar la skill, la aplicación muestra un diseño mejorado, como un efecto de papel y cambios en la interfaz. [320]
  5. El agente, una vez que tiene cargada una skill de diseño, la utilizará por defecto cada vez que se le pida diseñar. [323]
  6. Existen otras skills recomendadas, como las para encontrar mejores skills, hacer preguntas para mejorar casos de uso, o la de Front Design creada por Anthropic. [326]

3. Model Context Protocol (MCP) [333]

thumbnail

El Model Context Protocol (MCP) es un estándar que permite a los agentes de IA conectarse a servicios de terceros, proporcionándoles capacidades para interactuar con sistemas externos de forma autónoma.

3.1. ¿Qué es el MCP? [333]

  1. El MCP es un protocolo estandarizado que permite a los agentes conectarse a servicios de terceros. [333]
  2. Esto significa que el agente puede acceder a información y funcionalidades externas sin que el programador tenga que proporcionarle todos los detalles. [339]
    1. Por ejemplo, si se tiene una base de datos externa, en lugar de describirle la base de datos al agente, se le conecta a una API que ya sabe cómo interactuar con ella. [337]
    2. Así, el agente puede conectarse, buscar información y adaptar el contenido de forma proactiva. [341]

3.2. Implementación y Uso del MCP [343]

  1. Para implementar un MCP en OpenCode, se crea un archivo opencode.json en la raíz del proyecto. [345]
    1. Este archivo contiene la configuración del MCP, incluyendo el servidor y los datos específicos. [348]
    2. El MCP es un estándar abierto, reutilizable y seguro, con un ecosistema creciente de empresas que crean sus propios MCPs. [350]
  2. Un ejemplo es el MCP Chrome DevTools, que permite a la aplicación conectarse a Chrome y realizar acciones. [354]
    1. La configuración del MCP para Chrome DevTools se copia y pega en opencode.json. [360]
    2. Una vez configurado, el agente carga el MCP automáticamente y puede utilizarlo de forma autónoma si la tarea lo requiere. [369]
    3. Se puede deshabilitar un MCP si no se desea que funcione en un momento dado. [373]
  3. Al lanzar un prompt como "utiliza Chrome DevTools, abre index en Chrome, registra las sesiones, comprueba la racha, revisa la consola si hay errores, haz una captura en tamaño móvil", el agente ejecuta estas acciones automáticamente. [376]
    1. El agente abre Chrome, realiza el redimensionamiento, registra sesiones, verifica la racha, revisa la consola y guarda una captura de pantalla. [386]
    2. El resultado de la ejecución muestra la racha actual, los minutos de estudio, la ausencia de errores en la consola y la captura de pantalla guardada. [397]
  4. El MCP permite realizar pruebas y manipulaciones de la web sin interacción manual. [405]
  5. Se puede mejorar el comportamiento del agente añadiendo una capa de verificación en los agents.md. [408]
    1. Se le indica al agente: "después de cada cambio, verifica con el MCP de Chrome DevTools todo lo que hemos modificado". [412]
    2. Esto permite al agente utilizar el MCP para validar automáticamente los cambios. [415]
  6. Otros MCPs esenciales incluyen: [417]
    1. Context Seven: Proporciona documentación actualizada de desarrollo (Next.js, Cloud Code, Playwright, etc.) para que el agente trabaje con las versiones más recientes. [419]
    2. MCPs para conectarse a GitHub, Figma, Supabase, entre otros. [424]

4. Spec Driven Development (SDD): Desarrollo Guiado por Especificaciones [427]

thumbnail

El Spec Driven Development (SDD) es una metodología de desarrollo profesional que guía la creación de software mediante especificaciones detalladas, asegurando que el agente de IA desarrolle de manera controlada y alineada con los requisitos.

4.1. Concepto de SDD [427]

  1. SDD significa Spec Driven Development (Desarrollo Guiado por Especificaciones). [429]
  2. Esta metodología se basa en definir especificaciones detalladas que guían el desarrollo, asegurando que las funcionalidades no sean solo prompts básicos. [436]
  3. El SDD define lo que el sistema debe hacer, basándose en requisitos, límites y criterios, para guiar el resultado final. [441]
  4. El flujo de desarrollo clásico (análisis, diseño, implementación, validación, despliegue y mantenimiento) se adapta al SDD: [443]
    1. El "análisis" se convierte en la "especificación". [449]
    2. La "planificación" se convierte en el "diseño". [450]

4.2. Taxonomía del SDD [452]

  1. Existen diferentes formas de aplicar el SDD: [453]
    1. Spec First: Se escriben las especificaciones antes de programar, pero la especificación "muere" una vez implementada. [455]
    2. Spec and Control: Se crea una especificación que guía el desarrollo, se actualiza con las modificaciones y permite consultar el historial de funcionalidades. [461]
    3. Spec as Source: La especificación es la única fuente de verdad y no se toca el código directamente. [463]
  2. La metodología Spec and Control es la más recomendada para el desarrollo profesional, ya que aporta valor al mantener un registro y control del proceso. [468]
  3. Esta metodología se basa en ERS (Especificación de Requisitos de Software), un método antiguo para escribir requisitos claros y no ambiguos. [468]

4.3. Los Siete Pasos del SDD [472]

  1. El SDD se compone de siete pasos que se realizan de forma secuencial. [473]
  2. Es crucial entender los fundamentos del SDD para controlar la IA y evitar que desarrolle cosas sin sentido. [486]
  3. Los pasos son: [475]
    1. Constitución: Definir el fichero de conocimiento general del agente, incluyendo principios innegociables del proyecto. [475]
    2. Especificación: Crear la nueva funcionalidad deseada, haciendo que el agente genere preguntas para refinar la idea. [529]
    3. Clarificación: Utilizar el agente para revisar la especificación en busca de ambigüedades o contradicciones. [570]
    4. Planificación: Generar un plan de implementación basado en la Constitución y la especificación, detallando los archivos a modificar y las funciones a crear. [592]
    5. Implementación: Indicar al agente que programe directamente las tareas definidas en el plan. [616]
    6. Tareas (Tasks): Crear una lista de tareas a partir de la planificación, permitiendo al agente marcar las tareas completadas. [620]
    7. Validación: Recorrer la especificación y lanzar pruebas para verificar que la funcionalidad cumple con los requisitos. [644]

4.4. Implementación de los Pasos del SDD [489]

  1. Paso 1: Constitución [489]
    1. Se crea una carpeta docs y dentro un archivo Constitution.md. [494]
    2. Se le pide al agente que genere la constitución del proyecto, incluyendo seis principios innegociables y cortos. [506]
    3. Un ejemplo de constitución incluye principios como "simplicidad", "la especificación manda", "lógica separada de la interfaz", "tests" e "idiomas". [519]
    4. Se añade una regla en el archivo agents.md para que el agente lea la constitución y las especificaciones. [522]
  2. Paso 2: Especificación [528]
    1. Se crea una carpeta specs y dentro una subcarpeta 001 (para la primera especificación). [533]
    2. Se le pide al agente que redacte la especificación de una nueva funcionalidad, como un "mapa de calor tipo GitHub". [538]
    3. El agente hace preguntas para refinar la idea, y el usuario puede decidir las respuestas o dejar que el agente las decida. [543]
    4. El resultado es un archivo spec.md dentro de specs/001/mapa-de-calor con requisitos funcionales detallados. [556]
  3. Paso 3: Clarificación [568]
    1. Se le pide al agente que revise la especificación como un QA profesional, listando ambigüedades, contradicciones y requisitos. [573]
    2. El agente identifica hallazgos y posibles bloqueos, lo que demuestra que los modelos no siempre llegan a la mejor conclusión a la primera. [578]
    3. El usuario puede decidir cómo resolver estas contradicciones o dejar que el agente lo haga. [582]
  4. Paso 4: Planificación [587]
    1. Se le pide al agente que lea la Constitución y la especificación (ya clarificada) y genere un plan, sin escribir código. [594]
    2. La planificación genera un archivo plan.md dentro de la carpeta de la especificación, detallando los archivos a tocar y las funciones a crear. [599]
    3. Esto permite revisar el plan antes de que el agente ejecute el código. [614]
  5. Paso 5 y 6: Tareas e Implementación [616]
    1. Se le pide al agente que implemente la primera tarea de la lista del plan. [616]
    2. Esto genera un archivo task.md con la lista de tareas. [620]
    3. El agente desarrolla la primera tarea y la marca como completada. [630]
    4. Se puede pedir al agente que implemente todas las tareas, lo que le permite leer los ficheros y ejecutar cada una de ellas. [633]
    5. Este proceso asegura que el desarrollo sea controlado y evita la pérdida de control en proyectos grandes. [635]
    6. El SDD crea una "memoria a largo plazo" del proyecto, permitiendo al agente recordar todos los pasos dados para cada funcionalidad. [641]
  6. Paso 7: Validación [644]
    1. Se le pide al agente que lance pruebas y verifique la implementación con las Chrome DevTools. [646]
    2. Esto permite lanzar tests manuales y ver visualmente cómo la web se modifica. [647]
    3. El agente genera y pasa los tests, y luego ejecuta las Chrome DevTools para probar los cambios. [653]
    4. Si la especificación no se cumple, se itera para seguir mejorando. [654]

5. Ejercicios y Próximos Pasos [659]

thumbnail

Se proponen ejercicios para consolidar el aprendizaje del SDD y se adelanta el tema de la próxima clase: el desarrollo con múltiples agentes coordinados.

5.1. Ejercicios Propuestos [669]

  1. Transformar cada fase del SDD en comandos o skills. [669]
    1. Los apuntes del curso incluirán estos comandos ya creados para facilitar el proceso. [674]
  2. Implementar una nueva especificación utilizando el flujo completo de SDD. [676]

5.2. El Nuevo Programador y el Futuro [678]

  1. El curso ha cubierto hasta la capa cuatro del "nuevo programador": [678]
    1. Harness avanzado (comandos, skills, MCPs). [680]
    2. Development Driven by Specification (SDD). [681]

5.3. Próxima Clase: Multiagentes y Orquestación [682]

  1. La próxima clase se centrará en la coordinación de múltiples agentes de IA. [682]
    1. Estos agentes se coordinarán entre sí para utilizar automáticamente todas las herramientas aprendidas (habilidades, MCPs, comandos, memoria, SDD). [684]
    2. La analogía utilizada es la de "Gandalf llegando con el ejército de los Rohirrims", donde los Rohirrims son el ejército de agentes. [686]
  2. El objetivo es convertir al estudiante en el "programador definitivo" mediante el uso de multiagentes, bucles y orquestación. [692]