Cómo Crear Aplicaciones de Vibe Coding desde VS Code con Claude Code y Supabase
Las plataformas de vibe coding como Lovable o Bolt permiten crear aplicaciones simplemente pidiéndolas con lenguaje natural. Son geniales para usuarios no técnicos, pero existe otro enfoque igual de poderoso: usar un editor de código junto con un modelo inteligente. El resultado es el mismo, pero con acceso total al código y la libertad de integrar lo que quieras.
En este artículo te muestro paso a paso cómo replicar esa experiencia usando VS Code + Claude Code + Supabase + Stripe, creando una app de gestión de restaurantes con autenticación, base de datos, pagos y panel de administración.
El Proyecto: App de Restaurante como SaaS
La idea es construir una aplicación con Next.js y React donde los usuarios puedan registrarse, crear su restaurante, gestionar menús, tomar pedidos y adquirir planes de suscripción. Básicamente, lo mismo que ofrecen las plataformas de vibe coding, pero con control total.
Paso 1: Generar el Proyecto con Claude Code
Desde la terminal, ejecutamos Claude Code con permisos extendidos:
claude --dangerously-skip-permissions
Y le damos un prompt como este:
Crea un proyecto de Next.js con React y crea una UI de una aplicación de un restaurante que permita tomar pedidos y darles seguimiento. Esto es un SaaS. Se pueden registrar usuarios y estos registran los datos de su restaurante, a partir de allí se pueden agendar pedidos.
Claude analiza la estructura, crea archivos base, autenticación, páginas de dashboard, menú, pedidos y más. En pocos minutos ya tenemos un proyecto funcional con una UI bastante completa.
Para trabajar más cómodamente, arrastramos el proyecto dentro de VS Code e instalamos la extensión de Claude Code (creada por Anthropic) desde el marketplace.
Paso 2: Conectar Supabase como Backend
Supabase es un backend-as-a-service que ofrece base de datos PostgreSQL, autenticación, Edge Functions, almacenamiento de archivos, real-time y base de datos vectorial para proyectos de IA.
Crear el proyecto en Supabase
- Crear una cuenta gratuita en supabase.com.
- Crear una organización y un proyecto nuevo (por ejemplo, "Restaurant App").
- Guardar la contraseña de la base de datos en un lugar seguro (nunca en el repositorio).
- Seleccionar la región más cercana (por ejemplo, São Paulo para Latinoamérica).
Instalar el Supabase CLI
El CLI permite que Claude Code administre directamente nuestra cuenta de Supabase. Se instala según el sistema operativo (Windows, Mac o Linux) y luego nos autenticamos:
supabase login
Una vez autenticados, podemos pedirle a Claude que analice la UI del proyecto y cree el esquema de base de datos automáticamente:
Analiza la UI y crea un esquema para que funcione.
Claude examina el proyecto carpeta por carpeta, ejecuta supabase init, crea las migraciones SQL, configura los RLS (Row Level Security) y conecta todo. El resultado: tablas de perfiles, restaurantes, menús, ítems de órdenes y órdenes, todas relacionadas entre sí, con funciones para actualizar perfiles, generar códigos de orden y recalcular totales.
Obtener las keys automáticamente
En lugar de copiar manualmente las credenciales desde el panel de Supabase, le decimos a Claude:
Obtén los keys tú mismo usando Supabase CLI.
Claude ejecuta los comandos, identifica el proyecto correcto y configura las variables de entorno automáticamente.
Paso 3: Probar la Aplicación con un Navegador Automatizado
Para que Claude pueda probar la app por sí mismo (registrar usuarios, detectar errores y corregirlos), instalamos Chrome DevTools MCP:
npx @anthropic-ai/chrome-devtools-mcp
Con este conector, Claude puede abrir un navegador, llenar formularios, hacer registros y detectar errores de forma autónoma. Por ejemplo, si encuentra un error de RLS al intentar crear un restaurante, puede ir directamente a la base de datos, revisar las políticas de seguridad y corregirlas.
Un detalle interesante: Claude se da cuenta de que Supabase requiere confirmación de email para el login. Como estamos en desarrollo, automáticamente deshabilita esa configuración en el archivo de config de Supabase para facilitar las pruebas.
Paso 4: Llenar Datos de Ejemplo
En lugar de cargar datos manualmente, le pedimos a Claude:
Crea datos de ejemplo basado en el esquema y súbelos a Supabase usando Supabase CLI.
Claude genera scripts de seed y los ejecuta. En segundos, tenemos pedidos de ejemplo con diferentes estados listos para probar en el dashboard.
Paso 5: Mejorar la UI — Vista Kanban
La vista inicial de pedidos muestra tarjetas estáticas. Para algo más usable, le pedimos una vista Kanban donde podamos arrastrar pedidos entre columnas (pendiente, en preparación, listo, entregado):
Crea adicionalmente una vista Kanban.
Un tip útil: en VS Code, podemos abrir el archivo de la página de órdenes con Ctrl+P, arrastrarlo al chat de Claude Code y así darle contexto exacto de qué archivo modificar.
Paso 6: Usuarios Administradores
Las plataformas de vibe coding suelen crear todo desde la perspectiva del usuario final, pero un SaaS real necesita un panel de administración. Le pedimos a Claude:
Añade la posibilidad de que existan usuarios administradores con todos los privilegios de ver todos los restaurantes y todos los usuarios.
Claude crea una nueva migración con roles, actualiza Supabase con supabase db push y genera las páginas exclusivas para admin. Incluso puede crear un usuario administrador con un script y darnos las credenciales.
Paso 7: Integrar Pagos con Stripe
Para los pagos, le pedimos a Claude que planifique la integración:
Crea un plan para añadir Stripe.
En modo planificación, Claude define planes con límites (ítems del menú, pedidos por día, historial visible), crea las migraciones necesarias y genera Edge Functions en Supabase (usando Deno) para procesar los pagos:
- Crear orden de compra: extrae info del usuario y crea una sesión de checkout en Stripe.
- Historial de pagos: obtiene las transacciones de un usuario.
- Webhook de Stripe: recibe notificaciones cuando se completa un pago y actualiza el plan del usuario.
Configurar Stripe
- Copiar el Secret Key desde el dashboard de Stripe (en modo prueba).
- Crear un Webhook apuntando a la Edge Function de Supabase, escuchando eventos como
checkout.session.completedycustomer.subscription.updated. - Pasarle ambas claves a Claude para que configure las variables de entorno.
Con esto, los usuarios pueden seleccionar un plan, ser redirigidos al checkout de Stripe, pagar con datos de prueba y ver su plan actualizado en el dashboard.
Conclusión: ¿Vibe Coding o Editor de Código?
Ambos enfoques tienen su lugar. Las plataformas de vibe coding son más sencillas para usuarios no técnicos y permiten tener algo funcional rápidamente. Pero cuando necesitas cambiar de proveedor de pagos, migrar de backend, personalizar integraciones o simplemente tener control total del código, el enfoque de editor + IA es superior.
Lo importante es que el flujo es prácticamente el mismo: describes lo que quieres en lenguaje natural y la IA lo construye. La diferencia es que con VS Code + Claude Code tienes acceso completo al código, puedes integrar cualquier servicio y no estás atado a ninguna plataforma.
Stack utilizado en este tutorial:
- Next.js + React (frontend)
- Supabase (backend: base de datos, auth, Edge Functions, storage)
- Stripe (pagos y suscripciones)
- Claude Code (asistente de desarrollo con IA)
- Chrome DevTools MCP (testing automatizado)
- Supabase CLI (gestión remota de la base de datos)