¿Cómo aprender con AI?

¿Por qué este fundamental existe?

Porque hoy se aprende de otra forma. La IA ya no es una novedad, es el nuevo suelo.

Ignorarla te deja atrás; usarla mal, también.

No reemplaza tu esfuerzo, pero si la integras con criterio, acelera tu curva de aprendizaje y te convierte en un mejor profesional.

Aquí no vas a generar código ni depurar errores —eso llegará en fundamentos como JavaScript o Testing.

Esta unidad trata de aprender a aprender con IA: cómo apoyarte en ella para pensar mejor, avanzar más rápido y aprender con claridad.

¿Qué es AI?

Es un conjunto de técnicas matemáticas y computacionales diseñadas para que las máquinas puedan *reconocer patrones, aprender de datos y tomar decisiones o generar contenido con base en ello*. La rama que más impacto está teniendo en nuestro trabajo como desarrolladores es la llamada IA generativa, que es capaz de crear texto, imágenes o incluso código, como respuesta a una instrucción humana.

La inteligencia artificial generativa funciona sobre lo que se llama un LLM (Large Language Model), que es un modelo estadístico entrenado con grandes volúmenes de texto para predecir la mejor respuesta posible a partir de una entrada.

No es un motor de búsqueda ni una base de datos. Responde según patrones que ha aprendido, no según “hechos”.

Mini-definición útil

IA = modelo estadístico que predice respuestas a partir de tu prompt.

No necesitas entender la arquitectura interna. Solo aprender a formular, evaluar y refinar.

Quick win

• Qué es un prompt, por qué importa, y cómo diseñarlo.
• La fórmula RTCF para crear prompts potentes.
• Dos formas de integrar IA en tu día a día: ChatGPT como tutor · Copilot como asistente en el editor.
• Tres errores comunes al usar IA y cómo evitarlos.
• Un mini-reto: publicar tu primer prompt eficaz en el canal #ai-checkpoints.

Setup exprés (ningún coste asociado)

(Claude, Perplexity, Gemini... para lo que nos ocupa, son similares. Aprende una, transfieres a todas.)

¿Qué es un prompt?

Un prompt es simplemente lo que le pides a una inteligencia artificial. Es tu input. La pregunta o instrucción que introduces en una herramienta como ChatGPT, Copilot, Claude o Perplexity para obtener una respuesta útil.

Aprender a escribir buenos prompts es una habilidad. No necesitas escribir como un poeta, pero sí necesitas ser claro, preciso y saber qué esperas recibir.

Un buen prompt te devuelve claridad. Un mal prompt, ruido.

Fórmula RTCF (Rol · Tarea · Contexto · Formato)

Rol: ***Eres mi tutor de Frontend.

Tarea: Explica cómo funciona inline-block.

Contexto: Soy principiante, acabo de ver Box Model.

Formato: Usa una analogía visual + ejemplo con código.

RTCF te obliga a pensar antes de pedir. Eso filtra el ruido y genera respuestas más útiles.

PROTIP: Puedes pedirle que actúe y se comporte como una figura pública.

Situaciones cotidianas con RTCF

No entiendes inline-block

Rol: Eres profesor de CSS para principiantes.

Tarea: Explicar el comportamiento de inline-block.

Contexto: Alumno acaba de ver Box Model pero se confunde con inline-block.

Formato: Metáfora visual + ejemplo con código.

Eres profesor de CSS para principiantes. Explícame cómo se comporta la propiedad inline-block. Acabo de ver Box Model pero me confunde por qué inline-block ocupa espacio como block pero no genera salto de línea. Quiero una metáfora visual, un ejemplo práctico y algo de código para entenderlo bien.

Alineación con Flexbox

Rol: Eres un experto en maquetación moderna.

Tarea: Ayudar a alinear dos elementos opuestos en una fila.

Contexto: El alumno está atascado usando Flexbox.

Formato: Explicación paso a paso con el uso correcto de propiedades CSS.

Eres un experto en maquetación moderna. Ayúdame a alinear dos elementos en una misma fila: uno a la izquierda y otro a la derecha. Estoy atascado usando Flexbox y no sé si estoy aplicándolo bien. Quiero una explicación paso a paso y qué propiedades debería usar.

Repasar conceptos

Rol: Eres un tutor de CSS.

Tarea: Crear un mini-test de repaso sobre la cascada.

Contexto: El alumno acaba de ver la lección sobre cascada CSS.

