Sesión 3 de 5 · El portal

El portal de
gestión IP

Hoy el script de ayer se convierte en un aplicativo de verdad

DARATEL TIC | SPEC-DRIVEN DEVELOPMENT | 4 horas
Dónde estamos

Tercera de cinco

S1
KickOff
Hecho.
S2
Ecosistema + Claude Code
Instalado y con los primeros prompts.
HOY
S3
Portal de gestión IP
Cada uno, un módulo real.
S4
Agente multicanal
Conectado al portal.
S5
Despliegue y roadmap
Puesta en marcha y siguientes pasos.
Agenda

Cuatro horas

20 minDe dónde venimos y qué cambia hoyEl script suelto de la S2 pasa a ser una pieza de un aplicativo
40 minQué es SDD y por quéLa spec como contrato. Y por qué "va rápido" no basta
25 minEl harness: OpenSpecEl ciclo /opsx:* y dónde vive cada artefacto
30 minInstalaciónNode para el kit SDD, Docker para la base de datos
15 minPausa — y rescatamos al que se haya quedado atascado
30 minDemo guiada — todos a unaEl ciclo completo sobre la ficha de Cliente
60 minTu módulo/opsx:apply, tests en verde y tu PR. Cada uno el suyo
20 minCierre y puente a la S4 — qué se conecta encima de lo que habéis construido
De dónde venimos

El script de ayer no era el final

En la S2 le pedisteis a Claude Code un script que caza solapamientos en un CSV de redes. Hoy ese script deja de estar suelto: se convierte en un módulo de un aplicativo de verdad, con su base de datos y su interfaz.

La S2Un script que lee un CSV y encuentra los problemas. Útil, pero vive en una carpeta, lo lanza uno solo y no comparte nada con el de al lado.
→
La S3Un portal donde ese direccionamiento deja de vivir en un Excel. Con datos compartidos, validaciones y una pantalla para verlo. Y lo montáis entre ocho.

El salto de hoy no es de herramienta, es de método. Construir algo entre ocho, sobre los mismos datos y sin pisarse, no se improvisa con prompts sueltos. Necesita un método. Ese método es lo primero que vemos.

PARTE 01

Spec-Driven
Development

La intención por delante de la ejecución. Escribes el contrato primero; el código viene después.

El problema

¿La IA te acelera… hasta que revisas el PR?

Cuando genera más rápido de lo que puedes revisar, la velocidad se vuelve deuda. Y los síntomas ya los conocéis.

Síntoma

"Esto no era lo que pedí"

Le faltaba el detalle, así que rellenó los huecos a su manera. Funciona, pero no era lo que hacía falta.

Síntoma

La misma cosa, dos veces distinta

Dos personas lo piden con palabras distintas y salen dos soluciones que no encajan. Nadie sabe cuál vale.

Síntoma

Falla tarde, en la revisión

El código parecía bien. El fallo aparece cuando ya cuesta caro: en la revisión, en pruebas o ante el cliente.

La causa no es el modelo: es el encargo. Un trabajo mal definido produce el mejor código posible para una pregunta mal formulada.

Una spec incompleta no produce código malo por accidente: produce el mejor código posible para una pregunta mal formulada.

El principio que sostiene todo lo que hacemos hoy

Por qué "va rápido" no basta

Cinco pasos al 90% no dan un 90%

Una tarea normal son varios pasos encadenados. Si cada uno sale "casi bien" y el error se arrastra al siguiente, la cuenta no es la que parece.

90 %
De acierto en cada paso suelto. Suena de sobra.
× 5
Pasos encadenados sin un plan común. Una tarea corriente.
59 %
Lo que queda al final: 0,9 elevado a 5. Una moneda al aire.

Cada paso hereda el error del anterior. La spec no hace que cada paso sea más listo: hace que los cinco apunten al mismo sitio. Por eso, con el contrato escrito antes, el 90% deja de multiplicarse a la baja.

Qué es SDD

