¿Qué estrategias funcionan mejor al momento de realizar un proyecto de programación asistido por Inteligencia Artificial?

Después de todo interactuamos con la IA de una forma bastante particular. Le damos instrucciones escritas en un lenguaje natural, y esperamos recibir la respuesta en un lenguaje formal. Usamos por ejemplo inglés para describir un problema que requiere una acción en Python.

¿Podemos explicar correctamente las especificaciones de lo que queremos? De la calidad de las instrucciones depende buena parte de nuestro éxito.

Pero todas las interacciones encuentran limitaciones técnicas. La efectividad de la IA no es la misma según la extensión del proyecto, y necesitamos comprobar los resultados para evitar alucinaciones.

En lo que sigue voy a revisar un caso práctico: la creación de un sitio estático. Por medio de ese ejemplo vamos a buscar en qué formas podemos reducir la complejidad de nuestras instrucciones, con el objetivo de usar la IA para tareas más grandes.

¿Qué puede enseñarnos un sitio estático de la utilización de la IA?

Pensemos en un sitio web estático que utiliza solamente dos tecnologías:

• HTML para la estructura.
• CSS para el estilo.

No tenemos nada más en el proyecto. Una serie de archivos HTML y un único gran archivo de CSS.

Puede parecer en un primer momento un proyecto sencillo de crear. Una inteligencia artificial en el año 2025 parece ser capaz de generar todos esos documentos sin inconvenientes.

Entonces surge la primera pregunta ¿Cuál es la mejor forma de encarar el sitio?

La primera respuesta puede ser intentar completar el proyecto “One Shot”. Pedirle a la IA que genere nuestro proyecto por medio de una única instrucción.

Pero los primeros problemas se hacen aparentes.

Lo más seguro es que terminemos con un único archivo con cientos de líneas de código, todo el contenido del sitio y el CSS juntos. Y por eso mismo va a tratarse de una versión muy difícil de mantener y expandir.

Intentamos simplificar el proyecto obteniendo todo de un solo movimiento, pero nos encontramos con un archivo enorme en el que fácilmente se nos pueden escapar errores.

¿Qué podemos hacer entonces?

Digamos que estamos programando con la versión pública de alguna de las IA más populares. La mayoría de esas interfaces públicas, utilizadas directamente desde sus propios sitios web, no nos van a permitir subir múltiples archivos a la vez. E incluso si podemos trabajar con múltiples archivos dentro de la ventana de contexto, todavía tenemos que tener en cuenta que a mayor complejidad mayor posibilidad de error.

La solución parece ser movernos del “one shot” hacia un enfoque por pasos de una forma pausada.

Imaginemos que estamos haciendo la página principal del sitio. Una estrategia a seguir puede ser la siguiente:

1. Pedirle a la IA generar una primera versión de nuestra página principal que incluya el HTML integrado al CSS.

2. Después de tener esa primera versión funcionando, le pedimos a la IA que separe el código en dos archivos diferentes: .html y .css

Esos dos archivos van a estar correctamente vinculados, porque la IA solamente los separó luego de tener una primera versión funcional.

Ahora solamente tenemos que vincular estos nuevos archivos de forma local para ver que funcionen en conjunto.

Estamos sin embargo todavía lejos de un sitio funcional. Por eso tenemos que pensar en…

Conocer el problema para intentar resolverlo

Entonces estamos intentando crear un sitio estático.

Y ya conocemos nuestro problema: si encaramos el proyecto de una forma demasiado general el resultado se vuelve complejo. Y eso genera nuevos errores.

Para evitar esos errores necesitamos reducir la complejidad. Lo que buscamos es dividir el problema en partes que podemos manejar. Ahora en lugar de pedir un sitio web completo, vamos a pensar en generar sus componentes por separado.

Con eso en mente revisemos ¿Qué es un sitio web?

Un sitio web es una colección de páginas. Por ejemplo.

• Página de inicio (Landing page / Home page)
• Página Acerca de (About page)
• Página de contacto (Contact page)
• Página de política de privacidad (Privacy policy page)

