Ahora la IA pasa a colaborar: puede proponerte código, pero tú decides, lo revisas, lo entiendes y lo adaptas, y declaras qué ha hecho. En la lección IA para programar: herramientas, contexto, tokens y MCP viste qué son los modelos, los tokens y el contexto; aquí aprendes un método para trabajar con ellos sin dejar de aprender.

PRIMM es una forma de aprender a programar a partir de código que no has escrito tú. Encaja muy bien con la IA, porque convierte "copiar y pegar" en "estudiar y mejorar":

Si no puedes predecir ni explicar una línea, esa línea no puede ir en tu proyecto.

Un buen prompt para código tiene cuatro partes:

1. Contexto: qué proyecto es y qué ya tienes (pega el HTML relevante).
2. Tarea concreta y pequeña: una sola funcionalidad.
3. Restricciones: JavaScript sin librerías, addEventListener, accesible, nombres en español, sin innerHTML con datos del usuario…
4. Formato de respuesta: el código comentado y una explicación de cada parte.

Estoy haciendo mi portfolio (HTML, CSS y JavaScript sin librerías, nivel principiante).
Tengo estas tarjetas:

<article class="tarjeta" data-categoria="branding">…</article>
<article class="tarjeta" data-categoria="web">…</article>

Y estos botones: <button type="button" class="filtro" data-categoria="todos">Todos</button> …

Quiero que al pulsar un botón se muestren solo las tarjetas de esa categoría.
Restricciones: addEventListener (no onclick), una función con nombre filtrar(categoria),
el botón activo con aria-pressed="true", ocultar con una clase .oculto.
Explícame cada parte del código como si fuera la primera vez que uso el DOM.

Compáralo con "hazme un filtro de proyectos en JavaScript": la segunda versión da código genérico que no encaja con tu HTML.

Antes de aceptar cualquier código generado:

• Lo entiendo entero (PRIMM). Si hay algo que no, pregunto o lo quito.
• Funciona y la consola no muestra errores (F12 → Consola).
• Se usa con teclado: botones reales, foco visible, Escape donde tenga sentido.
• Comunica el estado (aria-expanded, aria-pressed, texto del botón).
• No usa formas antiguas: var, onclick="…", document.write, jQuery.
• No usa innerHTML con texto que escribe la persona.
• No añade librerías ni CDN que no has pedido.
• Encaja con mi código: mis clases, mis nombres, mi estilo.
• Casos límite: ¿qué pasa si no hay tarjetas, si el campo está vacío, si pulso dos veces?

En VS Code, GitHub Copilot sugiere código mientras escribes y tiene un chat que ve tus ficheros (lección Visual Studio Code a fondo). Úsalo así mientras aprendes:

• Escribe primero un comentario con lo que quieres hacer y deja que proponga; luego aplica PRIMM a la sugerencia.
• Usa el chat para explicar código seleccionado ("explica esta función").
• El modo agente, que cambia varios ficheros a la vez, déjalo para cuando domines lo anterior (lección Vibe coding responsable).
• Pon en tu proyecto un fichero de instrucciones (AGENTS.md o .github/copilot-instructions.md, lección IA para programar: herramientas, contexto, tokens y MCP) con tus reglas: sin librerías, accesible, nombres en español.
• Cuando practiques para aprender algo nuevo, desactiva Copilot.

Si estudias o trabajas en equipo, documenta en cada proyecto:

• Herramienta (y modelo, si lo sabes).
• Para qué la usaste: explicación, código de partida, depuración, textos.
• Prompts clave (copia los dos o tres más importantes).
• Qué cambiaste tú del código generado y por qué.

Usar IA no es el problema; el problema es ocultarla o no entender lo que presentas como tuyo.

1. PRIMM: pide a una IA una función que genere una paleta de 5 colores aleatorios en HSL. Antes de ejecutarla, escribe qué crees que hará. Ejecútala, explica cada línea y modifícala para que todos los colores tengan la misma luminosidad.
2. Prompt vago contra prompt con contexto: pide un "botón de modo oscuro" de las dos formas y compara los resultados con la lista de comprobación.
3. Cazar errores: pide un acordeón de preguntas frecuentes y busca al menos dos problemas de accesibilidad en lo que genere.