1~
2El **vibecoding** es un nuevo paradigma de desarrollo de software en el que el programador guía a un agente de IA a través de instrucciones en lenguaje natural, dejando que la inteligencia artificial escriba el código efectivo. El término fue acuñado por Andrej Karpathy (co-fundador de OpenAI y ex Director of AI de Tesla) en un célebre tweet de febrero de 2025: _"Hay un nuevo tipo de coding que llamo vibecoding, donde te rindes completamente a las vibes, abrazas los exponenciales y olvidas que el código existe."_
3~
4En este artículo veremos cómo construir una demo completa y funcional usando **Claude Code** como agente AI, **Supabase** como backend (base de datos, autenticación, API) y **Vercel** para el deploy  -  todo aprovechando exclusivamente los **tiers gratuitos** de estos servicios.
5~
6## 1. Qué es el Vibecoding y por qué es revolucionario
7~
8El vibecoding representa un cambio de paradigma fundamental en el desarrollo de software. En lugar de escribir código línea por línea, el developer:
9~
101. **Describe** lo que quiere en lenguaje natural.
112. **El agente AI** genera el código completo.
123. **El developer** revisa, prueba e itera.
13~
14### Por qué funciona
15~
16- **Velocidad**: un proyecto que requeriría días puede construirse en horas.
17- **Accesibilidad**: incluso quien no es un developer experto puede construir productos funcionales.
18- **Iteración rápida**: puedes probar ideas y pivotar mucho más rápidamente.
19- **Foco en el producto**: te concentras en el _qué_ en lugar del _cómo_.
20~
21```mermaid
22flowchart LR
23    A[Idea] --> B[Prompt in linguaggio naturale]
24    B --> C[Claude Code genera il codice]
25    C --> D[Review e test]
26    D --> E[Iterazione]
27    E --> B
28    D --> F[Deploy su Vercel]
29```
30~
31### Cuándo usar el vibecoding
32~
33El vibecoding es perfecto para:
34~
35- **Demos y MVP**: construir rápidamente un prototipo para validar una idea.
36- **Hackathon**: crear un producto funcional en pocas horas.
37- **Side project**: explorar nuevas tecnologías sin invertir semanas.
38- **Proof of Concept**: demostrar la viabilidad técnica a stakeholders o inversores.
39~
40> **Atención:** El vibecoding es excelente para demos y prototipos. Para aplicaciones production-grade con requisitos de seguridad y escalabilidad elevados, sigue siendo fundamental una revisión exhaustiva del código generado.
41~
42## 2. El stack tecnológico: Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code es el agente de coding AI de Anthropic. Funciona directamente en tu terminal y puede:
47~
48- Leer y comprender todo el codebase.
49- Crear, modificar y eliminar archivos.
50- Ejecutar comandos en el terminal.
51- Interactuar con APIs y servicios externos.
52- Gestionar el versionado con Git.
53- Iterar autónomamente sobre errores y bugs.
54~
55```bash
56# Installazione di Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Avvio in una directory di progetto
60cd my-project
61claude
62```
63~
64### Supabase (Tier gratuito)
65~
66Supabase es una alternativa open source a Firebase que ofrece:
67~
68- **Base de datos PostgreSQL**: una base de datos relacional completa.
69- **Autenticación**: login con email, Google, GitHub, etc.
70- **API REST y Realtime**: generadas automáticamente desde tu schema.
71- **Storage**: para archivos e imágenes.
72- **Edge Functions**: funciones serverless.
73~
74El tier gratuito incluye:
75~
76| Recurso | Límite gratuito |
77|---------|----------------|
78| Database | 500 MB |
79| Storage | 1 GB |
80| Bandwidth | 5 GB |
81| Edge Function invocations | 500K/mes |
82| Usuarios autenticados | Ilimitados |
83| Proyectos | 2 proyectos activos |
84~
85### Vercel (Tier gratuito)
86~
87Vercel es la plataforma de deploy perfecta para aplicaciones Next.js:
88~
89- **Deploy automático** desde GitHub.
90- **Preview deployments** para cada branch y PR.
91- **CDN global** para un rendimiento óptimo.
92- **Serverless Functions** incluidas.
93- **Analytics** básicas gratuitas.
94~
95El tier gratuito incluye:
96~
97| Recurso | Límite gratuito |
98|---------|----------------|
99| Bandwidth | 100 GB/mes |
100| Serverless Function execution | 100 GB-horas/mes |
101| Builds | 6.000 minutos/mes |
102| Proyectos | Ilimitados |
103| Deploys | Ilimitados |
104~
105## 3. Setup inicial: preparar el entorno
106~
107### Prerrequisitos
108~
109Antes de comenzar, asegúrate de tener:
110~
111- **Node.js 18+** instalado.
112- **Git** configurado.
113- Una cuenta de **GitHub**.
114- Una cuenta de **Supabase** (gratuita en [supabase.com](https://supabase.com)).
115- Una cuenta de **Vercel** (gratuita en [vercel.com](https://vercel.com)).
116- **Claude Code** instalado (`npm install -g @anthropic-ai/claude-code`).
117~
118### Step 1: Crear el proyecto
119~
120Abre el terminal y lanza Claude Code:
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127Ahora puedes empezar a dar instrucciones a Claude Code en lenguaje natural:
128~
129```
130Tú: Crea un proyecto Next.js 15 con App Router, TypeScript, Tailwind CSS y
131shadcn/ui. Inicializa también un repositorio Git.
132```
133~
134Claude Code ejecutará automáticamente:
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### Step 2: Configurar Supabase
143~
1441. Ve a [supabase.com](https://supabase.com) y crea un nuevo proyecto.
1452. Toma nota del **Project URL** y la **anon key** en la sección Settings > API.
1463. Vuelve al terminal con Claude Code:
147~
148```
149Tú: Agrega Supabase al proyecto. Crea un archivo .env.local con las variables
150NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY. Configura el cliente
151Supabase con soporte SSR para Next.js App Router.
152```
153~
154Claude Code creará la configuración completa:
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## 4. Construir la demo: una app de gestión de tareas
196~
197Construyamos una demo concreta: una **app de gestión de tareas** con autenticación, CRUD completo e interfaz moderna.
198~
199### Definir el esquema de la base de datos
200~
201Da instrucciones a Claude Code para crear el esquema:
202~
203```
204Tú: Crea una migración SQL para Supabase con las siguientes tablas:
205~
2061. profiles: id (uuid, FK a auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   a profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK a projects), assigned_to (uuid, FK a profiles), due_date (timestamp),
213   created_at, updated_at
214~
215Habilita Row Level Security en todas las tablas y crea las policies apropiadas.
216```
217~
218Claude Code generará una migración completa:
219~
220```sql
221-- Crea i tipi enum
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224~
225-- Tabella profiles
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232~
233-- Tabella projects
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241~
242-- Tabella tasks
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255~
256-- Abilita RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260~
261-- Policy per profiles
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266~
267-- Policy per projects
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276~
277-- Policy per tasks
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295~
296Puedes ejecutar esta migración directamente desde el dashboard de Supabase (SQL Editor) o a través de la CLI.
297~
298### Generar los tipos TypeScript
299~
300```
301Tú: Genera los tipos TypeScript desde la base de datos Supabase y guárdalos en src/types/database.ts
302```
303~
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307~
308### Construir la interfaz de usuario
309~
310Ahora viene la parte más poderosa del vibecoding. Da instrucciones de alto nivel a Claude Code:
311~
312```
313Tú: Crea una página dashboard para la app de gestión de tareas con:
314~
3151. Sidebar con navegación entre proyectos
3162. Vista Kanban con 3 columnas (Todo, In Progress, Done) con drag & drop
3173. Modal para crear/editar tareas
3184. Header con avatar del usuario y logout
3195. Diseño moderno con shadcn/ui y Tailwind
320~
321Usa los datos de Supabase con React Server Components donde sea posible
322y Client Components solo donde se necesite interactividad.
323```
324~
325Claude Code construirá toda la interfaz, componente por componente.
326~
327### Agregar la autenticación
328~
329```
330Tú: Agrega un sistema de autenticación completo con:
331~
3321. Página de login con email/password y login con GitHub
3332. Página de registro
3343. Middleware para proteger las rutas autenticadas
3354. Redirect automático para usuarios no autenticados
3365. Creación automática del perfil después del registro
337```
338~
339Claude Code configurará el middleware de Next.js y las páginas de auth:
340~
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345~
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348~
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369~
370  const { data: { user } } = await supabase.auth.getUser();
371~
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377~
378  return supabaseResponse;
379}
380~
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385~
386## 5. Patrones avanzados de vibecoding
387~
388### El prompting iterativo
389~
390El secreto del vibecoding eficaz es la **iteración**. No intentes describir todo en un solo prompt. Procede por pasos:
391~
392```
393Step 1: "Crea el layout base con header y sidebar"
394Step 2: "Agrega la lista de proyectos en la sidebar con un botón para crear nuevos"
395Step 3: "Crea la vista Kanban en el área principal"
396Step 4: "Agrega el drag & drop entre las columnas"
397Step 5: "Implementa el modal para crear nuevas tareas"
398Step 6: "Agrega las notificaciones toast para dar feedback al usuario"
399```
400~
401> **Tip:** Cuanto más específico y contextualizado sea el prompt, mejor será el resultado. Claude Code tiene acceso a todo el codebase, por lo que puede integrar nuevas funcionalidades de manera coherente.
402~
403### Gestión de errores
404~
405Cuando algo no funciona (y sucederá), puedes simplemente decir:
406~
407```
408Tú: Tengo este error en la consola: "TypeError: Cannot read property 'map' of undefined"
409en el componente TaskList. Corrígelo.
410```
411~
412Claude Code analizará el código, identificará el problema y lo resolverá.
413~
414### Refactoring con AI
415~
416```
417Tú: El componente Dashboard se ha vuelto demasiado grande. Divídelo en componentes
418más pequeños y reutilizables, manteniendo la misma funcionalidad.
419```
420~
421### Testing
422~
423```
424Tú: Agrega tests con Vitest para las utility functions y tests con Playwright
425para el flujo de autenticación y creación de tareas.
426```
427~
428## 6. Deploy en Vercel: del código al mundo
429~
430### Step 1: Subir a GitHub
431~
432```
433Tú: Crea un .gitignore apropiado, haz commit de todo y sube a un nuevo
434repositorio GitHub llamado "my-demo-app".
435```
436~
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442~
443### Step 2: Conectar Vercel
444~
4451. Ve a [vercel.com](https://vercel.com) y haz clic en "Add New Project".
4462. Importa el repositorio de GitHub recién creado.
4473. Agrega las variables de entorno:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. Haz clic en "Deploy".
451~
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Deploy Automatico]
456    C --> D[URL Pubblico]
457    D --> E[CDN Globale]
458```
459~
460### Step 3: Configurar el dominio (opcional)
461~
462Vercel proporciona una URL gratuita tipo `my-demo-app.vercel.app`. Para un dominio personalizado:
463~
464```
465Tú: Agrega la configuración para un dominio personalizado en vercel.json
466```
467~
468### Preview Deployments
469~
470Cada vez que abres un Pull Request en GitHub, Vercel creará automáticamente un **preview deployment** con una URL única. Perfecto para mostrar los cambios antes del merge.
471~
472## 7. Optimizaciones para la demo
473~
474### Rendimiento
475~
476```
477Tú: Optimiza el rendimiento de la app:
4781. Agrega loading states con Suspense y skeleton
4792. Implementa caching con unstable_cache de Next.js
4803. Optimiza las imágenes con next/image
4814. Agrega metadata SEO para cada página
482```
483~
484### Realtime con Supabase
485~
486Una feature que siempre impresiona en las demos es el **realtime**:
487~
488```
489Tú: Agrega sincronización realtime para las tareas usando Supabase Realtime.
490Cuando un usuario actualice una tarea, todos los demás usuarios deben ver
491el cambio en tiempo real sin hacer refresh.
492```
493~
494```typescript
495'use client';
496~
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500~
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504~
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533~
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538~
539  return tasks;
540}
541```
542~
543### Modo oscuro
544~
545```
546Tú: Agrega soporte de modo oscuro con toggle en el header.
547Usa las clases dark de Tailwind y guarda la preferencia en localStorage.
548```
549~
550## 8. Buenas prácticas para un vibecoding eficaz
551~
552### 1. Sé específico en los prompts
553~
554```
555❌ "Haz una página bonita"
556✅ "Crea una landing page con hero section con gradiente violeta-azul, una sección
557   de features con 3 cards con íconos, y un CTA con botón naranja"
558```
559~
560### 2. Da contexto
561~
562```
563❌ "Agrega autenticación"
564✅ "Agrega autenticación con Supabase Auth. El proyecto usa Next.js 15 App
565   Router con TypeScript. Quiero login con email/password y OAuth con GitHub.
566   Usa el patrón SSR con @supabase/ssr"
567```
568~
569### 3. Itera en pequeños pasos
570~
571No intentes construir todo en un solo prompt. Procede por incrementos:
572~
5731. Layout base
5742. Una feature a la vez
5753. Estilos y pulido
5764. Gestión de errores
5775. Testing
578~
579### 4. Revisa el código generado
580~
581El vibecoding no significa no leer el código. Revisa siempre:
582~
583- **Seguridad**: RLS policies, validación de input, sanitización de datos.
584- **Rendimiento**: queries N+1, componentes innecesariamente client-side.
585- **Buenas prácticas**: estructura del proyecto, naming conventions.
586~
587### 5. Usa Git estratégicamente
588~
589```
590Tú: Haz commit de los cambios con un mensaje descriptivo después de cada feature completada.
591```
592~
593Esto te permite volver atrás si algo sale mal.
594~
595## 9. Costos: ¿realmente todo gratis?
596~
597Este es un resumen de los costos de cada servicio:
598~
599| Servicio | Plan gratuito | Cuándo se paga |
600|----------|---------------|----------------|
601| **Claude Code** | Requiere un plan Anthropic (a partir de $20/mes) o API key | De inmediato, pero el valor es enorme |
602| **Supabase** | Generoso free tier (2 proyectos, 500MB DB) | Al superar los límites del free tier |
603| **Vercel** | Free tier para proyectos personales | Para equipos o uso comercial |
604| **GitHub** | Gratuito para repos públicos y privados | Features enterprise |
605~
606> **Nota:** Claude Code requiere una suscripción o créditos de API, pero el retorno de la inversión en términos de velocidad de desarrollo es extraordinario. Para una demo o MVP, el costo total es del orden de $20.
607~
608### Alternativas gratuitas para la IA
609~
610Si quieres mantener el costo en cero absoluto, puedes usar:
611~
612- **Cursor** (free tier con limitaciones).
613- **GitHub Copilot** (gratuito para estudiantes y open source).
614- **Codeium/Windsurf** (tier gratuito generoso).
615~
616## 10. De la demo al producto: próximos pasos
617~
618Una vez que tu demo esté en vivo, así es como proceder:
619~
620```mermaid
621flowchart TD
622    A[Demo Live] --> B{Feedback Utenti}
623    B --> C[Iterazione sul Prodotto]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Dominio Personalizzato]
629```
630~
6311. **Recoge feedback**: comparte la demo con potenciales usuarios y recoge opiniones.
6322. **Itera rápidamente**: usa el vibecoding para implementar los cambios solicitados.
6333. **Monitorea las métricas**: Vercel Analytics y el Dashboard de Supabase te dan datos esenciales.
6344. **Escala cuando sea necesario**: pasa a los planes de pago solo cuando hayas validado la demanda.
635~
636~
637## Conclusión
638~
639El vibecoding con Claude Code, Supabase y Vercel representa una combinación poderosísima para construir demos y MVPs en tiempo récord. Lo que antes requería semanas de desarrollo ahora puede realizarse en pocas horas, con un nivel de calidad sorprendente.
640~
641La clave es abordar el vibecoding con la mentalidad correcta: no se trata de "no saber programar", sino de **amplificar tus capacidades** con herramientas de IA. Cuanto más conozcas las tecnologías subyacentes (React, SQL, autenticación, deploy), más eficaz serás al guiar al agente AI hacia el resultado deseado.
642~
643El futuro del desarrollo de software está aquí, y el costo para comenzar nunca ha sido tan bajo. Crea tu demo, valídala con usuarios reales y construye el próximo gran producto.
644~
645> **Checklist para tu primera demo:**
646>
647> - [x] Claude Code instalado y configurado
648> - [x] Proyecto Supabase creado con esquema de base de datos
649> - [x] Proyecto Next.js inicializado con shadcn/ui
650> - [x] Autenticación configurada
651> - [x] CRUD completo implementado
652> - [x] UI moderna y responsive
653> - [x] Deploy en Vercel realizado
654> - [x] URL compartible listo para el feedback
655~