E084_Cómo integrar GitHub Spec Kit en PROYECTOS YA EXISTENTES
Ep. 84

E084_Cómo integrar GitHub Spec Kit en PROYECTOS YA EXISTENTES

Episode description

Integración de IA en proyectos legacy: En este episodio de BIMPRAXIS, exploramos cómo integrar herramientas de inteligencia artificial en un proyecto de 15 años sin comprometer su estabilidad. A través de un caso real, analizamos los desafíos y oportunidades que surgen al aplicar IA en un entorno legacy, y cómo la colaboración entre humanos y máquinas puede llevar a soluciones innovadoras y eficientes. Descubriremos cómo la IA puede ayudar a documentar y preservar la esencia de un programa, lo que podría marcar el principio del fin del código heredado.

Download transcript (.srt)
0:09

Buenas, esto es BIMPRAXIS, el podcast donde el

0:15

BIM se encuentra con la inteligencia artificial.

0:20

Exploramos la ciencia, la tecnología y el futuro

0:23

desde el enfoque de la arquitectura, ingeniería y

0:26

construcción.

0:28

¡Empezamos!

0:36

Muy buenas, bienvenidas, bienvenidos a un nuevo episodio

0:40

de BIMPRAXIS.

0:41

Hoy os traemos la anatomía de cómo integrar

0:45

herramientas de IA en un código de hace

0:48

15 años sin destruir el proyecto o en

0:51

el intento.

0:51

Y a ver, es un desafío que representa,

0:54

o sea, el verdadero campo de batalla de

0:56

la ingeniería actual.

0:58

Totalmente.

0:59

Porque, seamos sinceros, generar un bloque de código

1:02

desde cero en un entorno aséptico es, bueno,

1:05

un truquito que cualquier modelo de IA te

1:07

hace hoy en día antes del desayuno.

1:09

La fricción real, la de verdad.

1:11

Ocurre cuando chocamos con el mundo real, ¿no?

1:14

Claro, exacto.

1:14

Y por eso nuestra inmersión profunda de hoy

1:17

se centra en un caso real.

1:19

El que documentó el desarrollador Dan Delimarski y

1:23

el ecosistema donde él decide experimentar.

1:25

Ojo, no es un lienzo en blanco, es

1:28

su propio blog personal.

1:30

Un proyecto que lleva vivo y funcionando nada

1:33

menos que 15 años.

1:34

Que se dice pronto.

1:35

Ya te digo, 15 años en el mundo

1:37

del desarrollo web no es que sea mucho

1:39

tiempo.

1:40

Es que es una era geográfica.

1:41

Es una era geológica entera.

1:42

Han nacido y muerto decenas de lenguajes ahí

1:45

en medio.

1:46

Sí, sí.

1:47

Y la herramienta que utiliza para este experimento

1:49

es la línea de comandos, la CLI de

1:52

GitHub's PetKit.

1:53

Su objetivo sobre el papel es, a ver,

1:56

bastante mumbano.

1:57

Quiere añadir una nueva funcionalidad a este blog

2:00

milenario.

2:02

Específicamente quiere una lista de lectura, rollo la

2:05

página de libros de la escritora Molly White,

2:07

para tener un registro visual de lo que

2:09

va leyendo.

2:10

Vale, vamos a desglosar.

2:11

Vamos a desglosar esto, porque el contexto técnico

2:13

aquí lo es absolutamente todo.

2:15

El blog de Den usa un generador de

2:18

sitios estáticos que es Hugo, emplea Tailwind CSS

2:21

y además corre sobre un tema modificado.

2:24

Tela, ¿no puedes entrar ahí de cualquier manera?

2:27

Claro, para que una IA no entre ahí

2:30

como un elefante en una cacharrería, primero necesita

2:33

límites absolutos.

2:35

Es exactamente igual que invitar a un contratista

2:37

a reformar una cocina en una casa centenaria.

2:40

Muy buena analogía.

2:41

Si antes de mirar a Zulejos, lo primero

