definiciones

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:

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:

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:

Recursos recomendados

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:

El enfoque a escala humana

Objetivos de aprendizaje

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

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();
})();