La spec como contrato ejecutable

"Spec" asusta menos de lo que suena. No es un documento enorme: es un texto corto que dice qué quieres, con qué reglas y cómo se sabe que está bien.

NO es

  • Un documento de cincuenta páginas
  • Un texto que se pierde en una carpeta
  • Solo el camino en el que todo va bien
  • Un trámite antes de "ponerse a lo serio"

SÍ es

  • Markdown, corto y estructurado
  • Objetivo, criterios de aceptación y tareas
  • Entradas, salidas, estados y casos de error
  • El contrato que la IA va a ejecutar

El mismo agente, el mismo modelo. Lo único que cambia entre un buen resultado y uno malo es el encargo que le das. La spec es ese encargo, por escrito y por adelantado.

El método

Plan → ejecutar → verificar

SDD es un bucle de tres tiempos. La gracia está en que los tres se hacen contra el mismo contrato: el plan lo escribe, la ejecución lo cumple, la verificación lo comprueba.

1 · Plan

Escribes el contrato

Antes de tocar código, defines qué quieres y cómo se sabrá que está bien. Lo revisas tú. Aquí es donde ganas o pierdes el día.

2 · Ejecutar

El agente lo cumple

Claude implementa la spec sin improvisar: rama, tests, código. No adivina lo que no está escrito; lo hace lo que está escrito.

3 · Verificar

Se comprueba contra la spec

¿Cumple cada criterio, sí o no? No es una opinión: es contrastar el resultado con el contrato que firmasteis al principio.

PARTE 02

El harness:
OpenSpec

El método necesita una herramienta que lo lleve por raíles. Esa herramienta se llama OpenSpec, y se maneja con comandos.

El harness

Quién sujeta el método

OpenSpec es el andamiaje que convierte "plan → ejecutar → verificar" en un flujo real dentro de Claude Code. No ejecuta nada por su cuenta: ordena el trabajo y guarda el contrato.

Qué es

Un flujo con comandos

Cuatro órdenes que llevan un cambio de la idea hasta el cierre. Las escribís vosotros; el trabajo pesado lo hace Claude.

Qué guarda

El contexto, en el proyecto

Cada artefacto queda escrito en el repo. El proyecto entero le sirve de contexto a Claude para construir lo que vosotros queréis, no lo genérico.

Por qué importa

La spec es el contrato

Si la spec es clara, el código sale bien. Si la spec es ambigua, el código también lo será. Ahí es donde se decide todo.

El ciclo

Cuatro comandos, un cambio

De la idea al cierre, siempre el mismo camino. Hoy lo veréis entero una vez, y luego cada uno entra por el segundo paso.

1

/opsx:propose — el contrato

Convierte la idea en el cambio y genera todos los artefactos de una vez: proposal, spec, design y tasks. El qué, el porqué y el cómo.

2

/opsx:apply — la ejecución

El agente implementa la spec: rama, código y tests. No improvisa: hace lo que el contrato dice, tarea a tarea.

3

/opsx:verify — la comprobación

La IA contrasta lo construido con la spec y las tareas. Marca lo que falla antes de que lo veáis en el PR.

4

/opsx:archive — el cierre

La spec verificada se archiva como fuente de verdad. No se tira: es el contexto de la siguiente pieza.

Dónde vive

Todo queda escrito en el repo

Cada cambio abre su propia carpeta en openspec/changes/<nombre>/. Cuatro archivos que no son documentación: son las instrucciones que la IA sigue.

proposalEl qué y el porquéObjetivo, alcance (qué sí y qué no) y riesgos del cambio
specEl contratoCriterios de aceptación y escenarios. Lo que /opsx:apply ejecuta y /opsx:verify comprueba
designLas decisiones técnicasCómo se resuelve por dentro. La parte que os interesa revisar
tasksLa lista de trabajoLas tareas en orden, con sus dependencias. La hoja de ruta del apply