2:43

que tienes que hacer es sentarte con él

2:45

y decirle, oye, estos son los muros de

2:47

carga.

2:48

Bajo ninguna circunstancia puedes tirar estas paredes, porque

2:51

si lo haces, se nos cae el edificio

2:53

entero encima.

2:54

Es que es tal cual.

2:55

Si dejas a un modelo de lenguaje actuar

2:57

por libre, su instinto siempre va a ser

2:59

añadir la tecnología más moderna con la que

3:02

lo han entrenado.

3:03

Por eso, el primer paso en SpecKit no

3:05

es pedirle que programe, sino usar un comando

3:07

que es la barra Constitution.

3:10

¡Ostras!

3:10

Ahí es donde redacta.

3:11

Esta es la constitución del proyecto.

3:13

Es un documento que marca esas restricciones inquebrantables.

3:16

Y las reglas de DENZ fueron tajantes.

3:19

O sea, primera regla, es un sitio estático

3:22

puro.

3:23

Solo se puede usar Hugo.

3:25

Segunda regla, cualquier estilo visual tiene que usar

3:28

las convenciones que ya existen.

3:31

Pero la tercera regla es la que me

3:33

parece clave.

3:34

A ver.

3:35

Cero dependencias externas.

3:38

¿Absolutamente prohibido?

3:40

Añadir un nuevo archivo Package .json.

3:43

Claro.

3:43

Y aquí me quiero detener, porque para la

3:45

gente que no está todo el día picando

3:47

código, ¿por qué añadir un simple gestor de

3:50

paquetes es un pecado capital en este contexto?

3:53

Pues porque meter un Package .json es abrir

3:56

la caja de Pandora del ecosistema Node .js.

3:58

Es invitar al proyecto a ese agujero negro

4:01

que es la carpeta Node Models.

4:02

Te llenas de archivos sin darte cuenta.

4:05

Exacto.

4:05

Instalas una tontería para formatear un texto y

4:08

de repente ¡pum!

4:09

Descargas cincuenta mil pequeños archivos de terceros que

4:12

tienes que mantener y vigilar por temas de

4:14

seguridad.

4:15

Madre mía.

4:16

Y el blog de Derm es estático.

4:18

Eso significa que no procesa bases de datos

4:20

ni lógicas complejas.

4:22

Solo entrega un HTML casi a la velocidad

4:24

de la luz.

4:25

Si añades dependencias externas, te cargas esa pureza

4:28

que lleva quince años protegiendo.

4:31

Entendido.

4:31

La pureza manda.

4:33

Pero, revisando esto, hay un detalle que me

4:35

dejó, bueno, dándole vueltas.

4:37

Durante esta fase de la Constitución, ¿qué es

4:39

lo que se puede hacer?

4:39

Durante la Constitución, Derm usó Cloud Sonnet 4

4:41

y la IA sugerió por su cuenta una

4:45

regla ética.

4:46

Ah, sí, lo vi.

4:47

Decía, en plan, todo el contenido debe estar

4:50

escrito por humanos y ser genuino.

4:52

Y a simple vista parece una regla fantástica,

4:54

¿verdad?

4:55

Sí, suena muy bien.

4:56

Yo la habría dejado, pero Derm la eliminó

4:59

inmediatamente.

5:00

¿Por qué rechazar una buena práctica ética así?

5:03

Pues porque en el ámbito puramente de ingeniería,

5:06

la ética del contenido es ruido.

5:09

Ruido puro.

5:10

Derm la descartó porque es irrelevante para el

5:12

código.

5:13

La Constitución tiene que centrarse solo en la

5:15

infraestructura.

5:16

Zapatero a tus zapatos, vaya.

5:18

Exacto.

5:19

Si incluyes una directiva filosófica sobre quién escribe,

5:22

estás distrayendo al modelo.

5:24

La IA está ahí como arquitecto técnico para

5:26

construir las estanterías, no para ser descensor literario

5:29

de los libros que vas a poner en

