Vibecoding con Claude: construye tu primera herramienta real

Hay algo que te cambia el chip cuando lo experimentas por primera vez: abrir Claude, describir en español lo que quieres construir, y ver aparecer una herramienta funcional frente a tus ojos. Sin escribir una línea de código. Sin contratar a ningún desarrollador. Sin esperar semanas.

Eso es vibecoding sin programar: usar IA para construir herramientas reales describiendo lo que necesitas, como si le explicaras a alguien muy capaz exactamente lo que quieres.

Esta guía es diferente a los tutoriales que has visto. No te voy a decir "es muy fácil, cualquiera puede hacerlo" y luego dejarte con capturas de pantalla bonitas. Te voy a llevar paso a paso por el proceso completo: desde la idea hasta la herramienta publicada en internet, con los problemas reales que van a surgir y cómo resolverlos.

---

1. La idea: qué puedes construir (y qué no)

1.1 El tipo de herramienta que funciona perfectamente

Antes de empezar, conviene ser honesto sobre qué tipo de herramientas construye bien el vibecoding. No sirve para todo — pero sirve perfectamente para una categoría enorme de cosas útiles.

Las herramientas que mejor salen con este enfoque son las que giran en torno a guardar, organizar y mostrar información:

• Un rastreador de gastos personales o de equipo
• Un CRM sencillo para llevar el control de clientes
• Un formulario de recogida de leads con panel de administración
• Un gestor de tareas personalizado para tu flujo de trabajo
• Una herramienta para calcular presupuestos o precios
• Un catálogo de productos con buscador
• Un diario o log de trabajo con filtros
• Una base de datos de contactos con campos a medida

Si tu idea encaja en alguno de estos patrones — guardar datos, verlos organizados, filtrarlos, editarlos — tienes el 80% del camino resuelto.

1.2 La prueba de fuego para tu idea

Antes de ponerte a construir, hazte estas tres preguntas:

1. ¿Puedes explicar lo que hace en una frase? ("Una herramienta para que mi equipo registre el tiempo que dedica a cada proyecto y yo pueda verlo en un dashboard.")
2. ¿Sabes qué datos necesita guardar? (nombre del proyecto, persona, horas, fecha, descripción)
3. ¿Quién la va a usar y cómo? (yo solo, mi equipo de 5 personas, mis clientes)

Si puedes responder estas tres preguntas, tienes una idea viable. Si no, necesitas un paso previo: clarificar la idea con Claude.

"Claude es extraordinariamente bueno ayudando a precisar ideas vagas. Si no sabes exactamente qué quieres construir, cuéntaselo y pídele que te haga preguntas hasta que los dos tengáis claro el objetivo."

Para este tutorial vamos a construir algo concreto: una herramienta para que un freelance registre sus proyectos, horas trabajadas y facturación, con un panel donde ver el resumen del mes. Simple, útil, real.

---

2. Los requisitos: la conversación más importante

2.1 Por qué esta fase lo cambia todo

El error número uno de los principiantes en vibecoding es lanzarse directamente a construir sin haber definido bien qué quieren. El resultado: una herramienta que "funciona" pero no resuelve el problema real, y muchas horas de correcciones que podrían haberse evitado.

Antes de escribir el primer prompt de construcción, dedica 15 minutos a tener esta conversación con Claude:

Quiero construir una herramienta web para freelances que les permita:
- Registrar proyectos con nombre, cliente y tarifa por hora
- Registrar sesiones de trabajo (proyecto, fecha, horas, descripción)
- Ver un resumen mensual: horas totales, ingresos estimados, proyectos activos

Hazme las preguntas que necesites para entender bien lo que quiero construir
antes de que empiece a hacerlo.

Claude te va a preguntar cosas como: ¿necesitas login o la usas tú solo? ¿quieres que los datos se guarden en la nube o en el navegador? ¿necesitas exportar a PDF o Excel? ¿quieres facturas reales o solo un resumen? Cada respuesta define la complejidad real del proyecto.