Por eso el contexto no se pierde. El contrato está en el repo, no en la cabeza de nadie ni en un chat que se borra. Claude lo lee antes de construir — y por eso construye lo vuestro.

PARTE 03

Instalación

Media hora. Son dos piezas distintas y conviene no confundirlas: Claude Code ya lo tenéis; hoy añadimos el kit y la base de datos.

Antes de instalar nada

Claude Code y el kit SDD no son lo mismo

Es la confusión número uno. En la S2 instalasteis Claude Code sin Node ni permisos de admin. El kit SDD es otra pieza, y esa sí trae sus requisitos.

Ya lo tenéis

Claude Code

La herramienta con la que habláis en la terminal. Se instaló sola en la S2 y se actualiza sola. No necesita Node.

Hoy lo añadimos

OpenSpec, el kit SDD

El harness que trae el ciclo /opsx:*. Se instala con npm, así que este sí necesita Node.js. Son piezas distintas.

Y una tercera pieza: el portal guarda datos, así que necesita una base de datos. La levantamos con Docker Desktop — un comando y ya está corriendo, sin instalar Postgres a mano.

Instalación

Cuatro pasos, todos a la vez

Como en la S2: nadie se queda atrás. Si a alguien le falla uno, se pone con el de al lado y lo arreglamos en la pausa.

1

Claude Code

Comprobad que sigue: claude --version os devuelve un número. Si es así, este paso ya está de la S2.

2

Node.js y OpenSpec

Instaláis Node y luego el harness: npm i -g @fission-ai/openspec. Es lo que activa los comandos /opsx:*.

3

Docker Desktop

Para la base de datos del portal. Con docker compose up arranca Postgres y la aplicación juntos.

4

El repo del portal

Ya trae el andamiaje montado y vuestro cambio pre-cocido. No partís de una carpeta vacía: partís de vuestro contrato.

El repositorio

Clona el repo del portal

Es el proyecto que vais a construir hoy: ya trae el andamiaje y vuestro cambio pre-cocido. El primer paso, antes de nada, es traerlo a vuestra máquina.

git clone https://github.com/david-ramos-23/daratel-claude-code-s3.git

Ojo

Es un repo privado

No es público: solo puede clonarlo quien esté invitado como colaborador, cada uno con su cuenta de GitHub.

Si da error de acceso

Avisad a David

Un error de permisos al clonar significa que falta vuestra invitación. Levantad la mano y os añade al momento.

PARTE 04

El portal de
gestión IP

Lo que vais a construir. El sitio donde, por fin, se ve de un vistazo qué tiene en servicio cada cliente.

Por qué este portal

Dejar de vivir en un Excel

Hoy, para saber todo lo que tiene un cliente —sus sedes, su direccionamiento, sus equipos, sus servicios— hay que saltar entre varias hojas de cálculo. Y lo que está en un Excel suelto no lo comprueba nadie.

HoyEl dato repartido en hojas sueltas. Cada uno con su copia, sin una sola verdad. Un CIDR mal escrito o una IP repetida no molestan… hasta el día que dan la cara.
→
El portalUna fuente única y consultable. Los datos validados desde el origen, y una pantalla que junta todo lo de un cliente. Ver de un vistazo lo que tiene en servicio.

Y no es un ejercicio de juguete. Es el dolor que salió en la encuesta: la información de los clientes, dispersa y sin comprobar. Hoy le ponéis la primera piedra.

Cómo es por dentro

Tres piezas, todo en Docker

No hace falta ser desarrollador para entender la forma. Son tres cosas, y encajan igual que en cualquier aplicativo que uséis a diario.

El motor

Una API (FastAPI)

El programa que recibe las peticiones y responde: "dame los clientes", "da de alta esta subred". La lógica vive aquí.

La memoria

Una base de datos

Postgres, donde queda guardado todo de forma ordenada. Sustituye al Excel: un solo sitio, consultable y con reglas.

La puerta

Una interfaz

Una pantalla para las personas y una lista de operaciones en /docs para probar cada módulo sin escribir código.

