Vibe coding es crear software describiendo lo que quieres a una IA, que escribe el código mientras tú diriges, pruebas y corriges. Aquí la IA se usa a fondo: puedes trabajar con agentes (lección IA para programar: herramientas, contexto, tokens y MCP) para prototipar y construir. "Responsable" significa que el resultado sigue siendo tuyo: lo entiendes, lo has comprobado y sabrías defenderlo y cambiarlo sin IA.

Hay un momento en que el proyecto crece y cada cambio de la IA rompe otra cosa: si no entiendes el código, te quedas atrapado. Por eso conviene aprender primero sin IA.

1. Describir. Escribe un briefing como para un encargo de diseño: objetivo, público, contenido real, identidad (colores, tipografías), restricciones técnicas (accesible, sin librerías innecesarias, tema de bloques) y lo que no quieres. Pon las reglas permanentes en el fichero de instrucciones del proyecto (AGENTS.md, lección IA para programar: herramientas, contexto, tokens y MCP).
2. Generar por pasos pequeños: primero la estructura, después un componente, después el siguiente. Un paso = una petición = un commit.
3. Verificar cada paso con la lista de la lección Programar con un copiloto de IA: funciona, consola limpia, teclado, contraste, móvil, sin código que no entiendas.
4. Iterar: pide cambios concretos ("el foco de los botones no se ve; usa un contorno de 3 px del color de acento") en lugar de "mejóralo".
5. Documentar en tu diario de prompts: qué pediste, qué obtuviste, qué aceptaste, qué cambiaste tú y por qué.

• Chat o asistente del editor (Copilot en VS Code): para el JavaScript del filtro, el CSS adicional y dudas de WordPress.
• Agentes (modo agente de Copilot, Claude Code, Codex…): trabajan sobre los ficheros del proyecto. Úsalos con Git y revisando cada cambio.
• WordPress Studio incluye su propio agente, Studio Code, que crea y modifica sitios y temas con WP-CLI, y puede conectarse a otros asistentes mediante MCP (lección IA para programar: herramientas, contexto, tokens y MCP). Está en acceso anticipado y usa créditos de WordPress.com o una clave propia (así en septiembre de 2026; puede haber cambiado).
• Telex, de Automattic, genera bloques de WordPress a partir de una descripción y los descarga como un plugin .zip que se instala en tu sitio. Es una forma rápida de crear un bloque a medida.

Un ejemplo hecho con Telex: un bloque Proyectos con filtros que muestra un tipo de contenido en una cuadrícula con botones por categoría. Al revisar el código generado se ve lo mismo que en la lección Eventos:

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const filter = button.dataset.filter;
    buttons.forEach((btn) => btn.classList.remove("is-active"));
    button.classList.add("is-active");
    button.setAttribute("aria-pressed", "true");
    // … y oculta las tarjetas cuyo data-terms no incluye el filtro
  });
});

querySelectorAll, forEach, addEventListener, dataset, classList y aria-pressed: la IA usa las mismas piezas. Por eso puedes revisarlo.

Pasos para la alternativa C.2:

1. En Telex, describe el bloque: tipo de contenido (proyecto) y taxonomía (disciplina), tarjeta con imagen, título y extracto, botones accesibles con estado, transiciones que respeten prefers-reduced-motion.
2. Prueba el resultado en la vista previa e itera.
3. Descarga el .zip e instálalo en tu sitio (Plugins → Añadir nuevo → Subir plugin).
4. Insértalo en la página Portafolio y ajusta en la barra lateral el tipo de contenido y la taxonomía.
5. Revisa el código (view.js, render.php) y anota en tu diario qué hace cada parte.

• Código que no entiendes: si no puedes explicarlo, no es tuyo.
• Plugins generados sin revisar: un plugin tiene acceso a todo el sitio. Instálalos solo en local, revisa lo que hacen y no los subas a un sitio real sin supervisión.
• Dependencia de un servicio: guarda siempre una copia (el .zip del plugin, tu código en Git).
• Privacidad: no des a la IA datos personales reales de clientes ni contraseñas.
• Coste: muchas herramientas funcionan con créditos; planifica las peticiones.
• Uniformidad: la IA tiende a diseños genéricos. Tu mirada de diseño es lo que marca la diferencia: decide tú la identidad y exígesela.

1. Escribe el briefing de tu portafolio en un AGENTS.md (qué es, identidad, restricciones técnicas y de accesibilidad, qué no quieres).
2. Con un agente o con Telex, genera en una sesión un componente para tu sitio y verifícalo con la lista de la lección Programar con un copiloto de IA.
3. Registra en el diario tres prompts: el que funcionó, el que no y por qué.