2.2 El documento de requisitos que lo guía todo

Después de esa conversación, pídele esto:

Con todo lo que hemos hablado, escribe un documento de requisitos
para esta herramienta. Incluye:
1. Descripción en una frase
2. Funcionalidades principales (lista)
3. Datos que necesita guardar (tablas y campos)
4. Pantallas que necesita (lista)
5. Lo que NO incluye en esta versión inicial

Sé concreto y específico.

Este documento es tu brújula. Cuando durante la construcción te entren ganas de añadir cosas nuevas (siempre pasa), lo relees y te ancla a lo que realmente necesitas en la primera versión.

2.3 La regla de la versión mínima

"La herramienta perfecta que no existe no le sirve a nadie. La herramienta imperfecta que existe y funciona lo cambia todo. Empieza por la versión más pequeña que ya te sea útil."

Para nuestra herramienta de freelance, la versión mínima es: registrar proyectos, registrar horas, ver el total del mes. Nada más. Las facturas, los informes por cliente, la exportación a Excel — todo eso puede venir después, cuando ya tengas algo funcionando.

---

3. La base de datos: dónde viven tus datos

3.1 Qué es una base de datos (y por qué la necesitas)

Una base de datos es simplemente el lugar donde tu herramienta guarda la información para que no se pierda cuando cierras el navegador. Sin base de datos, todo lo que introduces desaparece al recargar la página.

No necesitas entender cómo funciona por dentro. Solo necesitas saber que existe y que hay que decirle a Claude que la use.

La combinación que mejor funciona para principiantes en vibecoding es Lovable (la plataforma donde construirás tu herramienta) con Supabase (la base de datos en la nube, gratuita hasta cierto punto). Lovable las conecta automáticamente cuando le dices que quieres guardar datos.

3.2 Cómo pedirle a la IA que diseñe tu base de datos

Cuando empieces a construir en Lovable, incluye esto en tu primer prompt:

Crea una aplicación web para freelances con estas tablas en la base de datos:

PROYECTOS:
- id (automático)
- nombre (texto)
- cliente (texto)
- tarifa_hora (número decimal)
- estado (activo/pausado/completado)
- created_at (fecha automática)

SESIONES:
- id (automático)
- proyecto_id (referencia a proyectos)
- fecha (fecha)
- horas (número decimal)
- descripcion (texto, opcional)
- created_at (fecha automática)

Conecta la base de datos con Supabase.

Ser específico aquí te ahorra muchos problemas después. Si dejas que la IA "imagine" la estructura de datos, puede hacer algo que funciona pero que luego es difícil de cambiar.

3.3 La integración que hace toda la magia

Lovable tiene un botón en el panel de "Integrations" para conectar Supabase en un clic. Cuando lo activas, la herramienta crea automáticamente las tablas en la base de datos según lo que le has pedido, y conecta los formularios del frontend con esas tablas.

No tienes que tocar nada de la base de datos directamente. Solo decirle a la IA qué datos quieres guardar y ella lo configura todo.

---

4. El backend: la lógica que hace que todo funcione

4.1 Qué es el backend (y por qué no tienes que preocuparte)

El backend es la parte invisible de tu herramienta: el código que recibe los datos que introduces, los guarda en la base de datos, hace los cálculos y devuelve los resultados. Cuando sumas las horas del mes, es el backend quien hace la suma.

La buena noticia: en vibecoding, el backend lo escribe la IA. Tú solo tienes que describir la lógica en lenguaje normal.

Cuando el usuario registre una nueva sesión de trabajo,
calcula automáticamente el importe de esa sesión
multiplicando las horas por la tarifa por hora del proyecto.
Muestra ese importe en la tabla de sesiones.

Claude entiende perfectamente este tipo de instrucciones y genera el código que las implementa.

4.2 Las reglas de negocio que debes especificar

