definiciones

• un término acuñado por Andrej Karpathy es un estilo de programación basado en agentes de IA.
• Se describe una tarea o algorítmo en palabras y el agente establece la arquitectura y contenido del código.
• La comprensión del código no es una variable determinante.
• Cuando los errores, generalmente por convenciones, ocurren simplemente se copia y pega el error de la consola en el prompt del agente.
• Debido a la longitud y complexificación de la sesión de chat, el agente incurre en alucinaciones o errores recursivos, por lo cual es necesario la intervención del humano que puede recurrir a conocimientos macro de código como al viejo estilo de búsqueda en foros como stackoverview.

---

• Controversias:
  • Que significa que un humano programe sin realmente entender que es lo que está haciendo?
  • Algunos expertos consideran que es una herramienta util para prototipado.
  • Cuando se escala en complejidad es imposible (por ahora) conseguir resultados útiles sin conocer la lógica tecnológica.

---

vibe coding (a Marzo de 2026)

---

vscode forks

windsurf cursor antigravity codex

---

basados en prompt

claude cli gemini cli ollama

---

agénticos

openclaw claude code codex

---

biblioteca para vscode vim

copilot cline amazon codewhisper continue cody

---

basado en web

lovable replit.ai

---

modelos de IA

solar-10.7b (10.7B) https://huggingface.co/upstage/SOLAR-10.7B-Instruct-v1.0 dolphin-mistral 10.7B qwen 1.5 7B (muy censurado) neuralhermes 2,5 KM láser openHermes deepseek-coder tiefighter (escritura) fimbulvetr-11B-v2 (ficción, solar)

---

Pasos prácticos para evaluar un modelo

1. Examinar la ficha de modelo :
   • Hugging Face proporciona “tarjetas modelo” detalladas que resumen:
     • Detalles de la formación.
     • Tareas admitidas.
     • Tamaño y limitaciones del modelo.
2. Experimenta localmente:
   • Pruebe el rendimiento, la latencia y la compatibilidad del hardware.
3. Benchmark:
   • Evalúe sus conjuntos de datos para medir la precisión, el rendimiento y la utilización de recursos.

---

A. evaluación de razonamiento

obediencia, concisión y estructura.

Explica en 3 frases qué es la fotosíntesis para un estudiante de 12 años. No uses metáforas. Máximo 60 palabras.

Qué observar:

• respeta número de frases
• respeta longitud
• explica sin divagar
• evita adornos innecesarios

---

B. razonamiento corto en respuesta verificable.

Ana tiene 3 cajas. En cada caja hay 4 bolsas. En cada bolsa hay 2 canicas. ¿Cuántas canicas hay en total? Responde solo con el número y una línea de cálculo.

Qué observar:

• exactitud
• formato
• tendencia a agregar texto no pedido

note: respuesta esperada 24 3 × 4 × 2 = 24

---

C. reformulación

Reescribe esta oración con mayor precisión: “La tecnología cambió bastante la música”.

Qué observar:

• precisión léxica
• economía expresiva
• naturalidad sintáctica
• capacidad de reformulación real, no mera paráfrasis plana

---

Recursos recomendados

• Documentación de Hugging Faces :
  • Biblioteca Transformers
  • Centro de modelos
• Guías de ajuste fino y cuantización :
  • Blogs y foros de la comunidad Hugging Face
• Herramientas para el análisis de modelos :
  • Biblioteca evaluate de Hugging Face.
  • Herramientas de creación de perfiles de rendimiento (por ejemplo, NVIDIA Nsight).

---

ejemplos

https://vibecode.games/

---

Módulo 1: Fundamentos del Vibecoding

¿Qué es el Vibecoding?

El Vibecoding es la práctica de crear experiencias audiovisuales que resuenen con las emociones y los patrones de atención humanos. Combina:

• Procesamiento de audio: uso de la API de audio web para generar, manipular y visualizar sonido
• Programación visual: creación de gráficos dinámicos con Three.js
• Tecnologías front-end: Creación de interfaces adaptativas con marcos de trabajo modernos
• Sistemas de conocimiento: Gestión de procesos creativos con herramientas como Obsidian

---

El enfoque a escala humana

• Comprensión de los niveles de atención y la carga cognitiva
• Diseño para una participación sostenible
• Consideraciones éticas en el diseño de experiencias digitales