Esas partes comparten elementos de diseño, como vamos a repasar a continuación.

Nuestro primer intento para simplificar el problema fue pasar de un único documento HTML+CSS a dos documentos diferentes, uno que contiene el HTML y otro que contiene el CSS.

Ahora tenemos un segundo nivel de simplificación: podemos pedirle a la IA que por ejemplo se concentre en únicamente el código de la página de inicio.

Pero podemos seguir dividiendo el proyecto en módulos.

¿Qué es una página de inicio? Una página de inicio es una colección de distintas secciones ordenadas:

Barra de navegación (Navigation bar / Header)
Sección hero (Hero section)
Formulario de suscripción (Subscription box )
Pie de página (Footer)

Eso nos da toda otra dimensión para el trabajo con la IA. Empezamos pidiendo que escriba un sitio web y ahora le pedimos que escriba “Un Hero section para una página de inicio”.

Para hacer esto es necesario que tengamos conocimiento sobre la tecnología de nuestro proyecto. Pero este enfoque más reducido nos ayuda a ganar más control en nuestras instrucciones.

Evitar repeticiones innecesarias por medio de las instrucciones

Cuando empezamos con nuestro ejemplo le pedimos a la IA que genere toda una parte de nuestro sitio estático en un solo movimiento.

Luego de eso, poco a poco, nos movimos a una forma de organización más modular.

Nos queda por preguntar ¿Qué es lo que se mantiene dentro de la memoria de corto plazo de la IA con la que estamos trabajando? ¿Podemos reutilizar partes de nuestra conversación con la máquina para ahorrarnos tiempo?

Toda la conversación de nuestro proyecto puede ser utilizada como contexto previo. Gracias a eso la IA puede reutilizar un bloque que fue generado con anterioridad dentro de la misma conversación.

Por supuesto el tamaño de una “ventana de contexto” va a variar entre las diferentes implementaciones públicas de las diferentes IA. Si la conversación se cierra, si empezamos a trabajar en una nueva conversación, no podemos hacer referencia a esas otras memorias.

Vamos a volver nuestras instrucciones en algo todavía más preciso.

Diferentes partes del sitio comparten las mismas estructuras y clases. Siguiendo con nuestro ejemplo podemos suponer que el mismo “Pie de Página” se repite mostrando la misma información tanto en la página de inicio como en la de contacto y la de privacidad.

De esa forma no necesitamos que la IA escriba las mismas partes una y otra vez. Conocer las reglas del HTML+CSS nos ayuda a resolver ese problema.

Ahora por ejemplo cuando compartimos el prompt para la página contacto, podemos decir por ejemplo “El sitio de contacto comparte la misma barra de navegación y el mismo footer que la página principal”. Incluso también podemos mencionar de manera explicita una clase o un nombre ya existente para que pueda volver a ser utilizado.

La idea con eso es evitar que la herramienta escriba una y otra vez lo mismo. Por ejemplo en nuestro caso, la IA puede escribir un nuevo HTML haciendo un llamado a una clase que ya existe en una implementación previa del CSS. Ahora solamente nos queda tener que actualizar la hoja de estilo sin necesidad de crear un nuevo bloque de código.

Por supuesto también podemos pegar los ejemplos directos dentro de la instrucción si el ejemplo que buscamos usar no se encuentra dentro de la ventana de contexto actual.

Conclusión

Con esto le doy un cierre a mi apunte revisando qué podemos aprender de nuestro trato con la inteligencia artificial (LLM)) mientras creamos un sitio estático.

Es simplemente un intento por analizar algunas de las cosas que encontré al utilizar la IA, proponiendo al mismo tiempo una forma de trabajo más organizada.

Por supuesto todo esta idea puede ser mejorada.

Como ejemplo pensamos de nuevo en el CSS ¿en que forma vamos a estructurarlo? En este punto conocer las mejores prácticas del lenguaje va a ayudarnos a entender mejor lo que le pedimos a la IA.

Me gustaría conocer tus opiniones sobre el texto, me gustaría leer tu correo electrónico con lo que estás pensando del tema.

La seguimos en el próximo apunte.