Esta web la hemos construido entre dos: una persona — tú — con una idea clara de lo que quería contar, y un asistente de Inteligencia Artificial llamado Claude, que ha ido escribiendo el código a partir de las indicaciones recibidas.
A continuación te contamos los pasos, sin entrar en detalles técnicos. La idea es que entiendas el qué y el por qué, no el cómo exacto. Si después te pica la curiosidad, siempre podrás volver a este texto e ir más allá.
PASO 1 Decidir qué queríamos contar
Lo primero, lo más importante y lo menos técnico: ponernos de acuerdo. ¿Qué tipo de web es? ¿Para quién? ¿Qué se ve en la portada? ¿Qué información mostramos y qué dejamos fuera (especialmente si hablamos de datos personales)?
Antes de teclear una sola línea, decidimos: una galería de los 16 participantes del workshop, mostrando solo el perfil profesional — sin emails, sin teléfonos, sin direcciones. Internet es un sitio público y respetar la privacidad estaba por encima de cualquier otra cosa.
PASO 2 Crear el «esqueleto» (HTML)
Una página web tiene tres ingredientes: HTML, CSS y a veces JavaScript. Aquí solo hemos usado los dos primeros, porque queríamos algo sencillo.
El HTML es el esqueleto. Define qué cosas hay en la página y en qué orden: un título arriba, una sección con tarjetas en medio, un pie de página abajo. Nada de colores ni tipografías — solo la estructura.
PASO 3 Pintarla con estilo (CSS)
El CSS es la decoración. Decide los colores, las tipografías, los márgenes, cómo se comporta la página cuando la abres en un móvil o en un portátil grande, qué pasa cuando pasas el ratón por encima de una tarjeta…
Para esta web hemos elegido el rojo característico del MIT (#A31F34), una tipografía
limpia (Segoe UI, la que ya viene en Windows) y un diseño que se adapta solo al tamaño de tu pantalla.
PASO 4 Probarla en local
Antes de enseñársela a nadie, abrimos la página en el navegador (haciendo doble clic en el archivo
index.html). Sin servidores, sin nada raro — literalmente, como si abrieras un PDF.
Eso permite ver cómo queda, detectar errores y ajustar detalles antes de subirla a internet.
PASO 5 Subirla a internet (GitHub Pages)
Para que cualquiera pueda verla desde su móvil, necesitamos un sitio donde alojarla. Hemos usado GitHub Pages, un servicio gratuito de Microsoft que toma los archivos de una página web y los sirve en una URL pública. Sin pagar, sin contratos, sin servidores que mantener.
El proceso es: copias los archivos a un repositorio en GitHub, activas la opción «Pages» y, en unos minutos, tu web está viva en una dirección que cualquiera puede visitar.
PASO 6 El truco: trabajar con un asistente de IA
Lo verdaderamente novedoso de este ejercicio no es la web en sí (las webs sencillas existen desde hace 30 años), sino cómo la hemos construido: pidiéndoselo a una IA en lenguaje natural.
En lugar de escribir el código, hemos descrito lo que queríamos: «una web estilo MIT, con tarjetas de los participantes, sin datos personales». La IA hace preguntas, propone opciones, escribe el código y lo prueba. Y cuando algo no encaja, lo decimos y lo ajusta.
Eso es, en esencia, la IA agéntica: no una herramienta que solo responde preguntas, sino un colaborador que entiende un objetivo, ejecuta los pasos necesarios y te avisa cuando hay que decidir.
FASE II Le damos voz: el orquestadorAgent
En la segunda fase añadimos un chat en la esquina inferior derecha. El botón rojo abre una conversación con el orquestadorAgent, nuestro primer «agente».
Lo importante: este agente no usa Inteligencia Artificial todavía. Funciona con una técnica clásica que se llama «detección de intenciones por palabras clave»:
Cuando le escribes algo, el agente normaliza tu texto (lo pasa a minúsculas, le quita las tildes y los signos) y busca palabras conocidas. Si encuentra «hola» o «buenas», sabe que es un saludo. Si encuentra «gracias», sabe que es un agradecimiento. Si no encuentra nada que reconozca, te avisa de que en esta fase aún no sabe responder a otros temas.
También sabe detectar mensajes basura (algo como asdfgklñkj): mira si tu texto
tiene vocales, si no hay letras repetidas raras, si la longitud es razonable… Si todo eso falla,
asume que es ruido y te pide que lo reformules.
¿Por qué empezamos así de simple? Porque los agentes de IA reales se construyen igual: empiezas por reglas claras y predecibles, las pruebas, y solo cuando funcionan le añades modelos más potentes detrás. En las próximas fases iremos sustituyendo este sistema por componentes cada vez más inteligentes — pero la idea de fondo (un orquestador que recibe, entiende y delega) se queda.
FASE III Dos agentes que trabajan en equipo
En esta fase añadimos un segundo agente: MatematicasAgente. Solo sabe
hacer cuatro cosas — sumar, restar, multiplicar y dividir — pero las hace bien y rápido.
El orquestador sigue siendo la cara visible: el que recibe el mensaje del usuario y decide qué hacer.
La regla nueva es muy simple: si tu mensaje empieza por /sumar, /restar,
/multiplicar, /dividir o /ayuda, el orquestador delega
la respuesta en MatematicasAgente. Para todo lo demás (saludos, despedidas, etc.), responde él mismo
como en la fase anterior.
¿Por qué hacerlo así en vez de meter todo en un solo agente? Porque cuando los agentes son pequeños y tienen una sola responsabilidad son más fáciles de mantener, probar y mejorar. Si mañana queremos añadir un agente de traducción o de reservas, no tocamos el resto: solo enseñamos al orquestador a delegar también en él.
Prueba en el chat: /sumar 12 8, /dividir 10 0 (¡cuidado!), /ayuda,
y mezcla con un «gracias» para ver al orquestador volver al smalltalk.
Mejora pedagógica: los comandos con barra (/sumar) son rápidos pero rígidos.
Hemos añadido también detección en lenguaje natural: el agente reconoce sinónimos
(«suma», «más», «por», «entre», «multiplica»…) y extrae los números del mensaje.
Así puedes escribir «quiero sumar 5 y 3» o «multiplica 4 por 6» y funciona igual.
CIERRE ¿Y ahora?
La web que estás viendo es el resultado de una conversación de aproximadamente una hora, sin escribir una sola línea de código a mano. La idea, la dirección y las decisiones importantes — qué mostrar, qué tono usar, qué dejar fuera — siguen siendo enteramente humanas.
La tecnología cambia. La intención, no.
← Volver a la portada