Utilizar mejor las IAs en VS Code con archivos Prompt

Por qué son importantes los archivos Prompt

En el minuto 0:00 Tim dice: "Utilizar un archivo prompt con una IA puede hacer que la experiencia pase de ser simplemente aceptable a genial" Un archivo prompt indica al modelo de IA cómo pensar, cómo proceder y cómo responder a una petición del usuario. Tim lo relaciona con el archivo "Beast Mode" de Burke Holland de Microsoft, un gran prompt del sistema que actúa como plantilla. De este modo, los desarrolladores pueden reducir las instrucciones repetitivas, reducir los errores y obtener un código generado más predecible dentro de VS Code.

Tim lo enmarca como una especie de ingeniería de instrucciones: estás construyendo un conjunto de instrucciones reutilizables para que, cuando más tarde escribas una instrucción rápida de usuario en la vista de chat o en el icono del AI Toolkit de la barra de actividades, la IA ya conozca tu estilo de codificación y tu estructura de proyecto preferida.

Recursos para desarrolladores de Tim

Antes de mostrar la herramienta, Tim (0:27) recapitula los recursos gratuitos y de pago que ofrece: nueve cursos completos, un décimo en iamtimcorey.com, además de un podcast en el que responde a las preguntas de los desarrolladores. Destaca que están pensadas para ayudar a los desarrolladores a perfeccionar sus habilidades y construir mejores flujos de trabajo. Esto explica por qué es importante un archivo de ayuda de VS Code AI: forma parte de las prácticas modernas para mejorar las tareas diarias de codificación.

Cómo configurar el modo bestia en VS Code

En el minuto 1:22, Tim pasa a la sección de herramientas de VS Code. Ya tiene el Modo Bestia instalado y seleccionado en "configurar modos" Explica que puede abrir la vista AI Toolkit, examinar modelos del catálogo de modelos y crear un nuevo modo personalizado. En este ejemplo, puedes hacer clic en Select Add Prompt, darle un nombre como "GitHub Chat Modes" y pegar el contenido del archivo (1:34). Esto almacena tu prompt de sistema personalizado para que esté siempre listo en tu espacio de trabajo.

El montaje de Tim muestra cómo se pueden combinar los modelos locales o los modelos en la nube con sus propias instrucciones de creación de avisos. Todo queda perfectamente ordenado en la carpeta raíz de VS Code o en otra carpeta almacenada, lo que facilita la repetición posterior.

Uso de la IA en un proyecto real

A partir del minuto 2:03, Tim demuestra la IA en su proyecto real de sitio web alojado en su espacio de trabajo de VS Code. Abre el código de la sección "Learning Paths" -esencialmente un sitio respaldado por Python/React- y muestra el menú de navegación de la aplicación. Quiere modificar el icono de la flecha para añadir una pequeña animación al pasar el ratón por encima (3:21).

Este es un escenario típico de desarrollador: tienes código front-end, te gustaría que un agente de IA generara el CSS por ti y no quieres escribir a mano cada detalle. Con un archivo de instrucciones ya cargado, las instrucciones para el usuario pueden ser breves y la IA se encargará de completar el contexto.

Preparación del AI Prompt

En el minuto 3:38, Tim utiliza la herramienta Recortes de Windows (Windows+Mayús+S) para capturar una pantalla en la que se ve la flecha (3:45). Este contexto visual ayuda a la IA. A continuación, escribe una indicación natural a las 4:43:

"En mi menú de navegación, en la sección de ruta de aprendizaje, gire la flecha de 30° a horizontal cuando pase el ratón por encima, y luego vuelva a girarla. Aquí tienes una captura de pantalla del aspecto actual"

Tim señala que más adelante podría especificar exactamente dónde colocar el CSS, pero comienza con la siguiente instrucción para probar la funcionalidad del Modo Bestia.

Plan de Modo Bestia