---

Objetivos de aprendizaje

• Comprender los conceptos fundamentales del vibecoding
• Reconocer la importancia del diseño centrado en el ser humano
• Identificar las implicaciones éticas de las tecnologías que captan la atención

---

Módulo 2: Fundamentos técnicos

Fundamentos de la API de audio web

Configuración básica del contexto de audio

const a=new AudioContext(),o=a.createOscillator(),g=a.createGain();
o.connect(g); g.connect(a.destination);
o.start();
g.gain.setValueAtTime(0.1,a.currentTime);
g.gain.exponentialRampToValueAtTime(0.0001,a.currentTime+1);
o.stop(a.currentTime+1);

// Create audio context
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Create oscillator for basic sound generation
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();

---

Nodos de audio y flujo de señal

• Source nodes (oscillators, audio buffers)
• Effect nodes (filters, gain, delay)
• Destination nodes (speakers, analyzers)

---

Análisis y visualización de audio

// Create analyzer node for frequency data
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Get frequency data for visualization
analyser.getByteFrequencyData(dataArray);

Three.js Integration

Basic Scene Setup

(async () => {
  if (!window.THREE) {
    await new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://unpkg.com/three@0.160.0/build/three.min.js';
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  const existingCanvas = document.getElementById('three-console-demo');
  if (existingCanvas) existingCanvas.remove();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 3;

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.id = 'three-console-demo';
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  const onResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  };

  window.addEventListener('resize', onResize);

  const animate = () => {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  };

  animate();
})();

---

Audio-reactive Visuals

// Link audio analysis to visual properties
function animate() {
    requestAnimationFrame(animate);
    
    // Get audio data
    analyser.getByteFrequencyData(dataArray);
    
    // Calculate average amplitude
    let sum = 0;
    for (let i = 0; i < dataArray.length; i++) {
        sum += dataArray[i];
    }
    const avg = sum / dataArray.length;
    
    // Apply to visual properties
    cube.scale.x = cube.scale.y = cube.scale.z = 1 + avg / 256;
    
    renderer.render(scene, camera);
}

---

ejemplo para console

(async () => {
  if (!window.THREE) {
    await new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://unpkg.com/three@0.160.0/build/three.min.js';
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  const oldCanvas = document.getElementById('three-audio-reactive-demo');
  if (oldCanvas) oldCanvas.remove();

  const oldLabel = document.getElementById('three-audio-reactive-label');
  if (oldLabel) oldLabel.remove();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 3;

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.id = 'three-audio-reactive-demo';
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: false });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  const label = document.createElement('div');
  label.id = 'three-audio-reactive-label';
  label.textContent = 'Solicitando acceso al micrófono...';
  Object.assign(label.style, {
    position: 'fixed',
    top: '12px',
    left: '12px',
    color: '#00ff00',
    background: 'rgba(0,0,0,0.6)',
    padding: '8px 10px',
    font: '12px monospace',
    zIndex: 99999
  });
  document.body.appendChild(label);

  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  if (audioContext.state === 'suspended') {
    await audioContext.resume();
  }

  let analyser, dataArray;

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
    const source = audioContext.createMediaStreamSource(stream);

    analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;
    analyser.smoothingTimeConstant = 0.8;

    source.connect(analyser);

    const bufferLength = analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);

    label.textContent = 'Micrófono activo';
  } catch (err) {
    console.error('No se pudo acceder al micrófono:', err);
    label.textContent = 'Sin micrófono: animación básica';
  }

  const onResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  };

  window.addEventListener('resize', onResize);

  function animate() {
    requestAnimationFrame(animate);

    let avg = 0;

    if (analyser && dataArray) {
      analyser.getByteFrequencyData(dataArray);

      let sum = 0;
      for (let i = 0; i < dataArray.length; i++) {
        sum += dataArray[i];
      }
      avg = sum / dataArray.length;
    }

    const scale = 1 + avg / 256;
    cube.scale.x = scale;
    cube.scale.y = scale;
    cube.scale.z = scale;

    cube.rotation.x += 0.01 + avg / 20000;
    cube.rotation.y += 0.01 + avg / 18000;

    renderer.render(scene, camera);
  }

  animate();
})();