Lorenzo GM

Reflexiones sobre desarrollo web, ingeniería de software y prácticas tecnológicas modernas

Inglés|Español
Lorenzo GM

Capacitando a Perfiles No Técnicos con VSCode y GitHub Copilot

Cómo un diseñador construyó un prototipo B2B completo con datos simulados aprovechando VSCode y el modo agente de GitHub Copilot, sin necesidad de un perfil técnico avanzado.

Capacitando a Perfiles No Técnicos con VSCode y GitHub Copilot

Capacitando a Perfiles No Técnicos con VSCode y GitHub Copilot

La semana pasada trabajé con un compañero diseñador con un plazo ajustado. Teníamos que construir un prototipo de plataforma B2B para mostrar alrededor de 5 o 6 páginas con datos muy detallados de una base de datos de big data: gráficos, tablas, dashboards complejos. El objetivo: impresionar a un cliente en cuestión de días.

Esto es lo que pasó y lo que aprendí.

La Preparación: 2 Horas de Base Técnica

Mi rol al principio fue puramente técnico. Invertí un par de horas construyendo la base:

  • Una aplicación Next.js con una estructura de carpetas limpia y valores por defecto sensatos
  • Infraestructura lista para despliegue
  • Pipelines de CI/CD para que cada push disparara una compilación y una URL de vista previa

Esta base fue deliberadamente simple. Sin sobreingeniería. Solo el andamiaje suficiente para permitir que otra persona empezara a trabajar directamente.

La Incorporación: 1 Hora con el Diseñador

Una vez que la base estaba en su lugar, me senté con el diseñador para una única sesión de una hora. Cubrimos:

  1. Instalar VSCode — sencillo, nada intimidante
  2. Configurar GitHub Copilot — conectar la cuenta, activar la extensión
  3. Conceptos básicos del modo agente — cómo abrir el panel de chat, cómo describir lo que quieres, cómo revisar los cambios sugeridos
  4. Hacer commit y push — usando el panel de Control de Código Fuente de VSCode para preparar, hacer commit y push sin tocar el terminal

Una hora. Eso fue todo. El diseñador estaba listo para trabajar de forma independiente.

El Resultado: Un Prototipo Completamente Funcional

El diseñador asumió la responsabilidad de toda la implementación del frontend. Usando GitHub Copilot en modo agente:

  • Construyó las 5 páginas del prototipo con datos simulados
  • Aplicó la visión de diseño (layout, tipografía, paleta de colores) de forma autónoma
  • Iteró rápidamente sin necesidad de pedirme ayuda por cada pequeño cambio

El resultado final fue un prototipo completamente funcional — creado por el diseñador — que satisfizo cada requisito que el cliente había establecido.

El Momento Mágico: Cambios en Vivo Durante la Llamada con el Cliente

La mejor parte llegó durante la presentación al cliente. Mientras el cliente compartía su feedback en una llamada, nosotros ya estábamos aplicando algunos de los cambios solicitados en tiempo real. El cliente podía ver el sitio web actualizándose en vivo, directamente en respuesta a sus primeros comentarios de la reunión.

Ese tipo de capacidad de respuesta normalmente está reservada para ingenieros senior que conocen el código base de memoria. Aquí, vino de un diseñador que llevaba usando las herramientas menos de una semana.

Por Qué Esto Funciona

Varias cosas hicieron esto posible:

La base importó. La configuración que proporcioné incluía instrucciones claras, convenciones sensatas y una estructura sobre la que GitHub Copilot podía razonar bien. El agente de IA no estaba trabajando en el caos — tenía buen contexto sobre el que construir.

Los datos simulados eliminaron la dependencia difícil. El diseñador podía construir pantallas con aspecto realista sin necesitar un backend real. Esta es una técnica de prototipado estándar, pero se vuelve aún más poderosa cuando la persona que implementa las pantallas no es un ingeniero de backend.

El modo agente reduce la barrera significativamente. El diseñador no necesitaba conocer React, TypeScript o Tailwind en profundidad. Describían lo que querían en lenguaje natural, revisaban las sugerencias y las aprobaban o refinaban. La IA se encargaba de la sintaxis.

Mínima refactorización antes de producción. Como la base se configuró con buenos patrones desde el inicio, el prototipo requirió retrabajos mínimos antes de poder conectarse a APIs de backend reales. La calidad del código era suficientemente buena para construir sobre ella.

Lo Que Recomendaría

Si quieres probar esto con tu propio equipo:

  1. Invierte tiempo en la base. Una buena configuración del proyecto, convenciones claras e instrucciones README decentes pagan dividendos cuando personas no técnicas empiezan a trabajar en el código base.
  2. Mantén la incorporación corta y práctica. Una sesión enfocada en las herramientas que realmente van a usar (VSCode, modo agente de Copilot, conceptos básicos de Git) es suficiente para empezar.
  3. Empieza con datos simulados. No bloquees al diseñador esperando la disponibilidad del backend. Deja que construyan la experiencia completa de UI con placeholders realistas.
  4. Confía en el proceso. Se siente contraintuitivo entregar un proyecto frontend complejo a alguien sin un trasfondo tradicional de desarrollo. Pero con la configuración y herramientas adecuadas, funciona notablemente bien.

Reflexiones Finales

Esta experiencia reforzó algo en lo que he estado pensando desde hace un tiempo: la distinción entre roles "técnicos" y "no técnicos" en el desarrollo de software se está volviendo cada vez más difusa. Un diseñador con VSCode y GitHub Copilot puede entregar código frontend de calidad de producción. Un analista de negocio puede prototipar una funcionalidad de punta a punta. Un product manager puede hacer un cambio de contenido sin esperar a un desarrollador.

El cuello de botella ya no es la habilidad — es la configuración. Si le das a las personas la base adecuada y una breve introducción a las herramientas, pueden contribuir de formas que habrían sido inimaginables hace solo unos años.

El cliente quedó impresionado. Honestamente, yo también.

Artículos relacionados