¿Quieres crear tu primera aplicación con IA pero no sabes por dónde empezar? La todo app es el proyecto perfecto para iniciarte en vibe coding. En una hora exacta, vas a construir una aplicación funcional que te permite añadir, marcar y eliminar tareas. Sin necesidad de conocimientos de programación: simplemente vas a describir lo que quieres a Claude Code, y la IA va a generar el código por ti. Esta guía te muestra exactamente qué escribir, en qué orden, y cómo resolver los problemas más comunes. Al final, tendrás una aplicación real que podrás mostrar, mejorar y usar a diario.
¿Por qué empezar con una todo app en vibe coding?
Una todo app reúne todos los fundamentos del desarrollo sin la complejidad técnica. Cuando creas una lista de tareas, aprendes a gestionar la visualización de información, la adición de nuevos datos, su modificación y su eliminación. Estas cuatro operaciones (que se llaman CRUD en jerga: Create, Read, Update, Delete) constituyen el 80% de lo que hacen las aplicaciones modernas.
El vibe coding hace este proyecto accesible en una hora cuando a un principiante con métodos tradicionales le llevaría varias semanas. No necesitas entender la sintaxis de JavaScript, los eventos del DOM o la gestión de estado. Simplemente describes lo que quieres, y Claude Code traduce tus intenciones en código funcional.
Según un estudio de GitHub publicado en 2025, los desarrolladores que usan asistentes de IA terminan sus proyectos 55% más rápido que quienes programan manualmente. Para un principiante total, el ahorro de tiempo es aún más espectacular: pasas de varios meses de aprendizaje a solo unas horas de práctica.
Este primer proyecto también te da una base concreta para entender cómo funciona el vibe coding. Vas a ver en tiempo real cómo tus descripciones se transforman en interfaz, cómo corregir errores y cómo mejorar progresivamente tu aplicación.
Las herramientas necesarias para tu primer proyecto
Necesitas tres elementos: una cuenta de Claude Code, un navegador web moderno y un editor de texto básico. Nada que instalar, nada que configurar. Claude Code funciona completamente en línea y genera código que puedes probar directamente en tu navegador.
Para crear tu cuenta de Claude Code, ve a claude.ai e inscríbete con tu correo. La versión gratuita es más que suficiente para este proyecto: tienes derecho a 50 mensajes al día, ampliamente suficiente para construir tu todo app y perfeccionarla. Si quieres más detalles sobre la configuración inicial, consulta nuestro tutorial Claude Code para principiantes.
En cuanto al navegador, Chrome, Firefox, Safari o Edge funcionan perfectamente. Simplemente vas a abrir un archivo HTML local para probar tu aplicación. Ningún servidor web necesario para este primer proyecto.
Para el editor de texto, el Bloc de notas de Windows o TextEdit de Mac funcionan, pero te recomiendo Visual Studio Code (gratuito en code.visualstudio.com). Colorea el código automáticamente, lo que facilita la lectura, incluso si aún no entiendes todo.
Opcionalmente, prepara una carpeta en tu ordenador donde vas a guardar tu proyecto. Llámala "mi-todo-app" por ejemplo. Ahí pondrás los archivos que Claude va a generar.
El prompt inicial para lanzar tu todo app
Empieza con este prompt exacto: "Crea una todo app simple en HTML, CSS y JavaScript en un solo archivo. Quiero poder añadir tareas, marcarlas como completadas y eliminarlas. Diseño minimalista y moderno." Este prompt contiene todos los elementos esenciales sin entrar en detalles técnicos que aún no dominas.
La precisión "un solo archivo" es crucial para empezar. Claude va a generar un archivo HTML que contiene todo: la estructura de la página, el estilo visual y la lógica funcional. Solo tienes un archivo que gestionar, lo que simplifica enormemente las cosas.
La mención "diseño minimalista y moderno" guía a Claude hacia una interfaz limpia y agradable a la vista, sin adornos que compliquen el código. Tendrás tiempo de añadir funcionalidades avanzadas más tarde.
Cuando envías este prompt, Claude responde generalmente en 10 a 20 segundos con un bloque de código completo. Verás un bloque que comienza con <!DOCTYPE html> y termina con </html>. Es normal: es el código de tu aplicación.
Copia la totalidad de este código, pégalo en tu editor de texto, y guarda el archivo con el nombre todo.html en tu carpeta de proyecto. Luego, haz doble clic en este archivo: se abre en tu navegador y ya ves tu primera aplicación funcional.
Si Claude te da varios archivos separados (HTML, CSS, JS), pídele: "¿Puedes ponerlo todo en un solo archivo HTML?" Va a fusionarlo todo por ti.
Probar y mejorar tu aplicación paso a paso
Abre tu archivo todo.html en el navegador y prueba cada funcionalidad: añade una tarea, márcala, elimínala. Si todo funciona a la primera, ¡felicidades! Si no, anota exactamente qué no funciona. Por ejemplo: "Cuando hago clic en Añadir, no pasa nada" o "Las tareas se muestran pero no puedo eliminarlas".
Vuelve a Claude y describe el problema con tus propias palabras. No necesitas entender por qué falla: simplemente explica qué observas. Claude va a analizar el código que generó y te va a proponer una corrección. Copia el nuevo código, reemplaza el antiguo en tu archivo, guarda y actualiza tu navegador (F5).
Este ciclo prueba-corrección-prueba es el corazón del vibe coding. No necesitas depurar el código tú mismo: simplemente describes qué no va bien, y la IA corrige. Según datos de Anthropic, Claude Code resuelve el 73% de los bugs al primer intento cuando la descripción del problema es clara.
Una vez que las funcionalidades básicas funcionan, mejora tu aplicación progresivamente. Aquí hay solicitudes simples que transforman tu todo app:
- "Añade un contador que muestre el número de tareas pendientes"
- "Cambia el color de fondo a azul claro y los botones a verde"
- "Haz que las tareas completadas aparezcan tachadas y grises"
- "Añade una animación cuando elimino una tarea"
- "Guarda las tareas para que permanezcan incluso si cierro el navegador"
Cada solicitud toma 30 segundos escribir y 20 segundos a Claude para generar la modificación. Copias, pruebas, validas. En 10 minutos, puedes transformar tu aplicación básica en algo realmente personal.
Los errores comunes y cómo resolverlos
El error número uno: olvidar guardar el archivo después de pegar el nuevo código. Copias el código de Claude, cierras el navegador, y no ves ningún cambio. Solución: siempre guarda (Ctrl+S o Cmd+S) antes de actualizar el navegador.
Segundo error frecuente: copiar solo una parte del código. Claude a veces genera respuestas largas, y puedes perder el final si no desplazas hasta abajo. Verifica siempre que copias desde <!DOCTYPE html> hasta </html> incluido.
Tercer riesgo: dar instrucciones contradictorias. Si pides "haz los botones rojos" y dos mensajes después "quiero un tema azul en todo", Claude va a intentar conciliar ambos y el resultado puede ser raro. Solución: si cambias de opinión, dilo claramente: "Finalmente, olvida el rojo, quiero todo en azul".
Cuarto problema: el archivo no se abre en el navegador sino en el editor de texto. Pasa si la extensión de archivo es .txt en lugar de .html. Cuando guardes, asegúrate de escribir bien todo.html con el .html al final. En Windows, puede que tengas que activar la visualización de extensiones de archivo en las opciones del explorador.
Quinto error: pedir demasiadas cosas a la vez. "Añade categorías, fechas de vencimiento, un sistema de prioridades y un modo oscuro" probablemente generará código con bugs. Procede por etapas: una funcionalidad a la vez, prueba, valida, luego pasa a la siguiente.
Si realmente nada funciona después de varios intentos, pídele a Claude: "Genérame una todo app completa en un solo archivo HTML, versión lo más simple posible, solo añadir y eliminar tareas". Vuelve a empezar desde esta base minimalista y construye progresivamente.
Ir más allá después de tu primera todo app
Una vez que tu todo app funciona, has adquirido los fundamentos del vibe coding y puedes abordar proyectos más ambiciosos. La lógica es la misma: describes lo que quieres, pruebas, corriges, mejoras. Pero ahora puedes apuntar a aplicaciones más complejas.
Proximo paso natural: añade persistencia de datos. Pídele a Claude: "Guarda las tareas en el localStorage del navegador para que permanezcan incluso después de cerrar". Esta funcionalidad transforma tu todo app en una herramienta realmente útil a diario.
Luego, explora las categorías: "Añade la posibilidad de crear listas diferentes (Trabajo, Personal, Compras) con pestañas para cambiar de una a otra". Empiezas a estructurar datos más complejos sin escribir una línea de código.
Para ir aún más lejos, aprende a crear una aplicación completa con IA. Esta guía te muestra cómo pasar de un proyecto simple a una verdadera aplicación web con base de datos y autenticación.
También puedes mejorar tus prompts aplicando las técnicas de ingeniería de prompts. Cuanto mejor comuniques con Claude, más el código generado corresponderá exactamente a lo que quieres.
Finalmente, diversifica tus proyectos: crea una calculadora de propinas, un generador de citas aleatorias, un temporizador Pomodoro. Cada proyecto te hace descubrir nuevas posibilidades. En Skilzy, te guiamos a través de 12 proyectos progresivos que te llevan de principiante total a creador de aplicaciones funcionales.
El vibe coding abre un mundo donde puedes construir lo que imaginas sin pasar meses aprendiendo sintaxis. Tu todo app es la primera piedra. Sigue experimentando, probando, pidiendo. Así es como se aprende.
Conclusión
Acabas de crear tu primera aplicación en vibe coding. En una hora, pasaste de cero a una todo app funcional que puedes usar y mejorar. Este método te permite construir proyectos concretos desde el primer día, sin ahogarte en teoría. Sigue experimentando con otras ideas, y únete a Skilzy para estructurar tu aprendizaje con proyectos progresivos y acompañamiento personalizado.