5:31

ellas.

5:31

Vale, tiene todo el sentido.

5:33

Mantener el enfoque en los ladrillos digitales.

5:36

Entonces, una vez que la IA sabe perfectamente,

5:39

lo que no puede hacer, llega el momento

5:42

de decirle qué queremos construir.

5:44

Y aquí, ¡buf!, la industria del software lleva

5:47

décadas tropezando con la misma piedra.

5:50

Ya te digo.

5:50

Los humanos somos un desastre total detallando requisitos

5:54

técnicos.

5:54

Totalmente.

5:55

Es un problema crónico con los documentos de

5:57

requisitos del producto, los PRD.

6:00

A nadie le gusta escribirlos, porque tienes que

6:02

imaginar las 100 formas diferentes en las que

6:04

un usuario podría romper el sistema.

6:06

Y siempre nos dejamos algo.

6:08

Y aquí es donde… El proceso con SPECIT

6:10

da un giro, o sea, ¡brillante!

6:13

DEN usa primero el comando SPECIFY para decirle

6:17

a la IA, más o menos, que quiere

6:18

una ruta alimentada por archivos TOMEL, que es

6:21

un formato muy sencillo.

6:23

Pero la verdadera magia ocurre cuando ejecuta el

6:26

comando CLARIFY.

6:27

¡Ostras, sí!

6:28

El CLARIFY es brutal porque invierte a los

6:30

roles.

6:31

La IA deja de generar código a ciegas

6:34

y analiza el borrador.

6:35

Y usando su conocimiento, empieza a hacerle preguntas

6:38

al desarrollador, para iluminar sus puntos ciegos.

6:41

¡Es buenísimo!

6:42

Leyendo el caso de estudio, de verdad, ¡es

6:44

divertidísimo!

6:46

La IA de repente se transforma en un

6:48

gestor de proyectos súper exigente, interrogando a un

6:51

desarrollador que, pobre, claramente no había pensado en

6:54

los detalles.

6:55

Seguro que le pilló sin tomarse el primer

6:57

café.

6:57

Seguro.

6:58

Vamos a repasar el interrogatorio porque no tiene

7:01

desperdicio.

7:02

La primera pregunta de la máquina fue, ¿cómo

7:04

se van a ordenar los libros?

7:06

Una omisión clásica.

7:07

Nosotros asumimos que hay un orden.

7:09

Pero el ordenador necesita reglas matemáticas.

7:11

Den tuvo que decidir ahí mismo que se

7:13

ordenarían por fecha de finalización.

7:15

Los más recientes, arriba.

7:18

Luego, la IA le ataca con el diseño.

7:22

Le suelta, ¿cuántos libros deben mostrarse por página?

7:26

Claro, la paginación.

7:27

Den, pensando rápido, dijo que 20 libros por

7:29

página estaría bien.

7:30

Y la tercera pregunta fue puramente visual.

7:33

Le dijo, ¿cómo se mostrarán las calificaciones?

7:36

¿Quieres dibujar estrellas, poner un número, o las

7:39

dos cosas?

7:40

Y Den optó por estrellas visuales y el

7:43

número al lado para que fuera accesible.

7:46

Pero la cuarta pregunta, esa es la que

7:50

demuestra que estamos ante algo diferente.

7:52

La IA le pregunta, ¿qué pasa con los

7:55

libros que has empezado a leer pero aún

7:57

no has terminado y no tienen fecha de

7:59

finalización?

8:00

Brutal.

8:01

A mí me parece fascinante.

8:03

O sea, ¿cómo Narizas sabe la IA que

8:05

eso va a ser un problema?

8:06

Lo detecta porque estos modelos analizan millones de

8:09

repositorios de código.

8:11

La IA sabe, estadísticamente, que en bases de

8:14

datos con fechas, si dejas un valor vacío

8:16

o nulo, el frontend explota.

8:18

Te rompe el ordenamiento de la primera pregunta.

8:21

Madre mía, qué fuerte.

8:23

