Supongamos que, por algún motivo, tienes que crear un proyecto web que debes entregar en cuestión de días, o en el menor tiempo posible. Este proyecto debe ser agradable a la vista, es decir, debe tener interfaces con estilos. Además, debe tener algún tipo de conexión con una base de datos y te piden que crees algunos diagramas o documentación breve sobre cómo funciona el proyecto, además de, por supuesto, crear el código.
Un desarrollador con cierto orden puede empezar describiendo en texto el proyecto, sus requerimientos, crear un modelo ERD de la base de datos, luego algunos bosquejos o wireframes de la interfaz de usuario, y finalmente comenzar a escribir código desde cero.
Si bien esto es lo más común, hoy en día todos estos pasos se pueden acelerar un poco más si utilizamos herramientas o servicios de inteligencia artificial que generen desde código, diagramas, textos y más. Y de eso quiero hablarles el día de hoy.
Ahora bien, no es necesario exagerar los beneficios de estas herramientas de IA, como decir que ya no se necesitarán diseñadores UX/UI o programadores. Las que les voy a mencionar, aunque útiles, están muy lejos de reemplazar a un profesional competente. Así que considérenlas como herramientas que les ayudarán a ser más productivos, y esa es la idea de estas soluciones.
Empecemos con el servicio más común que pueden usar estos días para acelerar su desarrollo:
IAs de Generación de Texto y Gráficos
Aunque suene difícil de creer, todavía hay muchas personas que no conocen ChatGPT, y por lo tanto no saben cómo usar todo su potencial.
Para aquellos que no lo sepan, ChatGPT es la aplicación más exitosa de inteligencia artificial actualmente. Este es un chat que permite contestar cualquier duda sobre cualquier tema, y muchos programadores lo usan para preguntar sobre temas que no conocen, para generar código, encontrar solución a errores de código, generar documentación, generar tests, aprender temas nuevos, e incluso puede enseñarles a programar. Si no tienes mucha experiencia, ChatGPT puede ayudarte en tu trabajo.
Ahora, si bien ChatGPT permite generar texto y código, y es muy útil, no todo lo que necesitamos es texto. Muchas veces también necesitamos generar gráficos como diagramas de secuencia, diagramas entidad-relación o mapas mentales, que son información adicional a la documentación y al código del proyecto.
Por supuesto, si le pides esto al chat, te generará solo texto, por lo que no es una buena solución.
Sin embargo, existen herramientas que permiten generar gráficos a partir de texto, y aquí es donde puedes combinar ChatGPT con estas herramientas para potenciarlo aún más.
Por ejemplo, hay una herramienta llamada Mermaid que te permite, con un lenguaje especial, generar gráficos de todo tipo, como diagramas entidad-relación, diagramas de secuencia, Gantt, diagramas de clases, líneas de tiempo y mucho más.
Escribir diagramas puede ser una tarea laboriosa, pero podemos decirle a ChatGPT que genere un diagrama basado en el tema que queramos ver gráficamente, y así obtener nuestros gráficos.
Por ejemplo, puedes pedirle que genere un diagrama de secuencia de cómo funciona JWT en Mermaid, te dará una porción de código, lo pegas en el editor de Mermaid, ¡y listo! Ya tienes un diagrama creado con ChatGPT.
De hecho, esta idea es tan común que herramientas como Eraser.io y Excalidraw también permiten hacer algo similar: les pides algo y te generan un gráfico ya creado para que no tengas que crearlo desde cero.
Si necesitas generar textos, código e imágenes, estas herramientas te ofrecen una amplia variedad de opciones. Aunque, por supuesto, ChatGPT no es la única herramienta que genera texto. Existen otras opciones como Gemini creado por Google, Claude AI creado por Anthropic, o Llama creado por Meta, que también son chats inteligentes, aunque las respuestas que ofrecen no tienen el mismo grado de calidad. Aun así, vale la pena mencionarlos.
Autocompletado Inteligente
Con ChatGPT puedes generar porciones grandes de código, pero cuando estás escribiendo código a medida que se te va ocurriendo, es útil que el editor autocomplete la mayor cantidad de código posible. Es aquí donde entran las extensiones de autocompletado de código inteligentes, y la más popular en esta área es Github Copilot.
Github Copilot es una extensión creada por Github, que a su vez es parte de Microsoft, y usa el modelo de OpenAI. Es otra forma de usar el mismo cerebro que usa ChatGPT, solo que integrado en Visual Studio Code.
Es una herramienta de pago, con un costo de $10 mensuales, y puedes instalarla en múltiples editores de código y IDEs.
En mi opinión, esta es la herramienta más útil que puedes considerar pagar actualmente. No solo porque te permite autocompletar porciones grandes de código, sino porque permite a desarrolladores experimentados ver múltiples opciones de código al momento de escribir.
Entre las características que ofrece Github Copilot dentro de Visual Studio Code tenemos:
- Autocompletado inteligente
- Un chat inteligente al estilo de ChatGPT integrado en el editor
- Un prompt dentro del editor para generar, reescribir, corregir y explicar código
- Comandos especiales como @workspace para leer múltiples archivos, lo que le da al modelo más contexto para resolver un problema
- Incluso puedes usarlo por voz
Aunque Copilot tiene sus limitaciones, como que el código que sugiere no siempre está actualizado o optimizado, sigue siendo una excelente herramienta para código común y repetitivo.
Github Copilot no es la única opción de autocompletado de código. Otras alternativas incluyen:
- Tabnine
- GhostWriter (de Repl.it)
- Code Whisperer de Amazon
- Codium AI
Incluso editores de código como Cursor.io ofrecen una experiencia similar.
Sin embargo, Github Copilot destaca por su calidad de autocompletado y su precio accesible de $10 mensuales.
Para aquellos que prefieren no pagar nada y usar su propio hardware, existen proyectos como FauxPilot, LSP-AI, o modelos abiertos como CodeQwen, Deepseeker, CodeLlama, [StarCoder], y más. Estos permiten ejecutar modelos en tu tarjeta gráfica.
Generación de Interfaces Gráficas con IA: v0.dev
En el desarrollo de aplicaciones web, un framework bastante popular es Next.js. Con Next.js puedes crear aplicaciones web de todo tipo, pero no ofrece interfaces gráficas, es decir, no proporciona componentes estilizados como botones, sidebars, tarjetas, etc.
Muchos desarrolladores combinan Next.js con frameworks de CSS como TailwindCSS y escriben estilos desde cero. Otros compran componentes prehechos, como los de TailwindUI, para agilizar el desarrollo.
Sin embargo, hay otra forma de evitar comprar componentes, que es usando bibliotecas de interfaces de usuario como Material UI, Chakra UI, Next UI o la popular Shadcn UI.
Shadcn UI te da componentes estilizados y listos para usar, y es usada por la propia empresa que desarrolla Next.js, llamada Vercel.
Este año, Vercel ha integrado servicios inteligentes y ha creado una web llamada v0.dev, que permite generar componentes de Shadcn en cuestión de segundos a partir de un prompt.
Con v0.dev, puedes generar interfaces completas escribiendo un prompt y obteniendo tres opciones. Si no te gusta algo, puedes seguir pidiendo modificaciones y continuar ajustando el código generado.
Incluso puedes subir un dibujo simple de la interfaz que deseas, y v0 interpretará tu dibujo y generará el código correspondiente.
El código que genera es solo una plantilla, por lo que debes adaptarlo y hacerlo funcionar, pero esto ayuda a no perder tiempo en crear interfaces comunes, permitiéndote centrarte en la lógica.
Este servicio tiene un costo, pero te da 200 puntos mensuales para generar interfaces, sobre todo si usas Shadcn.
Otros Servicios Relacionados
Algunas herramientas relacionadas con el código también han integrado características de IA, como:
- Figma AI: genera diseños de interfaces de usuario a partir de un prompt
- Notion AI: genera textos dentro del editor de Notion
- Unity AI: permite generar assets a partir de prompts
- Docuo: genera documentación automática analizando el contenido del repositorio
Por último, tenemos los agentes de IA:
Agentes de IA
Son programas o servicios que utilizan modelos inteligentes como GPT para ejecutar acciones. Con un agente inteligente, puedes pedir que cree un proyecto web con base de datos, testing y una estructura de carpetas. El agente creará archivos, instalará módulos, escribirá código y comprobará su funcionamiento.
Aunque esto parece simple, es un proceso mucho más complejo. Un ejemplo popular es Devin, que permite generar este tipo de proyectos. Otro es Github Copilot Workspaces, que te permite describir lo que necesitas hacer, seleccionar archivos para modificar y ofrecerte sugerencias que puedes aceptar o rechazar.
Estos proyectos aún están en fase de desarrollo y tienen limitaciones, por lo que crearé un video dedicado a agentes inteligentes y programas open-source que puedes instalar.
Conclusión
Como puedes ver, usando servicios o herramientas de IA puedes ser mucho más productivo. Aquí algunos ejemplos:
- Con generadores de texto como ChatGPT, Gemini o Notion AI, puedes generar documentación rápida.
- Con Eraser.io, Excalidraw y herramientas como Mermaid, Markmap o Dbdiagram, puedes generar diagramas.
- Con Figma puedes generar diseños UI rápidamente.
- Con Shadcn, puedes generar código de interfaces de usuario.
- Con Github Copilot o herramientas de autocompletado, puedes crear código más rápido.
No significa que el código producido por estos servicios sea perfecto, pero es un buen punto de partida. Depende del desarrollador estudiar y mejorar el código. Esto ya lo mencioné en mi video sobre los malos hábitos que ChatGPT enseña a los programadores.
Por cierto, en ese video algunos entendieron que no me gustan estas herramientas, pero no es así. De hecho, yo también las uso, aunque no en gran medida. Sin embargo, sigo estudiando y les invito a hacer lo mismo. Estas herramientas nos dan soluciones rápidas a problemas comunes; ahora ustedes deben usarlas para crear sistemas más complejos o de mejor calidad.