Aquí es donde mucha gente se olvida de detalles importantes. Piensa en las reglas de tu herramienta antes de construirla:

• ¿Qué pasa si alguien intenta registrar 0 horas? ¿Se permite?
• ¿Pueden haber dos sesiones en el mismo día para el mismo proyecto?
• ¿Qué pasa si se borra un proyecto — se borran también sus sesiones?
• ¿Los proyectos "completados" siguen apareciendo en el dashboard?

No tienes que saber programación para responder estas preguntas. Solo tienes que pensar en cómo quieres que se comporte tu herramienta, y decírselo a Claude de forma clara.

Reglas de la aplicación:
- No se pueden registrar sesiones con 0 horas o menos
- Los proyectos completados no aparecen en el formulario de nueva sesión,
  pero sí en el historial y en el dashboard
- Si se borra un proyecto, sus sesiones se borran también
- El dashboard muestra siempre el mes actual por defecto

4.3 Iterar con precisión quirúrgica

El backend casi nunca sale perfecto a la primera. Cuando algo no funciona como esperas, el truco es ser muy específico sobre qué está mal:

Malo: "El dashboard no funciona bien"

Bueno:

En el dashboard, el total de horas del mes muestra 0
aunque tengo 3 sesiones registradas este mes.
La suma debería ser 12,5 horas. ¿Qué está pasando?

Cuanto más específico eres sobre el problema, más rápido lo resuelve la IA.

---

5. El frontend: lo que ves y tocas

5.1 Describir el diseño en lenguaje normal

El frontend es la parte visual: los formularios, los botones, las tablas, el dashboard. La IA puede generar diseños bastante decentes si le das referencias claras.

Diseño limpio y profesional, similar a Notion o Linear.
Fondo blanco, tipografía sans-serif, colores: azul oscuro para acciones
principales, gris claro para fondos secundarios.

Pantallas necesarias:
1. Dashboard — resumen del mes: tarjetas con horas totales,
   ingresos estimados y proyectos activos. Tabla de sesiones recientes.
2. Proyectos — lista de proyectos con estado, tarifa y botón de nueva sesión
3. Registrar sesión — formulario simple: proyecto, fecha, horas, descripción
4. Historial — tabla de todas las sesiones con filtro por mes y proyecto

5.2 Los formularios que tienen que funcionar bien

Un formulario bien diseñado hace que la herramienta sea un placer de usar. Un formulario mal diseñado hace que nadie la use. Especifica exactamente cómo quieres que funcionen:

El formulario de nueva sesión debe:
- Mostrar un desplegable con los proyectos activos (cargado desde la base de datos)
- Tener la fecha del día de hoy por defecto, pero permitir cambiarla
- Validar que las horas sean un número positivo antes de guardar
- Mostrar un mensaje de confirmación cuando se guarda correctamente
- Limpiar el formulario después de guardar para poder registrar otra sesión

Estos detalles de UX (experiencia de usuario) son los que marcan la diferencia entre una herramienta que parece profesional y una que parece un prototipo.

5.3 Ajustar lo que no te convence

Con Lovable, cada vez que algo no te gusta visualmente, puedes usar el chat para pedirle cambios concretos. No hay que editar código:

• "El botón de guardar está demasiado lejos del formulario, ponlo justo debajo del último campo"
• "La tabla de sesiones necesita rayas alternadas para leerla mejor"
• "El dashboard en móvil se ve mal, necesito que las tarjetas se apilen en columna"

Cada ajuste tarda segundos. El ciclo es: ver, pedir, ver, pedir. No hay que esperar a que nadie lo implemente.

---

6. El deploy: tu herramienta en internet

6.1 De "funciona en mi pantalla" a "funciona en cualquier sitio"

Cuando tu herramienta funciona en Lovable, está funcionando en el entorno de desarrollo de Lovable, no en internet. El deploy es el paso que la publica para que puedas acceder desde cualquier dispositivo o compartirla con otras personas.