Y claro, ante eso Den decidió que los

8:25

libros inconclusos se quedarían anclados arriba del todo

8:28

en una sección de leyendo actualmente.

8:31

Una salida muy elegante, la verdad.

8:32

Y la quinta pregunta ya cerraba el círculo

8:34

de la seguridad.

8:35

¿Qué hacemos si el archivo TOM está corrupto

8:38

o le faltan datos?

8:40

Pragmatismo en vena.

8:41

Porque Den le dijo que ignorara silenciosamente la

8:44

entrada con errores y renderizará el resto para

8:46

no asustar a la gente que visite la

8:48

web.

8:49

Y es que esta fase interactiva es revolucionaria.

8:51

Cuando nos quejamos de que la IA da

8:53

código basura, el 90 % de las veces

8:56

es nuestra culpa por darle un contexto pésimo.

8:59

Si obligas a la IA a preguntar primero,

9:01

las reglas quedan perfectas.

9:03

Vale.

9:04

Con los vacíos lógicos rellenados ya sabemos qué

9:07

construir.

9:07

Pero saber el qué no es saber el

9:10

cómo sin dinamitar el proyecto.

9:12

Por eso pasan al comando plan, donde la

9:15

IA toma las respuestas y diseña las tareas.

9:18

Y aquí te tengo que preguntar.

9:19

La IA propuso crear un sistema completo de

9:22

tests automatizados, pruebas de código.

9:25

Y Den literalmente intervino y se los cargó

9:29

todos.

9:29

Los borró de un plumazo.

9:30

A ver, perdóname, pero como principio de ingeniería,

9:33

quitar los tests no es una negligencia.

9:35

¿Qué pasa si una actualización le rompe la

9:38

lista mañana?

9:39

Es una reacción súper normal la tuya.

9:41

Desde un punto de vista académico, tendrías toda

9:44

la razón.

9:45

Pero lo fascinante de esto es que ilustra

9:47

por qué necesitamos al humano en el bucle.

9:50

La IA no entiende de presupuestos ni de

9:52

contexto social.

9:54

Claro, va con todo.

9:55

Exacto.

9:55

Aplica el rigor de una empresa enorme a

9:58

todo lo que hace.

9:58

Se cree que está diseñando el sistema de

10:01

frenado de un tren bala.

10:02

Pero Den es un tío manteniendo su blog

10:04

personal en su tiempo libre.

10:05

¿El contexto empresarial frente al pragmatismo personal?

10:09

Eso es.

10:09

En un blog estático, montar integración continua y

10:12

tests añade una complejidad monumental.

10:15

Ralentiza todo para una función que, si se

10:17

rompe, bueno, pues no se ve la portada

10:19

de un libro, ya está.

10:21

Den actuó como freno humano ante la sobreingeniería.

10:24

Tiene todo el sentido del mundo.

10:26

Agilidad por encima del dogma.

10:27

Y esta colaboración se afina aún más en

10:30

el siguiente paso, con el comando Analyze.

10:33

Spekit revisa el plan contra la Constitución.

10:35

Y la IA ahí brilla, porque detecta un

10:39

error tremendo de arquitectura.

10:41

El plan inicial decía de guardar los datos

10:43

en la carpeta config.

10:45

Pero la IA salta y dice, oye, las

10:47

convenciones de Hugo dicen que los datos van

10:49

en la carpeta data, no en config.

10:52

Qué nivel de detalle.

10:53

Es que ese nivel idiomático del ecosistema es

10:56

alucinante.

10:57

Sí, sí.

10:58

Demuestra que no es un simple lorito repitiendo

11:01

texto.

11:01

Entiende la semántica de las carpetas de los

11:04

frameworks modernos.

11:05

Y bueno, con el plan ya pulido, llega

11:07

el momento de ejecutar.

11:08

El comando Implement.

11:10

El choque de realidad, madre mía.

11:12

Siempre.

11:13

Siempre la teoría es perfecta hasta que abres

11:15