Formato: 5 preguntas tipo test con retroalimentación en cada respuesta.

Eres tutor de CSS. Quiero repasar lo que acabo de aprender sobre la cascada CSS. Acabo de terminar esa lección y necesito fijar conceptos. Hazme 5 preguntas tipo test con 4 opciones cada una y retroalimentación para cada respuesta.

Crear plan de estudio

Rol: Actúa como mentor de desarrollo web.

Tarea: Crear un plan de estudio.

Contexto: Alumno sin experiencia previa quiere aprender desde cero.

Formato: Plan de 8 semanas con teoría, práctica y repaso organizado.

Eres un mentor de desarrollo web. Quiero que me prepares un plan de estudio. Estoy empezando desde cero y quiero aprender desarrollo web desde las bases. Dame un plan de 8 semanas dividido en teoría, práctica y repaso.

Copilot: lo imprescindible para empezar

Diferencias entre modos

• Ask: responde una pregunta puntual en lenguaje natural.
• Edit: edita el código seleccionado según la instrucción dada.
• Agent: analiza múltiples archivos y tareas a la vez. Usa contexto profundo (consume más).

Consejo: empieza con Ask/Edit. Usa Agent cuando estés trabajando en un proyecto real.

Glosario

• Add Context: adjunta archivos o carpetas para dar más contexto a Copilot.
• Files and Folders: incluye archivos enteros como referencia.
• Instructions: añade instrucciones generales (como un prompt persistente).
• Problems: comparte errores para que Copilot los vea.
• Symbols: referencia rápida a funciones o variables concretas.
• Screenshot Window Tool: toma capturas del editor como contexto visual.

¿Enviar o Send with Codebase?

• Send: solo envía el código actual.
• Send with Codebase: envía también el contexto de archivos añadidos con Add Context. Útil para preguntas como “¿dónde está definido esto?” o “¿por qué falla este test?”.

Atajos clave

• ⌘ + I → sugerencia en línea.
• ⌘ + Ctrl + I → ventana de chat Copilot.
• Tab → aceptar sugerencia.
• Esc → rechazar.
• Clic derecho sobre código → explicaciones, edición o debug.

Ejemplo de workflow con IA

1. Usar Copilot en VSCode:
   • Pídele que cree una composición base con HTML,CSS y JavaScript, por ejemplo.
   • Escribe un comentario como // Add another button that says "Click Me" y observa cómo Copilot sugiere el código automáticamente.
   • O utiliza Copilot para completar funciones sencillas cuando estés atascado.
2. Usar ChatGPT:
   • Pregunta: “¿Qué significa que una etiqueta HTML sea semántica?”
   • Pide ejemplos: “Dame 3 ejemplos de etiquetas semánticas y para qué se usan.”
3. Corregir errores con IA:
   • Copia y pega un un trozo de código con error y escribe: “Este código me da un error, ¿puedes ayudarme a entender qué está mal y cómo corregirlo?”
4. Mejorar tu aprendizaje:
   • Pregunta: “Explícame el modelo de caja de CSS con una analogía visual.”

Tres errores típicos (y cómo evitarlos)

Mini-reto

Crea tu primer prompt con RTCF y publícalo.

1. Ve a ChatGPT y escribe:

   Eres mentor Frontend. Dame 3 proyectos básicos para practicar Flexbox y el selector :has().
   

2. Elige uno y desarróllalo.

3. Puedes publicar el resultado en la comunidad.

Consejos finales

• Usa RTCF para pedir explicaciones, analogías, ejercicios y quizzes. Luego, cuando tú tengas práctica (y tu LLM, contexto) puedes usar una comunicación más directa.
• Refina hasta que entiendas. Guarda tus prompts que funcionen.
• Ten claro tu objetivo antes de abrir una IA.
• Desactiva autocompletado cuando estés aprendiendo. Evita “teclear sin pensar”.
• La IA amplifica tu criterio, no lo reemplaza. Si no decides tú, decide ella por ti.

Próximo nivel

Más adelante la IA te ayudará a:

• Depurar código.
• Crear tests.
• Documentar automáticamente.
• Refactorizar y automatizar tareas.

Pero todo parte de esto: saber formular, saber evaluar, saber pensar.

Cuanto mejores sean tus prompts, mejor será tu aprendizaje.

Enlaces útiles

• ChatGPT
• GitHub Copilot
• Extensiones Copilot para VS Code