Cómo crear tu app con vibe coding

Nunca había sido tan fácil llevar software a producción. Con la combinación adecuada de herramientas de IA e infraestructura moderna, puedes pasar de una idea a producción en un solo fin de semana. Esto es lo que llamo vibe coding: describes lo que tienes en mente y las herramientas se encargan del resto.

Este es el stack: Lovable para generar una UI atractiva, Claude Code para escribir la lógica del backend y conectar todas las piezas, y Cloudflare para desplegarla en el edge sin dolores de cabeza con la configuración.

¿Por qué este stack?

Cada herramienta destaca en una capa diferente del problema:

• Lovable convierte prompts en lenguaje natural en componentes React pulidos con Tailwind CSS y shadcn/ui. Tú te enfocas en cómo deben verse y qué experiencia deben ofrecer.
• Claude Code es tu compañero de programación en la terminal. Lee tu base de código, escribe funciones, corrige bugs y refactoriza, todo mediante una conversación.
• Cloudflare Pages + Workers te ofrecen despliegue global, funciones serverless, almacenamiento KV y bases de datos D1, todo con un generoso plan gratuito.

Juntos cubren el ciclo completo: diseño, implementación y despliegue.

Paso 1: Crea la estructura de la UI con Lovable

Inicia un nuevo proyecto en Lovable y describe lo que quieres crear. Sé específico sobre la distribución, las interacciones y el estilo.

Por ejemplo: “Una app de seguimiento de hábitos con un tema oscuro, una barra lateral que enumere los hábitos y un área principal que muestre una cuadrícula semanal. Cada celda se puede activar o desactivar.”

Lovable genera un proyecto React funcional con rutas, componentes y estilos. Exporta el repositorio a GitHub y clónalo localmente.

En este punto tienes un frontend atractivo con lógica provisional. Eso es exactamente lo que necesitas.

Paso 2: Agrega la lógica con Claude Code

Abre el proyecto clonado en tu terminal e inicia Claude Code. Deja que primero lea la base de código: entenderá el árbol de componentes, el flujo de datos y lo que falta.

Ahora puedes empezar a darle prompts:

• “Agrega un esquema de base de datos Cloudflare D1 para hábitos y registros diarios de cumplimiento.”
• “Crea una API en un Worker con endpoints para listar hábitos, marcar o desmarcar un día y obtener estadísticas semanales.”
• “Conecta el frontend a la API usando fetch con un manejo adecuado de errores.”

Claude Code escribe la implementación, crea los archivos e incluso ejecuta el linter. Tú revisas, ajustas y sigues adelante.

La idea clave: Lovable te da la forma; Claude Code le da contenido.

Paso 3: Despliega en Cloudflare

Cloudflare hace que el despliegue sea casi trivial:

1. Conecta tu repositorio de GitHub a Cloudflare Pages. Cada push inicia un build.
2. Agrega un Worker para tu API. Usa wrangler para desarrollar localmente y desplegar.
3. Crea una base de datos D1 con wrangler d1 create y ejecuta tus migraciones.
4. Vincula la base de datos a tu Worker en wrangler.toml.

Tu app ya está disponible en un dominio .pages.dev con HTTPS automático, una CDN global y respuestas de la API procesadas en el edge.

Consejos para hacer vibe coding de forma efectiva

Itera en ciclos pequeños. No intentes describir toda la app de una vez. Crea una funcionalidad de principio a fin y luego pasa a la siguiente. Cada ciclo debe ser: prompt, revisión, prueba, commit.

Usa Lovable para cambios centrados en la UI. Cuando necesites la distribución de una página nueva o un componente complejo, vuelve a Lovable. Es más rápido que escribir JSX a mano cuando el diseño todavía está evolucionando.

Usa Claude Code para todo lo demás. Rutas de API, consultas a bases de datos, lógica de autenticación, transformaciones de datos, pruebas: aquí es donde Claude Code destaca. Tiene el contexto completo de tu proyecto y puede hacer cambios en varios archivos a la vez.

Mantén simple la configuración de Cloudflare. Empieza con Pages para el frontend, un solo Worker para la API y D1 para la base de datos. Puedes agregar KV, R2 o Queues más adelante, cuando realmente los necesites.

Haz commits con frecuencia. Las herramientas de IA a veces pueden llevarte por el camino equivocado. Los commits frecuentes te permiten volver a un estado que sabes que funciona sin perder el progreso.

Qué puedes crear de esta manera

Este stack no se limita a proyectos de prueba. Aquí tienes algunos ejemplos reales:

• Un dashboard de finanzas personales que obtiene datos de Plaid y visualiza las tendencias de gasto
• Un bot de standup para equipos con una UI web, integración con Slack y reportes históricos
• Un acortador de enlaces con analíticas, dominios personalizados y generación de códigos QR
• Un CMS de contenido para tu blog con un editor de markdown y carga de imágenes a R2

El patrón siempre es el mismo: Lovable para la interfaz, Claude Code para la lógica y Cloudflare para la infraestructura.

El cambio de mentalidad

El vibe coding no se trata de escribir menos código. Se trata de dedicar tu tiempo a las decisiones en lugar de a la sintaxis. Tú eres el arquitecto: decides qué crear, cómo debe funcionar y qué concesiones hacer. Las herramientas se encargan de traducir tu intención en una implementación.

Los desarrolladores que entregan más rápido no son necesariamente los que escriben más rápido. Son quienes comunican su intención con mayor claridad, tanto a las personas como a la IA.

Empieza con una idea. Lanza la app.