el navegador web.

11:16

Ya te digo.

11:17

Según cuenta Den, ejecuta el comando.

11:19

El backend funciona perfecto.

11:21

Los datos cargan.

11:22

Pero el frontend, la parte visual, es un

11:24

desastre absoluto.

11:26

En vez de una cuadrícula elegante, le sale

11:28

una lista plana y aburrida.

11:30

Típico.

11:30

Pero a ver, no lo entiendo.

11:32

Hablamos de IA que te programa algoritmos de

11:35

cifrado en segundos.

11:36

¿Y me estás diciendo que no sabe alinear

11:38

cuatro cajas en una pantalla con CSS?

11:41

Es que es una debilidad estructural gigantesca de

11:44

los modelos actuales.

11:45

Un LLM es ciego, fundamentalmente.

11:48

No ve la pantalla.

11:49

No tiene razonamiento espacial.

11:51

Ah, claro.

11:52

Solo predice texto.

11:53

Exacto.

11:54

Escribir Python es… … lógica secuencial.

11:57

Pero el CSS, especialmente una cuadrícula o flexbox,

12:00

es contextual y en dos dimensiones.

12:03

La IA puede adivinar qué clases de Tailwind

12:05

suelen ir juntas.

12:06

Pero no sabe cómo van a colisionar esos

12:09

píxeles en la pantalla del usuario.

12:11

Siempre hace falta iteración visual humana.

12:13

Es como si te hace los planos de

12:14

la casa perfectos, pero le tienes que decir

12:16

tú si el sofá va a caber por

12:18

la puerta del salón.

12:19

Tal cual.

12:19

Por eso, Den combina Cloud Sonnet 4 y

12:23

GPT -5 para ir refinando el diseño.

12:26

Le meten unas pastillas visuales muy chulas para

12:29

las fechas.

12:30

La etiqueta de lectura obligatoria.

12:32

Un contador.

12:33

Se empieza a ver genial.

12:35

Pero ojo que aquí ocurre un pivote técnico

12:37

brutal.

12:38

¿Te acuerdas de que habían exigido paginación de

12:41

20 libros en la fase de clarificación?

12:43

Sí, sí.

12:43

Parecía inamovible.

12:45

Pues desaparece por completo.

12:46

Se la cargan.

12:47

¿Qué provocó un cambio tan drástico a mitad

12:50

de camino?

12:50

Pues fue puro pragmatismo.

12:52

Lo que podríamos llamar esencialismo de software.

12:54

Se dieron cuenta de un conflicto arquitectónico de

12:57

fondo.

12:58

Si querían paginación real, sin recargar la web

13:01

entera, tenían que inyectar código JavaScript.

13:04

Y el JavaScript rompe la regla de la

13:06

pureza estática que vimos al principio.

13:08

Exactamente.

13:09

Añadir JavaScript para un triste botón de siguiente

13:12

iba en contra de 15 años de rendimiento

13:15

extremo.

13:16

Así que Den hizo algo dificilísimo.

13:18

Priorizó la simplicidad arquitectónica sobre un capricho estético.

13:22

Prefirió una sola página larga y súper rápida.

13:26

Brillante.

13:27

Saber decir no a tu propia idea para

13:29

no romper los cimientos.

13:31

Bueno, llegamos al éxito.

13:33

El código funciona.

13:34

Es rápido.

13:35

No hay JavaScript ni necesario.

13:37

Misión cumplida.

13:38

En teoría.

13:39

Claro.

13:40

El 99 % de la gente guardaría el

13:43

código, cerraría el ordenador y a otra cosa.

13:45

Pero Den da un último paso.

13:47

Y esto transforma un simple experimento en una

13:50

lección maestra de ingeniería.

13:52

Sí, porque la innovación no acaba cuando la

13:55

pantalla se ve bonita.

13:56

Durante la iteración, aprendieron cosas.

13:58

Por ejemplo, que si no le daban un

14:00

ancho fijo a las tarjetas, rebotaban por culpa

