Arquitectura sin sintaxis: dibujar el sistema antes de pedirlo

El plano antes del ladrillo

Firma a punto de sellar un contrato junto a un tampón de oficina sobre el escritorio. — Entre piezas, como entre empresas, hay contratos: quién llama a quién, con qué datos y de quién es la responsabilidad. Un plano sin contrato es una postal.

Un constructor no empieza sin plano. Tú tampoco deberías empezar a pedir código sin saber qué piezas va a tener tu sistema y cómo se hablan entre ellas. Dibujar la arquitectura no es programar: es decidir de antemano el mapa. Cuando el mapa está claro, cada prompt deja de ser una apuesta.

Las cuatro piezas de casi toda aplicación web

El mapa, pieza por pieza
El usuario ve el frontend; el frontend habla con el backend por una API; el backend lee y escribe en la base de datos.

Qué es cada pieza (en una frase)

Nombra la pieza y su trabajo; la IA pone la sintaxis.
Pieza	Lo que hace	No necesitas saber…
Frontend	Lo que el usuario ve y toca en el navegador	el CSS exacto de cada botón
Backend	La lógica que decide qué pasa con lo que se envía	la sintaxis del servidor
Base de datos	Donde se guarda la información que persiste	optimizar índices
API	El puente por el que frontend y backend se hablan	firmar cada endpoint a mano

Cómo usar el plano en el prompt

Cuando le entregas el mapa a la IA, dejas de decir «hazme una app» y empiezas a decir «esto vive aquí, esto se conecta allá». El mismo plano se pega en cada prompt para que la IA no invente una arquitectura distinta en cada respuesta.

El plano como constraint

texto

ARQUITECTURA DEL PROYECTO (respétala, no la cambies sin avisar):\n- Frontend: pagina de agenda de contactos (lista + formulario).\n- API interna: GET /contactos, POST /contactos, PUT /contactos/{id}, DELETE /contactos/{id}.\n- Backend: valida y guarda en la base de datos.\n- Base de datos: tabla contactos(id, nombre, telefono, email, creado_en).\n\nConstruye SOLO el endpoint GET /contactos siguiendo este mapa. No toques el frontend todavía.

Cada prompt arranca pegando el plano: la IA construye dentro de tus fronteras, no fuera.

Para profundizar

Prueba

En tu plano, el formulario de registro del usuario guarda el usuario. ¿Qué pieza decide realmente si el correo es válido y lo escribe en la base de datos?

Dibujar la arquitectura exige saber escribir el código de cada componente.

Detecta el plano roto

Un alumno describe la arquitectura de su app. Señala la conexión que NO tiene sentido en un sistema web típico:

Marca la línea o las líneas con error y pulsa Comprobar.

Dibuja (a mano o como lista) la arquitectura de tu proyecto: nombra cada pieza y qué le envía a cuál. Pégala al inicio de tu próximo prompt de código.

Si no sabes cómo se conecta una pieza con otra, ahí tienes un hueco de diseño que la IA rellenará por ti sin consultar.

Tu texto se guarda sólo en este dispositivo.