Cómo utilicé la IA para desarrollar una aplicación web moderna

La IA generativa como ChatGPT ha marcado el comienzo de una nueva era en el desarrollo de software, en la que cualquiera puede desarrollar una aplicación útil y moderna con poca o ninguna habilidad de codificación. En este artículo, te mostraré cómo utilicé la IA para desarrollar una herramienta de la que ahora dependo todos los días.

El problema que estaba tratando de resolver

Desde el inicio de ChatGPT y otros modelos de lenguaje de IA, ciertas palabras se han asociado fuertemente con el contenido generado por IA (una de las muchas razones por las que no deberías usar ChatGPT para escribir). Algunos ejemplos son «delve», «tapestry» y «testament». Como escritor, siempre he creído en usar la palabra correcta para el contexto correcto. Cuando una palabra encaja y expresa exactamente lo que quiero transmitir, siento que debería poder usarla.

Lamentablemente, muchos de mis clientes no lo ven de la misma manera. Cada vez les preocupa más el contenido que pueda parecer generado por IA. Como no soy una IA (al menos no lo creo), no recuerdo todas las palabras y frases que suelen utilizar en exceso los modelos de lenguaje de IA, por lo que puede resultarme difícil evitarlas.

Por eso decidí crear una herramienta que analizara el texto proporcionado comparándolo con una lista de palabras y resaltara las palabras y frases que pudieran sonar a IA. Una herramienta como esta se puede desarrollar utilizando las tres tecnologías web clave: HTML (estructura el contenido de una página web), CSS (se utiliza para dar estilo al contenido de una página web) y JavaScript (convierte una página web estática en una «aplicación web» que hace lo que queremos que haga).

Cómo elegir la mejor IA para el desarrollo de aplicaciones web

Un proyecto como mi “ AI Vocab Checker ” es un candidato perfecto para el desarrollo de software asistido por IA porque los mejores modelos de IA han sido entrenados en enormes cantidades de código y documentación HTML, CSS y JavaScript, por lo que pueden generar código, brindar orientación sobre las mejores prácticas, sugerir implementaciones eficientes e incluso ayudar a solucionar problemas que puedan surgir durante el desarrollo.

Los 3 mejores modelos de lenguajes grandes (LLM) en el ranking de LMSYS Chatbot Arena (GPT-4o, Claude 3.5 Sonnet y Gemini Advanced) pueden manejar tareas de desarrollo web con una habilidad impresionante. Sin embargo, finalmente elegí Claude 3.5 Sonnet para este proyecto.

Claude 3.5 Sonnet fue mi asistente de codificación de IA preferido en gran medida gracias a su función «Proyectos», que me permitió crear un espacio de trabajo dedicado exclusivamente al desarrollo de mi aplicación. Por supuesto, también ayuda que Sonnet supere a su competencia en las tareas de codificación incluidas en el benchmark HumanEval .

Desarrollando mi aplicación web con Claude

Comencé creando un nuevo proyecto en Claude para AI Vocab Checker seleccionando la pestaña Proyectos en el panel izquierdo (puede revelarla colocando el cursor del mouse sobre el logotipo de Claude en la esquina superior izquierda en un chat activo) y luego haciendo clic en el botón Crear proyecto .

Una vez hecho esto, tuve que describirle el problema a Claude. Esta es la consigna que se me ocurrió:

En general, lo que se busca es brindar una descripción general de lo que se desea lograr y luego brindar tantos detalles como sea posible. Todo lo que no se describa en detalle quedará a la interpretación de la IA, que puede o no coincidir con la visión del usuario.

Claude tardó un poco en generar el código, que luego pegué en un archivo index.html con Visual Studio Code. Luego pude abrir el archivo index.html en un navegador web y esta fue la versión inicial de la aplicación AI Vocab Checker que se le ocurrió a Claude:

Como puedes ver, Claude pudo crear una aplicación funcional con solo un mensaje, ¡y la aplicación realmente hace lo que se supone que debe hacer! Sin embargo, hay algunos problemas que son bastante obvios si se analiza más de cerca:

• Los dos primeros cuadros de texto son ligeramente más grandes que el cuadro de texto inferior.
• El nombre de la aplicación es incorrecto (olvidé especificarlo).
• La aplicación no aprovecha el espacio horizontal disponible en los dispositivos de escritorio.
• Todas las palabras están resaltadas en el mismo color (lo que hace que el resultado sea difícil de analizar).
• No hay estadísticas de uso para las palabras detectadas.
• Claude no utilizó ninguna biblioteca ni marco a pesar de que le recomendaron hacerlo.

Entonces, seguí con este mensaje:

Y aquí está el resultado:

Eso es significativamente mejor y solo hizo falta un aviso adicional. Claude implementó el marco Bootstrap para lograr un diseño moderno y responsivo y la biblioteca mark.js para resaltar mejor. Impresionado con la forma en que su inclusión mejoró la aplicación, le pregunté a Claude qué otros marcos o bibliotecas podríamos usar y la IA sugirió Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js y algunos otros.

De los frameworks y bibliotecas sugeridos, Chart.js me pareció el más útil porque se puede utilizar para crear representaciones visuales de estadísticas de uso de palabras, como gráficos de barras o gráficos circulares. Le pedí a Claude que lo implementara y también le pedí que reemplazara el texto a analizar con el resultado para mejorar la experiencia del usuario. Después de algunos pequeños ajustes y modificaciones de diseño, esto es lo que se me ocurrió:

En cuanto a mis necesidades personales, esta versión de mi AI Vocab Checker puede satisfacerlas perfectamente y me llevó solo 15 minutos desarrollarla usando mis muy limitadas habilidades de desarrollo web que he adquirido a lo largo de los años en varios sitios web de programación gratuitos.

Imagen de portada y captura de pantalla de David Morelo.