14:02

del tamaño de los títulos.

14:04

O usar emojis específicos para cada estado, claro.

14:07

Eso es.

14:08

Y Den le ordena a la IA que

14:10

coja todos esos descubrimientos empíricos y los escriba

14:14

de vuelta en el archivo original de especificaciones,

14:16

en el spec .md.

14:18

O sea, actualiza el texto con lo aprendido.

14:21

Pero, ¿qué significa esto en realidad?

14:24

¿Por qué es tan vital hacer esto si

14:25

el código ya funciona perfectamente?

14:27

Pues porque cambia la perspectiva por completo.

14:31

Históricamente, un documento de requisitos era una servilleta

14:34

glorificada que tirabas a la basura en cuanto

14:36

escribías la primera línea de código.

14:38

Ahora, ese documento se convierte en un artefacto

14:41

independiente y vivo.

14:43

Es la única fuente de verdad.

14:45

Exacto.

14:45

Es como, a ver, como si extrajera el

14:47

ADN de la aplicación para separarlo del cuerpo

14:50

físico, ¿no?

14:51

Me encanta esa forma de verlo.

14:53

Imagina que dentro de cinco años Den se

14:55

harta de Hugo y quiere reescribir su blog

14:57

en otro lenguaje que aún ni existe.

14:59

Si no tuviera el documento, tendría que hacer

15:01

ingeniería inversa.

15:03

Leer código superviejo y volvería a cometer los

15:06

mismos errores con los anchos de las tarjetas.

15:08

Claro.

15:09

Pero con este sistema, no empieza de cero

15:11

ni se pone a discutir la lógica con

15:13

la IA del futuro.

15:14

Solo le da ese archivo superdetallado y le

15:16

dice, esta es la filosofía inmutable de mi

15:19

aplicación.

15:20

Reconstrúyela con la tecnología de hoy.

15:22

Es un cambio de paradigma total.

15:24

Pasamos de venerar el código fuente a venerar

15:27

el concepto.

15:27

O sea, la magia de la IA no

15:29

es escupir líneas de código desechable, sino obligarnos

15:33

a pensar y documentar con precisión de cirujano.

15:36

Y esto nos lleva a una reflexión final

15:38

que es, vamos, provocadora.

15:40

Si un documento vivo puede preservar la esencia

15:43

exacta de un programa sin importar en qué

15:45

esté escrito, ¿estamos ante el principio del fin

15:48

del código heredado?

15:49

El famoso código viejo intocable.

15:52

Ese que todo el mundo tiene miedo de

15:53

tocar, sí.

15:54

Ya no tienes que parchear código frágil de

15:57

hace quince años.

15:58

Le pides a la máquina que lo regenere

16:00

enterito con las librerías de esta semana.

16:03

Exacto.

16:04

Quizás en el futuro nuestro trabajo no sea

16:06

leer código viejo, sino simplemente conversar con la

16:09

IA para auditar esa constitución y esas especificaciones.

16:13

Las máquinas ya tejerán y destejerán el código

16:16

por debajo cada pocos meses.

16:18

El código pasa a ser un código.

16:19

Es un subproducto efímero.

16:21

Y la idea es lo eterno.

16:23

Una reflexión alucinante sobre cómo nos vamos a

16:25

relacionar con lo que creamos.

16:27

Merece la pena darle una vuelta cuando nos

16:29

frustremos con un sistema antiguo.

16:31

Antes de despedirnos, hasta el próximo programa os

16:34

informamos de que las voces que oyes han

16:36

sido generadas por la IA de Notebook LM

16:38

y que dirigiendo el podcast se encuentra Julio

16:40

Pablo Vázquez, un humano que te envía saludos.

16:43

En caso de error, probablemente sean errores humanos.

16:46

Nos escuchamos.

17:00

Hasta el próximo episodio de hoy.

17:00

Muchas gracias por tu atención.

17:11

Esto es BIM Praxis.

17:14

Nos escuchamos en el próximo episodio.