Video tutorial completo
Antes de comenzar con el artículo, te recomiendo ver el video completo donde explico paso a paso todo el proceso:
🎥 Ver video en YouTube
En este video verás en tiempo real cómo configurar Copilot en modo agente y crear un login atractivo sin escribir ni una línea de código manualmente.
Introducción
¿Te imaginas crear la interfaz de un sistema de login para tu aplicación sin tener que escribir cada línea de código? Con GitHub Copilot en modo agente, esto ya es posible.
En este artículo te voy a mostrar cómo usar esta funcionalidad para que Copilot no solo genere el código de la vista y los estilos de tu formulario de login, sino que también cree automáticamente los archivos y carpetas necesarios para organizar tu proyecto. Es como tener un desarrollador junior muy eficiente trabajando a tu lado.
La clave está en configurarlo correctamente y en saber darle las instrucciones precisas. Vamos al grano.
¿Cómo crear el login para la aplicación en VS Code con Copilot?
1. Crear la carpeta del proyecto
- Abre una terminal y crea una carpeta para tu proyecto.
- Accede a esa carpeta usando
cd tu-carpeta-proyecto.
- Abre VS Code dentro de esa carpeta con el comando:
code .
2. Configurar Copilot en modo agente
- Asegúrate de tener Copilot instalado.
- Activa el modo agente desde la interfaz de Copilot (tiene opciones como: agente, pregunta, editar).
- El modo agente permite a Copilot no solo darte código, sino también crear carpetas y archivos automáticamente.
3. Agregar contexto e instrucciones al proyecto
- Es fundamental indicarle a Copilot qué tecnologías debe usar para tu proyecto.
- Ejemplo: “Hazlo en JavaScript puro y los estilos con Tailwind.”
- Para esto:
- Haz clic en “Agregar contexto” en el menú de Copilot.
- Selecciona “Configurar instrucciones”.
- Elige “Generar instrucciones”.
- Se creará el archivo
copilot-instructions.md donde puedes revisar y ajustar las instrucciones.
- Consejo: Si quieres mejores resultados visuales, indica que deseas “diseños elaborados, como para una aplicación final”.
4. Pedirle a Copilot que cree el login
- Escribe en el chat del modo agente:
Créame el login para la aplicación
- Copilot generará automáticamente los archivos y carpetas necesarios para el login.
5. Visualizar el resultado
- Haz clic derecho sobre el archivo HTML generado y elige “Abrir en servidor” o usa una extensión tipo Live Server.
- Puedes ver una previsualización que simula un móvil si quieres revisar cómo se ve en versión celular.
6. Resultados y consejos
- Si usas modelos GPT 4.1, el código generado puede ser funcional pero visualmente sencillo.
- Usando Claude 4 con instrucciones para mejores diseños, obtendrás un login más atractivo visualmente.
- No olvides ajustar tus instrucciones si necesitas que el diseño sea más profesional o específico.
¿Cómo se ve el login?
- Si usas solo JavaScript y Tailwind, Copilot creará un archivo HTML básico.
- Con modelos avanzados y buenas instrucciones (por ejemplo, “diseño llamativo, botones que cambien de color al pasar el mouse”), el agente generará un login responsive, acorde a una aplicación real para móvil.
- Diferencia visual: Claude 4 suele generar un login “mucho más bonito”, mientras que GPT 4.1 entrega algo más básico.
La clave está en las instrucciones
Aquí es donde muchos fallan. No basta con pedirle a Copilot que “haga un login”. La magia está en:
- Especificar las tecnologías: JavaScript puro, Tailwind, React, lo que necesites.
- Definir el nivel de diseño: ¿Quieres algo básico o una interfaz profesional?
- Dar contexto del proyecto: ¿Es para una app móvil? ¿Una web corporativa?
El archivo copilot-instructions.md se convierte en tu mejor aliado. Ahí defines una vez las reglas del juego y Copilot las respeta en todo el proyecto.
Resumen
- Configura el contexto antes de pedir el login.
- Usa Claude 4 para mejores resultados visuales.
- Copilot crea los archivos y carpetas automáticamente, solo debes pedir:
Créame el login para la aplicación
- Visualiza con Live Server para ver el resultado estilo app móvil.
Repositorio de ejemplo
Si quieres ver el código completo y jugar con el ejemplo, aquí tienes el repositorio:
📂 Ver en GitHub
¿Te gustó ver la magia de Copilot en acción?
Si llegaste hasta aquí es porque algo te resonó. Tal vez porque, como yo, crees que estamos viviendo la época más emocionante para los que construimos cosas.
La IA no es el futuro. Es el presente. Y cada día aparecen nuevas formas de usarla que cambian las reglas del juego.
En mi laboratorio (HiPanda) experimento con estas herramientas todos los días. Algunas veces fracaso estrepitosamente. Otras veces descubro algo que funciona tan bien que me dan ganas de gritarlo desde el balcón.
¿Quieres ser el primero en conocer estos experimentos?
Suscríbete a mi newsletter y conoce de primera mano todos los trucos, herramientas y descubrimientos que voy probando en tiempo real. Sin cursos carísimos. Sin promesas de hacerte millonario. Solo experimentos reales de un indie hacker que disfruta construyendo cosas útiles.
PD: La próxima vez que alguien te diga que la IA no puede crear interfaces completas, muéstrale este artículo. Ya no es ciencia ficción, es miércoles por la tarde.