Guía práctica
Este tutorial de vibe coding para principiantes te guía para crear una página sencilla de lista de tareas. Describe qué debe hacer, examina el resultado y usa lo que observes para orientar el siguiente cambio.
Una pequeña página de lista de tareas basta para practicar el proceso completo. No necesitas planificar toda una aplicación antes de escribir tu primer prompt.
Sigue este breve ciclo cada vez que hagas vibe coding: pide un resultado concreto, pruébalo tú mismo y luego solicita una corrección específica.
Pide una página de lista de tareas con un campo de texto, un botón para añadir tareas, casillas de verificación y una forma de borrar las tareas completadas. Indica qué debe ocurrir al actualizar la página y mantén sencilla la solicitud visual.
Añade una tarea, márcala como completada, borra las tareas completadas y vuelve a cargar la página. Anota exactamente qué acción falla en lugar de juzgar todo el proyecto por su apariencia.
Indica qué acción falla y cuál es el comportamiento esperado: por ejemplo, las tareas desaparecen al actualizar la página, pero deberían permanecer. Vuelve a probar la misma acción después del cambio.
Los elementos obligatorios mantienen este tutorial centrado en el comportamiento observable. Los opcionales facilitan la detección de problemas.
Un navegador en el que puedas abrir e interactuar con la página generada — Necesitas hacer clic en los controles y volver a cargar la página para verificar su comportamiento.
Una descripción de una sola frase de tu página de lista de tareas — Indica la acción del usuario y qué debería suceder después.
Una breve lista de pruebas: añadir, completar, borrar y actualizar — Usa las mismas comprobaciones después de cada cambio relevante.
Nombres de tareas de ejemplo sin información privada — Prueba primero con texto normal; después, con una entrada vacía y otra larga.
Una ventana estrecha del navegador móvilopcional — Úsala para comprobar que los botones y el texto de las tareas siguen siendo fáciles de usar.
Cuando esta pequeña página funcione, pasa a un proyecto con un solo desafío nuevo en lugar de añadir todas las funciones a la vez.
Las herramientas cambiaron, pero el hábito útil de este tutorial sigue siendo el mismo: examina un resultado antes de pedir otro.
La versión preliminar técnica de GitHub Copilot incorporó sugerencias de código con IA al flujo de trabajo de un editor. El desarrollador aún tenía que leer cada sugerencia y decidir si encajaba.
El lanzamiento público de ChatGPT facilitó describir una tarea de programación con lenguaje cotidiano y hacer preguntas de seguimiento sobre el resultado.
Las herramientas con vistas previas de interfaces generadas facilitaron comparar la pantalla solicitada con la que aparecía y, después, describir un cambio concreto.
Andrej Karpathy popularizó el término vibe coding. Para quien empieza, la conclusión práctica no es aceptar todos los resultados: ejecuta la página y comunica lo que sucede realmente.
Trata un resultado inesperado como información para la siguiente instrucción. Estas comprobaciones son más fiables que pedir repetidamente una versión mejor.
1
Haz clic en Añadir con un nombre de tarea corto. Si no aparece una nueva fila, dile a Vibe Code qué botón pulsaste, qué escribiste y qué esperabas ver. Pídele que haga funcionar esa interacción antes de solicitar cambios de estilo. Después de la corrección, prueba también a dejar el campo vacío: la página debería rechazarlo claramente o gestionarlo de forma deliberada.
2
Primero, confirma que puedes añadir y completar tareas antes de recargar la página. Después, actualízala y observa si la lista vuelve a aparecer. Si desaparece, solicita que las tareas se conserven durante la sesión del navegador o en el dispositivo local, e indica que las acciones de añadir y completar que ya funcionan deben seguir funcionando. Así, la corrección se puede comprobar y es menos probable que estropee otro control.
3
Reduce el ancho del navegador y comprueba si hay botones recortados, nombres de tareas que se salen del espacio disponible o controles demasiado juntos. Describe el problema concreto de la pantalla en lugar de pedir un rediseño completo. Después de cambiar el diseño, vuelve a probar las acciones de las tareas tanto con un ancho estrecho como con uno amplio; los cambios visuales pueden afectar por accidente a las zonas donde se puede hacer clic.
Una demostración funcional es un hito útil, no una prueba de que se hayan resuelto todos los casos excepcionales. Ten presentes estos límites al ampliarla.
La página de la lista de tareas puede parecer terminada aunque falle una casilla de verificación, la acción de borrar o el comportamiento al actualizar la página.
Qué hacer en su lugar
Repite la misma lista de pruebas de cuatro acciones después de cada cambio y anota exactamente qué acción falla.
Un pequeño ejercicio local no puede demostrar que el código generado sea seguro para datos confidenciales o para publicarlo.
Qué hacer en su lugar
Usa tareas ficticias de ejemplo, evita introducir información secreta y organiza una revisión independiente del código y la seguridad antes de manejar datos reales de usuarios.
Un campo vacío, un texto inusualmente largo y los clics repetidos pueden producir resultados distintos a los del caso habitual.
Qué hacer en su lugar
Añade casos excepcionales a tu lista de pruebas uno por uno y solicita una corrección específica para cada fallo.
Que las tareas se conserven tras actualizar la página en un dispositivo no significa que aparezcan en otro navegador o dispositivo.
Qué hacer en su lugar
Decide si realmente necesitas acceder desde varios dispositivos antes de solicitar funciones de almacenamiento o cuentas.
Empieza con la instrucción para crear la lista de tareas y luego comprueba tú mismo cada acción. Este tutorial de vibe coding para principiantes resulta más útil cuando cada solicitud de seguimiento identifica un problema observado y un resultado que se pueda comprobar.
Crea una página de lista de tareas con un campo de entrada, un botón Añadir, casillas de verificación y una opción para borrar las tareas completadas. Cada control produce un resultado visible, lo que facilita probar la página en comparación con una aplicación grande y descrita de forma imprecisa.
Puedes empezar describiendo la página con palabras cotidianas y probando sus controles en un navegador. Aprender a leer mensajes de error básicos y reconocer las partes de una página te ayudará a hacer correcciones más precisas.
Indica qué página quieres crear, sus controles esenciales y qué debe hacer cada uno. Incluye un requisito importante, como conservar las tareas después de actualizar la página, pero deja los detalles decorativos para más adelante.
Describe la acción que realizaste, qué ocurrió y qué esperabas que ocurriera. Por ejemplo, indica que al hacer clic en Añadir después de escribir una tarea no aparece ninguna fila; luego pide que se corrija esa interacción y vuelve a probarla.
Para este ejercicio, está terminado cuando puedes añadir una tarea, marcarla como completada, borrar las tareas completadas y actualizar la página sin perder tareas inesperadamente. Prueba a dejar el campo vacío y a usar una pantalla estrecha antes de dar por terminada la primera versión.