Día 3: Desarrollo con IA

Con el diseño y el plan listos, hoy arranca el código. Pero no vas a escribirlo todo tú solo: Cursor, GitHub Copilot y Claude son tu equipo de desarrollo. El objetivo no es entender cada línea al 100% desde el primer día — es tener una aplicación funcional con las features MVP operativas antes de medianoche.

Objetivo del día

Tener Next.js + Supabase configurados y corriendo en local, con al menos la feature principal del MVP implementada y funcional (aunque sea sin estilos perfectos).

Configura el proyecto en 20 minutos

Abre la terminal y ejecuta:

npx create-next-app@latest mi-saas --typescript --tailwind --eslint --app
cd mi-saas

Luego instala las dependencias base:

npm install @supabase/supabase-js @supabase/ssr
npm install stripe @stripe/stripe-js
npm install shadcn-ui
npx shadcn@latest init

Crea el proyecto en supabase.com, copia las credenciales al archivo .env.local:

NEXT_PUBLIC_SUPABASE_URL=tu_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu_anon_key
SUPABASE_SERVICE_ROLE_KEY=tu_service_key

Usa Cursor para el boilerplate

Abre el proyecto en Cursor (descárgalo en cursor.sh si aún no lo tienes). Cursor permite hablar con tu código directamente. Usa Cmd+K (o Ctrl+K) para editar código con instrucciones en lenguaje natural, y Cmd+L para abrir el chat lateral.

Prompt de arranque en Cursor:

Estoy construyendo un SaaS con Next.js 14 App Router y Supabase.
Crea el archivo lib/supabase/client.ts con el cliente del lado del navegador
y lib/supabase/server.ts con el cliente del lado del servidor usando cookies.
Sigue la documentación oficial de @supabase/ssr.

Para cada componente nuevo, selecciona el código existente con Cmd+L y di: "Basándote en este patrón, crea un componente similar para [nueva función]."

Cómo promtear a Claude para features complejas

Para lógica de negocio compleja (algoritmos, validaciones, integraciones), Claude es mejor que Cursor porque tiene más contexto de la arquitectura completa. Usa este formato:

Contexto: SaaS de [descripción]. Stack: Next.js 14 App Router, Supabase, TypeScript.
Feature a implementar: [descripción detallada].
Restricciones: [ej. "debe funcionar en server components", "sin dependencias nuevas"].
Genera: el código completo de la función/componente/API route con comentarios explicativos.

Sé específico. "Crea una función" es peor que "Crea una función asíncrona en TypeScript que recibe userId: string, consulta la tabla subscriptions en Supabase y retorna el plan activo del usuario".

GitHub Copilot para el trabajo repetitivo

Activa GitHub Copilot en VS Code o Cursor. Es especialmente útil para:

Autocompletar tipos TypeScript
Generar variaciones de componentes UI ya existentes
Escribir consultas SQL para Supabase
Completar props y interfaces

Cuando Copilot sugiera código, léelo antes de aceptarlo con Tab. No aceptes sugerencias que no entiendes — pídele a Claude que las explique si es necesario.

El loop red-green-refactor con IA

Adopta este ciclo para cada feature:

Red: Escríbele a Claude: "¿Qué puede salir mal en este código?" antes de ejecutarlo.
Green: Ejecuta el código. Si falla, copia el error completo y pégalo en Claude: "Este error ocurre en este contexto [código]. ¿Cuál es la causa y cómo lo corrijo?"
Refactor: Una vez funcionando, pide: "Revisa este código para mejorar legibilidad y performance. No cambies la lógica, solo la forma."

No pases más de 20 minutos atascado en un error sin pedir ayuda a la IA. El tiempo es el recurso más escaso hoy.

Depuración efectiva con IA

Cuando algo no funciona, incluye siempre en tu prompt:

El mensaje de error completo (no solo la primera línea)
El código relevante (no todo el archivo)
Qué esperabas que pasara vs. qué pasó realmente

Ejemplo:

Error: "TypeError: Cannot read properties of undefined (reading 'id')"
Ocurre en esta función: [código].
Esperaba que user.id existiera porque el usuario está autenticado.
¿Qué condición de carrera o caso edge puede causarlo?

Herramientas IA del día

Cursor — edición de código con IA integrada, autocompletado contextual, refactors rápidos
GitHub Copilot — autocompletado en tiempo real para boilerplate y repetición
Claude — features complejas, depuración, explicación de errores, revisión de lógica

Checklist del día

Proyecto Next.js creado y corriendo en localhost:3000
Supabase conectado: cliente configurado en lib/supabase/
Variables de entorno en .env.local (nunca en el código)
Al menos una tabla creada en Supabase con Row Level Security activado
Feature principal del MVP implementada y funcional en local
Al menos un error depurado con ayuda de Claude (copia el proceso en tu notas)
Código subido a GitHub con commit descriptivo