Lovable tiene deploy integrado con un clic. Al hacer clic en "Deploy", la plataforma:

1. Empaqueta todo el código generado
2. Lo sube a sus servidores
3. Te da una URL donde ya está publicada (algo como tu-herramienta.lovable.app)

En menos de dos minutos, tienes tu herramienta en internet.

6.2 Dominio propio (opcional pero recomendable)

Si quieres que tu herramienta tenga una URL propia en lugar de algo.lovable.app, puedes comprar un dominio en cualquier registrador (Namecheap, Cloudflare, Dondominio) por unos 10-15€ al año y conectarlo desde el panel de Lovable.

No es obligatorio para empezar, pero si la herramienta la van a usar otras personas o quieres que parezca profesional, merece la pena.

6.3 La alternativa con más control: Vercel

Si después de un tiempo usas tu herramienta y quieres tener más control sobre ella, Vercel es la plataforma de deploy favorita de la comunidad vibecoder. Funciona conectando directamente con tu repositorio en GitHub — donde Lovable guarda el código de tu proyecto — y desplegando automáticamente cada vez que haces cambios.

El plan gratuito de Vercel es más que suficiente para herramientas personales o de pequeños equipos.

"La primera versión no tiene que ser perfecta. Tiene que existir. Publica antes de lo que crees que deberías, empieza a usarla, y mejórala con los problemas reales que encuentres."

---

7. El proyecto completo: guía de inicio rápido

Para que tengas algo concreto a lo que volver, aquí está el flujo completo resumido en pasos accionables.

7.1 Antes de abrir Lovable

1. Define tu idea en una frase (usa Claude para afinarla si hace falta)
2. Haz la prueba de fuego: ¿una frase, datos que guarda, quién la usa?
3. Habla con Claude para generar el documento de requisitos
4. Identifica la versión mínima que ya te sería útil

7.2 En Lovable, el primer prompt

Crea una cuenta gratuita en lovable.dev, abre un proyecto nuevo y escribe un prompt como este (adaptado a tu herramienta):

Crea una aplicación web para freelances que permite registrar proyectos
y sesiones de trabajo, con un dashboard mensual de horas e ingresos.

Diseño limpio tipo Notion, blanco con azul oscuro.

Base de datos (Supabase):
- Tabla proyectos: nombre, cliente, tarifa_hora, estado
- Tabla sesiones: proyecto_id, fecha, horas, descripcion

Pantallas:
1. Dashboard con resumen del mes
2. Lista de proyectos
3. Formulario de nueva sesión
4. Historial de sesiones con filtros

7.3 El ciclo de iteración

A partir de aquí, el proceso es:

• Prueba cada funcionalidad en el preview de Lovable
• Anota lo que no funciona o no te convence
• Pide los cambios con prompts específicos
• Repite hasta que estés satisfecho con lo principal

7.4 Antes de hacer el deploy

Comprueba estas cosas antes de publicar:

• Los formularios guardan datos correctamente
• Los datos del dashboard son correctos (suma bien las horas)
• En móvil se ve aceptable
• No hay botones que no hacen nada
• La base de datos de Supabase está conectada y en modo "producción"

---

Hace dos años, construir una herramienta como esta requería contratar a un desarrollador, esperar semanas y gastar varios miles de euros. Hoy, con Claude y Lovable, es un proceso de horas que cualquier persona puede hacer un domingo por la tarde.

Lo único que necesitas para empezar es una idea clara y ganas de iterar. Si todavía no tienes claro qué herramienta quieres construir, empieza por ahí: abre Claude y cuéntale un problema que tienes en tu trabajo. Probablemente, la herramienta que necesitas es más sencilla de lo que piensas.

En Claudio Academy tienes lecciones dedicadas a vibecoding: desde cómo hablar con Claude para diseñar tu herramienta, hasta cómo resolver los problemas más comunes que surgen durante la construcción. Todo en español, sin jerga técnica, con casos de uso reales.