Y todo se levanta con un comando. docker compose up y tenéis la aplicación y su base de datos corriendo. Ni instalar Postgres, ni pelear con versiones. Ese es medio truco del método.

El reparto

Ocho módulos, una persona cada uno

El portal lo construís ocho, cada cual su pieza, sobre los mismos datos. Todas cuelgan de la ficha de Cliente, que montamos juntos en la demo.

Sedes

Las sedes del cliente

Alta, consulta y baja de cada sede del cliente.

Subredes

El direccionamiento

Gestiona las subredes y valida el CIDR en el alta.

Direcciones IP

Asignar sin chocar

Una IP en su rango y sin duplicar. La lógica de la S2, ya de verdad.

Dispositivos

El inventario

Routers, switches y firewalls de cada sede, en un solo sitio.

Servicios

Qué tiene contratado

La cartera de cada cliente y el estado de cada servicio.

Vista de cliente

Todo de un vistazo

Sedes, subredes, IPs, servicios y equipos en una respuesta. El corazón.

Importar / exportar

El puente con el Excel

Entra un CSV validado por fila; sale un CSV para quien lo necesite.

Búsqueda

En lenguaje natural

"El firewall de la sede de Madrid" y aparece.

PARTE 05

Manos a
la obra

Primero miráis el ciclo entero una vez. Luego lo hacéis vosotros, cada uno con su módulo. Aquí es donde deja de ser una charla.

Cómo trabajamos hoy

Primero juntos, luego cada uno

Nadie hace el ciclo entero a ciegas. Lo veis una vez completo, sobre la ficha de Cliente, y solo después entráis vosotros — y entráis con el contrato ya escrito.

Primero, juntosEl formador corre el ciclo completo sobre Clientes: propose → apply → verify → archive. Veis de dónde sale cada archivo y qué hace cada comando.
→
Luego, túTu módulo ya viene pre-cocido: proposal, spec, design y tasks están escritos. No arrancas en el paso 1: arrancas en /opsx:apply.

Por eso hoy no hay caos. Ocho personas construyendo a la vez, pero cada una sobre su contrato y su carpeta. Se juntan al final, no por el camino.

Tu turno

Tu módulo, paso a paso

Sesenta minutos. Llegar al tests en verde ya es haberlo conseguido; el PR es el remate.

1

Lee tu contrato

Abre openspec/changes/<tu-módulo>/ y léete la spec: entiende qué te van a pedir que cumpla.

2

/opsx:apply

El agente crea el módulo, el código y los tests. Tú lees lo que propone y apruebas. Sin barra libre.

3

Tests en verde

Lanza los tests. Si pasan, tu módulo cumple el contrato. Si no, se lo dices a Claude y afina.

4

/opsx:verify

La IA comprueba lo construido contra la spec. La segunda red antes del PR.

5

Tu PR

Abres el Pull Request y David lo revisa con vosotros. Esa revisión es la firma.

Antes de irnos

La herramienta propone, vosotros validáis

Si os lleváis una idea de hoy, que sea esta: el método no va de fiarse de la IA, va de ponerle un contrato delante y comprobar que lo cumple.

El contrato manda

Spec clara, código bueno

Y al revés: spec ambigua, código ambiguo. Lo que lo arregla es afinar la spec, no insistir.

Se verifica

Midiendo, no confiando

Tests en verde y /opsx:verify antes del PR. "Parece que va" no es "va". Se comprueba.

La próxima

S4 · Agente multicanal

Vuestro portal existe. En la S4 le ponemos encima un agente que lo consulta y responde. Sin portal, no había S4.

Habéis construido una pieza real de un aplicativo real. Ocho módulos, una fuente de verdad. El Excel empieza a sobrar. Nos vemos en la S4.

Fin de la sesión 3

Preguntas

Sobre todo las de
"a mí el apply no me ha hecho lo que esperaba".

S4 · Agente multicanal|CONECTADO AL PORTAL
← → para navegar