00:00:00Si usas Claude Code para desarrollar aplicaciones web, tienes que echar un vistazo a GSD,
00:00:04un framework de desarrollo basado en especificaciones de código abierto que se especializa en orquestar
00:00:08diferentes subagentes para completar proyectos siguiendo este modelo de desarrollo.
00:00:12A diferencia de los frameworks tradicionales basados en especificaciones que hemos visto en el canal,
00:00:15como el Método Beemap, SpecKits, Taskmaster y muchos otros, todos los frameworks tradicionales
00:00:20deben seguir una regla estricta: todo tiene que hacerse en una
00:00:24sola ventana de contexto. Por ejemplo, la planificación, investigación, desarrollo y verificaciones
00:00:29deben realizarse en un único contexto. Pero eso conlleva un problema muy importante,
00:00:33que es la saturación del contexto: a mayor consumo de tokens en una sola ventana,
00:00:38menor es la precisión. La solución es usar subagentes para
00:00:42delegar la planificación, investigación, desarrollo y verificaciones a sus propios agentes,
00:00:47donde cada uno tendrá su propio contexto limpio para completar las tareas una por una.
00:00:51GSD se convierte básicamente en un orquestador que dirige a esos subagentes siguiendo
00:00:55el desarrollo basado en especificaciones, guiando a la IA desde una idea inicial hasta una
00:01:00aplicación lista para producción paso a paso. Esto significa que sí, consumiremos más tokens,
00:01:04pero el nivel de precisión que obtendremos será mucho mayor comparado
00:01:07con hacerlo todo en un solo contexto. Por eso, en este video, voy a mostrarte
00:01:11exactamente cómo configurar el framework GSD en tu Claude Code, enseñándote cómo
00:01:15tomar una idea y construir sobre aplicaciones existentes o nuevas,
00:01:19y cómo dar forma a esa idea que intentas crear usando los agentes de investigación
00:01:23y planificación que incluye. Una vez definida la idea, pasaremos a la
00:01:27implementación, donde contamos con un ejecutor para realizar las tareas con agentes paralelos corriendo
00:01:32al mismo tiempo. Cada agente tiene su propia ventana de contexto y confirma cada tarea
00:01:37que finaliza. Además, cada vez que completa una tarea, activa a otro agente
00:01:41para verificar que el trabajo cumpla con los objetivos establecidos. Y lo más importante,
00:01:45tras completar una fase, te mostraré cómo iterar por cada etapa,
00:01:49como discutir, planificar, ejecutar y verificar paso a paso, ciclo tras ciclo, hasta completar
00:01:55el hito completo de forma autónoma sin bucles manuales. Eso es básicamente lo que veremos
00:02:00en este video. Si te interesa, ¡empecemos! Antes de comenzar, una rápida
00:02:04introducción para los nuevos: mi nombre es Eric. He trabajado años como ingeniero de software senior
00:02:09en empresas como Amazon, AWS y Microsoft. He creado este canal de YouTube para compartir
00:02:15todo lo aprendido en el camino, desde IA y programación hasta automatización, Web3 y carrera profesional,
00:02:22todo desglosado en tutoriales prácticos que puedes seguir. Así que si estás listo
00:02:27para subir de nivel, visita mi canal y suscríbete. Ahora, volvamos al video.
00:02:32Muy bien. Lo primero que haremos es ir al repositorio de GSD.
00:02:36Aquí se explica exactamente cómo instalarlo en tu máquina local. Voy a copiar
00:02:40este comando, vuelvo a la terminal de mi proyecto actual,
00:02:44y pego el comando para instalarlo localmente.
00:02:49Le digo que sí, que lo instale. Y aquí vemos que debemos
00:02:53elegir si usaremos Claude Code, Open Code o ambos. Elegiré solo uno por ahora,
00:02:57Claude Code, para esta demostración. Luego pregunta dónde me gustaría instalarlo.
00:03:02Prefiero instalarlo de forma global para que esté disponible en todos los proyectos. Bien. Y
00:03:07tras elegir eso, verás que GSD incluye una línea de estado con el nombre del modelo,
00:03:12la tarea actual y el uso de la ventana de contexto. ¿Mantenemos la actual o
00:03:17la reemplazamos por la línea de estado de GSD? Aún no he visto la de GSD,
00:03:22así que elegiré la opción número dos. Echemos un vistazo a
00:03:26cómo se ve la línea de estado de GSD. Abriré mi sesión de Claude Code y,
00:03:31aquí mismo, puedes ver la línea de estado actual de GSD. Por supuesto, si no te gusta
00:03:37esta versión y prefieres la mía, puedes ver este video de aquí, donde
00:03:41te muestro exactamente cómo personalizar tu línea de estado para que se vea así. Pero,
00:03:46si prefieres quedarte con la de GSD, adelante con esa opción.
00:03:49Una vez instalado GSD, simplemente escribimos "gsd". Como ves,
00:03:54ya tenemos todos los comandos personalizados dentro de nuestra terminal de Claude Code. Bien.
00:03:58Tras la instalación, lo siguiente es intentar inicializar nuestro proyecto.
00:04:02Si empiezas desde cero, usa "gsd new project". Pero si
00:04:06ya tienes un proyecto existente, lo primero es ejecutar este comando.
00:04:10Esto activa varios subagentes para analizar el stack, la arquitectura, las convenciones
00:04:15y preocupaciones. Luego usamos ese comando para conocer toda la base de código y hacer preguntas
00:04:20sobre lo que queremos añadir y así planificar el diseño. En este caso,
00:04:24usaré este comando primero para mapear toda la base de código. Aquí
00:04:28puedes ver que activará cuatro agentes mapeadores en paralelo para procesar
00:04:32todo el código y entender el stack tecnológico, la arquitectura, convenciones y posibles problemas,
00:04:38analizando cada detalle de nuestra aplicación. Esperemos un
00:04:42momento a que los agentes terminen de mapear en paralelo. Muy bien.
00:04:46El mapeo de la base de código ha terminado. Ahora voy a
00:04:50reiniciar mi sesión de Claude Code porque la ventana de contexto actual
00:04:54está ya por la mitad, ¿verdad? Así que la cerraré, limpiaré la
00:04:59terminal y reiniciaré la sesión para empezar de cero ahora que ya mapeamos
00:05:04todo. No te preocupes, porque el mapeo ya se guardó en un estado. Puedes
00:05:09verlo en la carpeta ".planning". Verás que dentro hay un archivo de la base de código
00:05:13que resume todo lo que tenemos en la aplicación: la arquitectura,
00:05:17las preocupaciones, las convenciones, las integraciones... todo queda almacenado
00:05:23en esta carpeta para no perder el rastro del estado actual del mapeo. Bien.
00:05:28Con el mapeo listo, es hora de inicializar el proyecto.
00:05:32Lo que ocurrirá es que me hará una serie de preguntas para
00:05:36entender mi idea, qué funciones nuevas vamos a añadir, y luego
00:05:39activará múltiples subagentes en paralelo para investigar el dominio que queremos construir.
00:05:43También te ayudará a extraer requisitos y a crear una hoja de ruta con
00:05:47las fases necesarias para hacerlo realidad. Eso es lo que
00:05:51haremos ahora: copiaré este comando y lo pegaré aquí para intentar
00:05:56inicializar nuestro proyecto. Como ves, detecta que es un proyecto "brownfield",
00:06:00que ya tiene código y el mapeo realizado. El repositorio Git existe,
00:06:05pero aún no hay un archivo "project.md" de planificación. Así que me pregunta:
00:06:10"Veo que tienes un proyecto con el código ya mapeado. Según el archivo claude.md,
00:06:14entiendo el contexto de negocio, ¿qué quieres que construya ahora?". Como
00:06:18ya tengo una funcionalidad en mente, que es crear un panel de control para
00:06:23el sistema de administración... este es un archivo MD corto que redacté con IA
00:06:29para crear un panel de administrador mínimo, una nueva pestaña en la barra lateral existente,
00:06:34que ofrezca herramientas esenciales para gestionar usuarios y soporte técnico al lanzarse.
00:06:39Aquí puedes ver algunas de las funciones que pedí, las características del MVP,
00:06:42los mockups de la interfaz y todo ese tipo de detalles técnicos. Muy detallado.
00:06:47Les recomiendo mucho que usen la IA, en este caso Claude, para que
00:06:52analice la aplicación y redacte un borrador sobre lo que intentan construir,
00:06:56detallando al menos los cambios de interfaz o las funciones deseadas para
00:07:00tener un plan claro sobre qué debe implementar Claude. Ahora,
00:07:04podría simplemente darle este plan a Claude para que lo haga, pero prefiero
00:07:08que GSD tome el mando y realice la investigación. Activará
00:07:13múltiples subagentes para investigar por nosotros y desglosar esta gran tarea
00:07:20en tareas más pequeñas y fáciles de implementar. Abriré mi terminal
00:07:25y diré que esto es exactamente lo que vamos a construir, haciendo referencia a este archivo.
00:07:28Diré: "Estoy planeando construir esto a continuación". Le doy
00:07:33a enviar y dejo que GSD nos ayude con
00:07:40la planificación. Aquí ves que lee la lista de tareas pendientes que queremos
00:07:44implementar en esta aplicación. Luego, activa una pregunta al usuario
00:07:48para confirmarme las especificaciones exactas. Dice que las
00:07:52especificaciones incluyen cuatro funciones: lista de usuarios, créditos, niveles y suplantación de identidad.
00:07:58¿Las construimos todas juntas o priorizamos un subconjunto para la primera iteración? Como ves,
00:08:02ha empezado a desglosar estas cuatro grandes funciones en otras más pequeñas. Yo
00:08:07diré: "Empecemos con algo sencillo, como la lista de usuarios y los créditos". Así
00:08:11que confirmo eso. Luego pregunta: "¿Cómo quieres verificar que el panel funcione bien?".
00:08:16Como el proyecto es muy nuevo, suelo hacer pruebas manuales, pero ves que
00:08:21pregunta por la cobertura de pruebas. Ofrece pruebas de integración para los
00:08:25endpoints de la API, o cobertura total con pruebas unitarias,
00:08:30de integración y de extremo a extremo (E2E). Me centraré solo en pruebas manuales
00:08:34por ahora y más adelante aumentaremos la cobertura. Así que respondo que sí
00:08:38a las pruebas manuales por el momento y envío la respuesta. Veamos qué
00:08:43hace GSD ahora. Continúa con más preguntas basadas en mi respuesta.
00:08:46"¿Cuándo necesitas que el panel esté listo?", porque en nuestra aplicación actual tengo un documento de
00:08:50análisis de negocio que menciona el 30 de enero como fecha de lanzamiento real.
00:08:56Me pregunta si se necesita antes del lanzamiento de la v2,
00:09:01que es el 30 de enero. Responderé que definitivamente lo quiero
00:09:05antes de esa fecha. Luego pregunta si queremos proceder con el archivo "project.md".
00:09:10Aún quiero seguir explorando y haciendo más preguntas. Bien. Una de las preguntas
00:09:14que hago es para descubrir qué lagunas faltan en nuestra especificación
00:09:19y qué es lo que vamos a hacer. Ves que activa múltiples subagentes para
00:09:22investigar la seguridad, la experiencia de usuario (UX) y las mejores prácticas, así como posibles fallos técnicos
00:09:28que podríamos haber pasado por alto. Aquí tienes la tabla completa
00:09:32que cubre todas las deficiencias. Por ejemplo, falta protección de middleware para el administrador,
00:09:37faltan cookies, el límite de velocidad es solo en memoria y faltan acciones de administración
00:09:43para eliminar usuarios. Además, la función de verificar si es administrador falla con otros usuarios. Queremos
00:09:49corregir estas brechas en el proyecto que vamos a implementar. Y aquí
00:09:52puedes ver la lista de correcciones que nos sugiere realizar. Lo que
00:09:57podemos hacer es revisar esto y ver si esas
00:10:02deficiencias detectadas tienen sentido. Si es así, podemos proceder a crear nuestro
00:10:06archivo "project.md" y empezar la implementación. Me pregunta de nuevo:
00:10:11"La investigación detectó brechas críticas de seguridad. ¿Cómo quieres que las gestione?".
00:10:15Diré que corrija las críticas, que es mi recomendación. Le doy
00:10:20a enviar para que Claude Code se asegure de que nuestro plan y especificación
00:10:24no olviden nada antes de generar el archivo "project.md". Cuando todo esté listo,
00:10:29podemos crear dicho archivo. Le digo que sí, pasemos al
00:10:33archivo "project.md". Claude Code empezará a crear el archivo de planificación
00:10:38para todo el proyecto. Esperemos un momento a que termine. Antes
00:10:42de seguir, quiero agradecer al patrocinador de hoy: Testbrite.
00:10:46Testbrite es un agente de IA diseñado específicamente para pruebas de software. Con el lanzamiento
00:10:51del MCP de Testbrite, ahora puedes usarlo directamente en tu IDE, ya sea Cursor, Windsurf,
00:10:57Claude Code y otros. La configuración es facilísima: solo añades la configuración en tus ajustes de MCP
00:11:02y listo. Lo que más me gusta de Testbrite es que no ejecuta pruebas a ciegas.
00:11:07Primero lee toda tu base de código, entiende la documentación y valida
00:11:11los resultados que producen tus agentes de IA. Genera automáticamente un plan de pruebas desde tu PRD,
00:11:16crea casos de prueba y asegura la cobertura sin intervención manual. A partir de
00:11:21ahí, ejecuta las pruebas y te envía informes detallados que muestran claramente qué falla
00:11:26y qué necesita atención. Hoy día, la mayoría de agentes de programación tienen un 42% de precisión. Pero con
00:11:32Testbrite MCP, los equipos han logrado subir la precisión en la entrega de funciones hasta el 93%. Si
00:11:38te interesa probarlo, puedes ver el video que hice al respecto o hacer clic en el enlace de la descripción.
00:11:42Volvamos al video. Una vez definido el alcance y creado
00:11:47el archivo "project.md", se nos pregunta por el modo de ejecución. Podemos usar el
00:11:52modo "YOLO", que aprobará y ejecutará todo automáticamente, o
00:11:56hacerlo más interactivo, para que tras cada paso podamos confirmar los cambios
00:12:01realizados antes de seguir. Elegiré el modo YOLO para no intervenir
00:12:04y dejar que el sistema complete todo. Pulso Enter para activar el
00:12:09modo YOLO. Ahora me pregunta por la profundidad: qué tan detallada debe ser la planificación.
00:12:14Podemos elegir un modo rápido (de 3 a 5 fases con 1 a 3 planes cada una) o
00:12:18ir por la vía estándar, un alcance más equilibrado con 5 a 8 fases
00:12:22y de 3 a 5 planes por fase. Elegiré la opción estándar,
00:12:26que es más equilibrada. No buscamos lanzar algo de forma apresurada,
00:12:30sino algo bien estructurado. Así que selecciono el número dos.
00:12:34Envío la respuesta. Como resultado,
00:12:38ahora nos pregunta por la ejecución. Podemos ejecutar los planes
00:12:42en paralelo, lo que significa que los planes independientes se ejecutan a la vez, o
00:12:46hacerlo de forma secuencial. Mi recomendación es que, si el tiempo no apremia,
00:12:51uses el modo secuencial, ya que abordará un plan tras otro
00:12:57en lugar de todos a la vez. Si en paralelo te quedas sin créditos, podrías
00:13:01quedarte con ambas tareas a medias. En cambio, en secuencial, tendrás tareas
00:13:06completadas. Si se acaban los créditos, al menos algunas estarán listas y podrás esperar
00:13:10o volver mañana para continuar con la ejecución de las tareas restantes
00:13:14una por una, sin tener todo el proyecto a medio terminar. Elegiré
00:13:18secuencial porque quiero ir paso a paso. Luego,
00:13:22sobre el seguimiento con Git: ¿queremos confirmar el documento de planificación en Git? Sí,
00:13:27definitivamente quiero llevar un registro de los documentos de planificación. Así que confirmo también
00:13:31y envío. Después me hace algunas preguntas adicionales como: "¿Quieres
00:13:35investigar antes de planificar?". Dije que sí, y también a verificar que los planes logren el objetivo
00:13:40antes de ejecutarlos. Además, sobre el verificador: "¿Verificar que el trabajo cumpla
00:13:46los requisitos tras cada fase?". También dije que sí. Y finalmente, la preferencia de modelo.
00:13:52Elegí la mayor calidad: Opus para investigación y hoja de ruta, aunque cueste más y sea más lento.
00:13:58Lo que sucede es que guarda todas estas configuraciones
00:14:03en el archivo "config.json". Este es el archivo de ajustes y podemos
00:14:07modificarlo literalmente para cualquier cambio futuro. Ahora, para no
00:14:12hacer este video demasiado largo, GSD nos lleva a la investigación. Verás que
00:14:16activa el sintetizador de investigación, que primero lanza varios subagentes
00:14:21para investigar. Una vez que la investigación completa termina,
00:14:26sintetiza todo lo hallado e intenta crear
00:14:30un informe de investigación basado en el proyecto que desarrollamos. Si estamos de
00:14:34acuerdo, GSD pasa a crear la hoja de ruta con los pasos exactos
00:14:39que seguiremos en todo el proyecto. Muy bien. Ya ha generado
00:14:43toda la hoja de ruta, con cinco fases y 36 requisitos mapeados para cubrir
00:14:49toda la V1. Por ejemplo, la base de datos, el esquema, el backend y luego la
00:14:54experiencia de usuario. Pregunta: "¿Te parece bien esta estructura de hoja de ruta?". Puedes
00:14:59revisarla y ver si falta algo. Si todo está correcto,
00:15:03simplemente digo "approve" (aprobar) y empiezo con los cambios. Una vez que el proyecto está
00:15:08inicializado, aquí ves todo el MVP de artefactos que crea. Está todo
00:15:13Así que todo está en la carpeta de planificación. Las cinco fases y los 36 requisitos están listos para construirse.
00:15:18Lo siguiente, si estamos de acuerdo con eso, vamos a empezar con la fase uno,
00:15:21empezar con la fase uno, una por una. Y una vez que creas un plan para la fase uno,
00:15:25aquí puedes ver que también se han desplegado múltiples sub-agentes para crear este plan para la fase dos,
00:15:29la fase tres, todo en uno, ¿verdad? Así que puedes tener a todos los sub-agentes aquí para,
00:15:34crear un nuevo plan o crear un plan para cada fase que tengamos, ¿bien? Una vez que creas una fase,
00:15:38lo que puedes hacer ahora es básicamente pasar a la implementación. Ahora, como mencionamos,
00:15:41queremos ejecutar esto secuencialmente con un contexto limpio, y no quiero que tenga que terminar
00:15:46un plan y pedirme que lo verifique, ¿vale? Quiero que complete todo después de eso,
00:15:52y luego podamos verificarlo todo. No quiero verificar en cada fase.
00:15:55Quiero verificar después de que todas las fases se completen. Ahora, lo que puedes hacer aquí es comunicarle
00:15:59esto a Claude y decirle: "Vale, quiero ejecutar las fases de GSD secuencialmente con un contexto limpio".
00:16:03Y aquí básicamente lo que va a hacer es ejecutar cada fase una por una con un contexto
00:16:08de sesión nuevo para cada plan. Y básicamente puedes ver que lo que va a pasar es que
00:16:13va a ejecutar nuevos sub-agentes usando el ejecutor de GSD. Y luego cada agente aquí recibe 200K
00:16:18de contexto limpio. Así no se mezcla con el plan anterior que completó el otro sub-agente.
00:16:23Y luego lo que va a suceder aquí es que se van a ejecutar los 13 planes de forma
00:16:27totalmente autónoma usando GSD. Así tenemos nuestro esquema de base de datos, nuestro backend, nuestra UI, gestión de créditos
00:16:34y también el visor de registros de auditoría, ¿vale? Todo ejecutándose uno por uno. Y aquí simplemente
00:16:39voy a limpiar el contexto, omitir los permisos y ejecutar esto paso a paso. Muy bien, ahora
00:16:44puedes ver que va a ejecutar la fase uno para la implementación del panel de administración.
00:16:48Y esperemos un poco hasta que todo esté totalmente implementado. Bien, después de que todas las
00:16:53fases se han implementado usando GSD, este es el aspecto del resultado. Justo aquí, verán que estoy
00:16:57en la pestaña de administración y estamos en la de gestión de usuarios. Aquí podemos ver a todos los usuarios
00:17:03que tenemos en nuestras plataformas actuales. Puedo buscar un usuario. Por ejemplo, si escribo
00:17:07"test", aquí pueden ver que nos muestra el primer resultado justo aquí. Y digamos que si
00:17:12borro esto, verán que vuelve a mostrar la lista completa. También puedo filtrar por
00:17:17niveles. Por ejemplo, ¿quiénes están usando el nivel gratuito? Puedo verlo,
00:17:21y puedo ver su uso de créditos, cuándo se registraron por última vez, y también ajustar los créditos,
00:17:25¿verdad? Puedo ver los detalles de la cuenta, como ven aquí, o también puedo
00:17:29ajustar los créditos, que es lo que ven aquí, ¿vale? Puedo ayudar a la gente a ajustar los eventos,
00:17:33establecer el crédito, establecer límites de crédito personalizados y también el uso
00:17:38actual, además de dar un motivo. Y aquí, en el registro de auditoría, podemos hacer un seguimiento.
00:17:42Por ejemplo, digamos que selecciono todos los niveles, y actualmente estoy logueado como este usuario
00:17:48de aquí, configurado como admin. Y digamos que hago clic en este e intento ajustar los créditos,
00:17:52digamos que voy a aumentar esta cantidad, por ejemplo, en 50 créditos, ¿vale?
00:17:57Pasando de los 510 créditos actuales a 560 créditos. Y todo lo que tenemos que hacer
00:18:03abajo es simplemente añadir un motivo. Por ejemplo, voy a poner "test", y ese
00:18:07es el motivo aquí, y simplemente aplico el ajuste. Y lo que ocurre aquí, como ven,
00:18:11es que tenemos una notificación indicando que ha subido de 510 a 560, y también se activa
00:18:17el re-renderizado de ese componente. Y pueden ver en la tabla que también se refleja el cambio,
00:18:21de 510 a 560, que es lo que tenemos ahora, ¿de acuerdo? Así podemos verificar que la función
00:18:27está totalmente operativa. También podemos echar un vistazo a la parte de analíticas de administración,
00:18:31donde podemos ver las analíticas de todo lo que tenemos en nuestras aplicaciones. Se ve cuándo
00:18:36se actualizó por última vez, así como todas las estadísticas: usuarios totales, usuarios de pago,
00:18:40así como los diferentes niveles, el uso de créditos y los usuarios más activos. También podemos
00:18:46ver los registros de auditoría, lo que significa que todos los eventos y acciones que realizamos
00:18:51para ajustar los créditos de los usuarios, podemos verlos directamente aquí dentro
00:18:55del registro de auditoría. Por ejemplo, ajustar créditos, sincronizar créditos, quiénes son los usuarios objetivo
00:19:00y qué detalles modificamos. Podemos verlo en el historial de auditoría. Así que básicamente
00:19:05así es como puedes usar GSD para seguir todo el espectro de desarrollo y completar
00:19:09una funcionalidad. Ahora, si te ha gustado este vídeo, asegúrate de darle a "like". Y por supuesto,
00:19:13si tienes curiosidad sobre cómo logré que este componente se re-renderizara tras aplicar
00:19:16el crédito sin refrescar la página, la respuesta corta es que usé Zustand, que es una
00:19:21herramienta de gestión de estado para centralizar el estado de toda nuestra aplicación, de modo que cuando
00:19:26una parte del componente se actualiza, también activa las actualizaciones en este estado actual.
00:19:30Así que si tienes curiosidad sobre cómo puedes añadir esa gestión de estado en tus
00:19:34propias aplicaciones, te recomiendo mucho este curso de siete horas que hice sobre cómo
00:19:38puedes construir una aplicación completa en NestJS lista para producción, escalable y paso a paso.
00:19:44Dicho esto, si encontraste valor en este vídeo, por favor no olvides darle a "like".
00:19:47Considera suscribirte porque en el futuro compartiré todas las lecciones y técnicas que puedes
00:19:51usar para construir aplicaciones listas para producción usando IA para programar y crear
00:19:55aplicaciones profesionales como esta. Con esto dicho, nos vemos en el próximo vídeo.