A las 6:00, Tim explica que Beast Mode describe un flujo de trabajo: identificar el selector correcto, añadir una clase CSS, añadir un efecto hover y, a continuación, probar y verificar. Incluso coloca el CSS en el archivo site.css correcto por encima de la raíz (6:42). Esto muestra cómo un esquema predefinido en su archivo prompt -sus "reglas" sobre dónde van los estilos- guía la respuesta de la IA.

Tim dice que este es el "gran problema" de utilizar un archivo de aviso: añade contexto, permitiendo que la IA funcione como si conociera la estructura de tu proyecto sin que tengas que repetir la descripción completa cada vez.

Iterar y perfeccionar

Cuando Tim comprueba el sitio a las 6:54, el código generado sólo afecta a una flecha y en la dirección equivocada. A continuación, refina la indicación a las 7:29 para invertir el efecto hover y aplicarlo a todas las flechas.

A las 8:49 se da cuenta de que ahora todas las flechas giran a la vez. Así pues, a las 9:06 envía otra solicitud al usuario para que la IA aplique el efecto sólo al elemento sobre el que se ha pasado el ratón. Tim comenta a las 9:38: "Hay que ajustar una IA. No siempre se hace lo correcto"

Este es un gran ejemplo de ingeniería de avisos dentro de la vista de chat. Usted edita, repite y guarda sus instrucciones hasta que la IA produce el resultado estructurado que desea. Dado que el archivo prompt ya suministra el prompt del sistema, cada nueva instrucción es sólo un pequeño refinamiento.

Resultado final

A las 9:52 Tim confirma que la animación ahora funciona por flecha: gira al pasar el ratón por encima, se restablece al apagarlo. Señala que puedes cambiar al tema claro o al oscuro, cambiar los colores, ralentizar la transición... lo que quieras (10:02). La clave es que la IA descubrió la transformación SVG y escribió el CSS por él (10:11).

Tim explica a las 10:30-11:20 que puedes ampliar el Modo Bestia o crear tu propio archivo prompt builder para definir cómo organizar los archivos, cómo quieres que se gestione el formato del código o cómo llamar a una función de Python. Así, las preguntas del día a día pueden ser mucho más breves y seguir dando respuestas coherentes.

Revisión del resultado de la IA

A las 11:50 Tim advierte que siempre hay que revisar los cambios de la IA. Incluso con un archivo prompt protegido y buenas prácticas, es posible que una IA añada una clase en el lugar equivocado o rompa las dependencias necesarias. En este ejemplo, la IA solo hizo cambios pequeños y razonables (añadir una clase CSS aquí, una línea de código allá), pero los desarrolladores deben comprobar el registro de cambios y perfeccionarlo si es necesario.

Tim concluye señalando que una vez que tengas un resultado que te guste, puedes guardarlo y reutilizarlo. Esa es la esencia del uso de modelos de IA y archivos de avisos dentro de VS Code: un flujo de trabajo repetible y coherente que convierte los avisos ad hoc en una experiencia fiable similar a la del SDK.

Lo que hay que aprender de la demostración de Tim Corey

Siguiendo el tutorial de Tim Corey en el vídeo se muestra cómo un archivo prompt bien diseñado dentro de Visual Studio Code puede:

• Proporcione un contexto coherente a los modelos de IA para que sus indicaciones puedan ser más breves.

• Maneje el código generado, la salida estructurada y el formato automáticamente.

• Intégrelo en su espacio de trabajo, barra de actividades y AI Toolkit para que pueda abrir, probar y perfeccionar fácilmente los avisos.

• Permiten navegar por los modelos, cambiar entre modelos locales o en la nube y aplicar las reglas de ingeniería rápida sin problemas.

Al almacenar las reglas en un archivo de instrucciones, se proporciona a la IA un guión de agente fiable que seguir, lo que permite centrarse en tareas de desarrollo de mayor nivel en lugar de repetir las mismas instrucciones.