🧰 Requisitos previos y cómo usarlo
Este es un build full-stack. Cada cuadro de abajo es un prompt para copiar y ejecutar, con 🎯 objetivo e ✅ cómo verificar; cambia lo que está entre <chaves>. Requisitos previos: cuentas en Trigger.dev, Vercel, Supabase y Stripe; GitHub conectado; una clave de IA (p. ej., Anthropic). La regla de oro del módulo es iterar por capas: app funcional → diseño → auth → seguridad → pago, probando en cada paso.
El salto de este módulo es el frontend + backend. Lo que ve el usuario (el frontend, en Vercel) es una fachada bonita; el trabajo real ocurre en el backend (la lógica del agente, en Trigger.dev). Se comunican, y todo lo que los conecta (URL, claves) viaja por variables de entorno, nunca escrito en el código.
Diagrama ilustrativo — frontend (Vercel) y backend (Trigger.dev, en cian como «máquina») conectados mediante env vars; Supabase y Stripe se incorporan después como capas.
🏛️ La arquitectura: backend + frontend
Qué es
La app tiene dos extremos. El frontend es todo lo que el usuario ve (el formulario y la pantalla de resultados), alojado en la Vercel. O backend es el workflow de IA que califica al lead (la lógica de negocio), alojado en Trigger.dev. Se comunican para que cualquier persona con la URL pueda usar el flujo. El resultado es una pantalla con un score (p. ej., 68/100, "lead tibio"), un resumen, el desglose del score y los próximos pasos sugeridos.
¿Qué es?Frontend — lo que se ejecuta en el navegador, la interfaz. Backend — lo que se ejecuta en el servidor (lógica, llamadas de IA, base de datos). Ciclo request/response — haces clic, el frontend envía una solicitud, el backend la procesa y devuelve la respuesta, y la pantalla se actualiza.
🎯 Objetivo: planificar toda la app y generar el CLAUDE.md (en Plan Mode).
Ayúdame a redactar el CLAUDE.md. Quiero construir un workflow con el framework WAT. Crea una carpeta para cada sección, excepto para el agente. El workflow es un calificador de leads con IA: envío los datos de un lead y la IA lo califica. Stack: voy a alojar el workflow en Trigger.dev. Voy a crear un frontend con tu ayuda, donde completo un formulario sobre el lead, hago clic en «Analizar» y se activa el workflow en Trigger.dev. Cuando termine, muestra los resultados en el frontend. Por último, publico el frontend en Vercel a través de GitHub. Mi backend está en Trigger.dev y mi frontend en Vercel, y deben poder comunicarse.
✅ Cómo verificar: la IA crea el CLAUDE.md y la estructura base (carpetas de workflows/tools) siguiendo WAT, antes de programar. Revisa el plan antes de aprobarlo.
Por qué aprender
Entender la división entre front y back es lo que permite construir productos, no solo automatizaciones. El frontend hace que el agente sea accesible; el backend mantiene la lógica y los secretos lejos del navegador. Empieza por el CLAUDE.md le da a la IA el contexto persistente de todo el proyecto.
Conceptos clave
Vercel · lo que se ve.
Trigger.dev · la lógica.
Pedido → respuesta.
Contexto del proyecto.
⚙️ Crear el lead qualifier (del prompt a la app)
Qué es
Con el plan listo, construyes el backend y después el frontend. El backend recibe los datos del lead (empresa, sector, tamaño, criterio, urgencia, problemas), los puntúa con IA y devuelve la clasificación. Creas el proyecto en Trigger.dev, pegas el Project ID en el trigger.config.ts y hace el deploy en los entornos de dev e prod. La clave de IA se agrega como variable de entorno en el panel.
🎯 Objetivo: construir el workflow y ponerlo en dev y prod.
[1] Crie o workflow do qualificador e me guie no deploy para o Trigger.dev.
[2] Estou vendo estes passos no Trigger.dev, me ajude a configurar —
já atualizei o trigger.config.ts com o meu project ref <project-id>.
[3] A tarefa foi adicionada ao ambiente de DEV no Trigger.dev, mas não vejo
no ambiente de PRODUÇÃO. Configure isso pra mim.
✅ Cómo verificar: la tarea aparece en dev Y prod (error común: se crea solo en dev). Agrega la clave de IA (p. ej., Anthropic) como variable de entorno en ambos entornos; preferiblemente usa claves separadas para hacer seguimiento de los costos.
🎯 Objetivo: construir el frontend atractivo (después de /clear, en Plan Mode).
Ahora que mi backend está listo (el workflow del calificador), quiero construir el frontend. Debe ser un formulario donde completo los datos de una empresa y, al hacer clic en "Analizar", llama a mi workflow en Trigger.dev. Cuando el workflow termine, quiero ver los resultados en el sitio. Primero quiero ver el sitio LOCALMENTE para evaluar el diseño. Cuando apruebe el diseño, lo publico en Vercel. Para el diseño, usa la skill de diseño front-end de Anthropic.
✅ Cómo verificar: ejecútalo primero en local y evalúa el aspecto visual. La skill de diseño se encarga de la tipografía, los colores y el movimiento, y evita el "aspecto genérico de IA" (el típico gradiente morado).
Por qué aprender
Este tema repite el patrón «describe el resultado completo», ahora en un contexto full-stack — y muestra dos gotchas reales: promover la tarea de dev a prod (no ocurre automáticamente) y llamar a la skill de diseño para que el frontend no quede con la apariencia predeterminada. Prueba la app local antes de publicarla.
Conceptos clave
En trigger.config.ts.
Promueve a producción.
Evita el look genérico.
Evalúa antes de publicar.
🔌 Conectar frontend ↔ backend (env vars)
Qué es
La conexión entre los extremos es una variable de entorno: el frontend en Vercel descubre el backend (y la clave de acceso) mediante una variable de entorno, nunca con un valor escrito en el código. Publicas en Vercel (conectando GitHub) y agregas el secret key de Trigger.dev como variable de entorno en Vercel — en producción y desarrollo — sin pegar nunca la clave en el chat.
¿Qué es?Variable de entorno (env var) — un valor (URL, clave) configurado fuera del código e inyectado en tiempo de ejecución. Cambiar de entorno (dev/prod) es cambiar el valor, no el código.
🎯 Objetivo: publicar en Vercel y conectar el frontend al backend de forma segura.
[prompt] O site ficou ótimo. Agora quero publicá-lo na Vercel. E garanta que ele consiga se comunicar com o meu workflow no Trigger.dev quando eu clicar em "Analisar". Não quero colar a chave secreta no chat — me diga onde colocá-la. [passo manual] Trigger.dev → API Keys → copie o secret key Vercel → projeto → Settings → Environment Variables → nova var: Name: TRIGGER_SECRET_KEY Value:(production + development) Depois: "Já configurei o secret key no painel da Vercel." → redeploy
✅ Cómo verificar: haz clic en «Analizar» y comprueba que aparezca el score. Si hay un error de modelo (p. ej.: 404 — nombre de modelo inexistente), la conexión sí funcionó; solo di: «Ejecuté el workflow y apareció este error: <erro>. Corrígelo y vuelve a hacer el deploy».
Por qué aprender
Las variables de entorno son lo que hace que ambos extremos se comuniquen con seguridad: la clave queda en el panel, no en el código que va al navegador. Fíjate en el hábito de no pegar secretos en el chat: tú mismo configuras y solo le indicas a la IA dónde está la clave. Los errores de conexión son normales; el ciclo consiste en devolver el error y volver a hacer el deploy.
Conceptos clave
URL + clave del backend.
La clave nunca va en el chat.
Push → Vercel publica.
Devuelve y vuelve a implementar.
👤 Autenticación con Supabase + RLS
Qué es
Una app abierta es un problema: cualquiera con la URL activa el workflow y consume tus tokens de IA (tú pagas por el uso de los demás). La solución es autenticación con Supabase (inicio de sesión/registro, cada usuario con su historial) y, crucialmente, RLS (Row-Level Security): reglas que residen en la propia base de datos e impiden que un usuario vea los datos de otro, incluso si hay un error en el frontend.
¿Qué es?RLS (Row-Level Security) — reglas en la base de datos que limitan cuáles filas cada usuario ve. Es una capa extra: incluso si hay un error en la interfaz, la base de datos se niega a entregar datos ajenos. Migration — un script SQL que modifica la estructura de la base de datos (p. ej., crear la tabla leads).
🎯 Objetivo: agregar inicio de sesión/registro y proteger las rutas (en Plan Mode).
Quero adicionar autenticação ao qualificador de leads. Os usuários devem poder se cadastrar, fazer login e ver o próprio histórico de qualificações. Quero usar o Supabase, e proteger as rotas principais do app para que só usuários logados acessem. Nunca usei Supabase — me guie passo a passo na configuração.
✅ Cómo verificar: la IA genera las páginas de autenticación, la barra de navegación y el schema. En Supabase, crea el proyecto, define una contraseña bancaria segura (distinta de la contraseña de inicio de sesión), elige la región y habilita RLS.
🎯 Objetivo: conectar Supabase y ejecutar la migration.
1. Supabase → copie o project URL e a publishable key. 2. Vercel → Settings → Environment Variables → adicione as duas → redeploy. 3. Supabase → Authentication → URL Configuration → adicione a URL do app (Vercel) e a redirect URL. 4. Migration: cole o SQL gerado pela IA no SQL editor do Supabase → Run (cria a tabela `leads`).
✅ Cómo verificar: aparecen las páginas de inicio de sesión/registro, la navbar con cuenta + salir y una página de historial con los leads persistidos por usuario (antes se perdían al cerrar el navegador).
Por qué aprender
El inicio de sesión por sí solo no basta: sin RLS, un error en el frontend podría mostrar los datos de un usuario a otro. RLS traslada la defensa al nivel de los datos, donde es confiable. Es la diferencia entre «parece protegido» y «está protegido».
Conceptos clave
Consumen tus tokens.
Inicio de sesión + base de datos.
Defensa en la base de datos.
SQL en el editor.
🛡️ Auditoría de seguridad
Qué es
Con la autenticación configurada, pídele a la IA que actúe como una especialista en seguridad y revisar el código: ¿las rutas protegidas exigen iniciar sesión? ¿Hay alguna clave de API expuesta en el frontend? ¿Los secretos vienen de variables de entorno? ¿RLS está realmente habilitado? Te indica qué no cumple y tú le pides que lo corrija.
¿Qué es?Auditoría de seguridad — una revisión sistemática en busca de vulnerabilidades. Limitación de solicitudes — limitar cuántas veces se puede llamar a un endpoint durante un intervalo, para evitar abusos de costo.
🎯 Objetivo: auditar el código en busca de problemas de seguridad (después de /clear).
Quero que você audite o código em busca de problemas de segurança. Verifique que: - todas as rotas protegidas exigem autenticação; - nenhuma chave de API está exposta no código do frontend; - variáveis de ambiente são usadas para TODOS os segredos; - o Row-Level Security (RLS) está habilitado corretamente. Aja como uma especialista em segurança e reporte tudo que não passar.
✅ Cómo verificar: el informe clasifica los hallazgos (p. ej.: 1 medio, 3 bajos, 1 informativo, ninguno crítico/alto). Un hallazgo típico y que permite actuar: agregar rate limiting en el endpoint de calificación para evitar abusos de costos. Pídele a la IA que corrija los puntos señalados.
Por qué aprender
Una app en producción tiene una superficie de ataque. La auditoría detecta lo que es fácil olvidar: una ruta sin inicio de sesión, una clave filtrada al cliente, RLS desactivado. Tratar a la IA como especialista en seguridad es un patrón poderoso: conoce las brechas comunes y te señala lo que no verías.
Conceptos clave
Exigen inicio de sesión.
La clave queda en el servidor.
Confirma en la base de datos.
Evita el abuso de costos.
💳 Pagos con Stripe (freemium)
Qué es
Incluso un usuario con sesión iniciada puede usar tu clave de IA sin límite (200 leads = 200 llamadas pagadas). La solución es cobrar con Stripe en un modelo freemium: un nivel gratuito con límite (p. ej.: 2 calificaciones por día) y un plan pago (p. ej.: $29/mes, ilimitado) mediante Stripe Checkout. Esto convierte la app en un SaaS.
¿Qué es?Freemium — gratis hasta un límite, de pago para desbloquear el resto. Checkout — la pantalla de pago alojada por Stripe. Price ID — el identificador del precio del producto. Webhook secret — la clave que valida que el aviso de pago realmente venga de Stripe.
🎯 Objetivo: agregar pagos con modelo freemium (en Plan Mode).
Quero adicionar pagamentos com Stripe ao qualificador de leads. O nível grátis recebe <2> qualificações por dia. Passado isso, precisa assinar. O plano pago custa <$29> por mês e dá qualificações ilimitadas. Quero usar o Stripe no fluxo de pagamento. Me guie passo a passo para configurar a conta, criar o produto e conectar o Stripe à Vercel e ao Supabase.
✅ Cómo verificar: la IA genera la página de precios (Gratis vs Pro), las tablas en la base de datos y el cliente/servidor de Stripe. Empieza en el modo de prueba/sandbox de Stripe.
🎯 Objetivo: configurar el producto, el webhook y las 4 claves de Stripe.
1. Stripe (modo teste) → Product catalog → New product: nome "", recorrente, mensal, <$29> → salvar. 2. Abra o produto → Pricing → copie o PRICE ID (guarde num bloco de notas). 3. Developers → API keys → copie publishable key e secret key. 4. Developers → Webhooks → Add endpoint: URL = /api/stripe-webhook (use a URL EXATA que a IA der) Eventos: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted → copie o WEBHOOK SECRET. 5. Supabase → SQL editor → rode a migration gerada (cria a tabela `subscriptions`). 6. Vercel → Settings → Environment Variables → adicione as 4 chaves (secret, publishable, price ID, webhook secret) → salvar → redeploy.
✅ Cómo verificar: en la página de precios, suscríbete a Pro → Checkout de Stripe → tarjeta de prueba (fecha de vencimiento futura, p. ej.: 10/27, cualquier CVC) → suscripción confirmada → aparece una nueva fila en la tabla subscriptions de Supabase.
Por qué aprender
El pago es lo que convierte una app en un producto: ingresos reales y protección contra abusos de costos. El webhook de Stripe es la pieza que "desbloquea" el plan pago cuando se confirma el pago — y el webhook secret garantiza que ese aviso realmente vino de Stripe, no de un impostor.
Conceptos clave
Gratis hasta el límite.
Pantalla de Stripe.
Completed, updated, deleted.
En el panel de Vercel.
🖥️ Frontend para un workflow de n8n (formulario → webhook)
Qué es
La última build une los dos mundos del curso: darle aspecto de app a un workflow de n8n. El ejemplo es un generador de presupuestos (entradas: descripción del proyecto, horas estimadas, tipo de cliente → devuelve un presupuesto). Tú creas un frontend que envía los datos al webhook del flujo y muestra la respuesta. El truco en n8n: cambiar el nodo de form por el Webhook trigger y el nodo de salida mediante Respond to Webhook.
¿Qué es?Respond to Webhook — un nodo de n8n que devuelve la respuesta a quien llamó al webhook para que el frontend la muestre. Placeholder — un valor provisional (p. ej., la URL del webhook) que luego sustituyes por el real.
🎯 Objetivo: planificar el frontend que se comunica con el webhook de n8n.
Me ajude a criar um CLAUDE.md para este projeto. O objetivo é construir um frontend web para um workflow do n8n. O workflow é um gerador de orçamentos: o usuário informa descrição do projeto, horas estimadas e tipo de cliente, e recebe de volta um orçamento profissional. O frontend envia os dados para um webhook do n8n e deve exibir a resposta. Use a skill de front-end design da Anthropic. Me faça as perguntas de esclarecimento que precisar.
✅ Cómo verificar: la IA pregunta qué stack usas y cuál es la URL del webhook (usa un placeholder por ahora) y el formato de la respuesta (p. ej., JSON). Si el diseño queda básico, pide: "La interfaz está muy simple. Asegúrate de usar la skill de diseño front-end" y vuelve a pegar la skill.
🎯 Objetivo: convertir n8n en un webhook y conectar la URL real.
No n8n: 1. Remova o PRIMEIRO nó (form) → adicione um Webhook trigger. 2. Remova o ÚLTIMO nó (saída) → adicione um "Respond to Webhook". 3. Reconecte ambos à lógica existente. 4. PUBLIQUE o workflow e copie a URL de produção do webhook. [prompt] Quando o usuário clicar em "Gerar orçamento", chame este webhook. Substitua o placeholder atual por ele:Na Vercel: Settings → Environment Variables → nova var N8N_WEBHOOK_URL = → salvar → redeploy.
✅ Cómo verificar: completa el form (p. ej.: landing page / salud / 40 h / enterprise) → «Generar presupuesto» → n8n se ejecuta → el presupuesto aparece en la app. Usa la URL de producción y el workflow debe estar publicado.
Por qué aprender
Este build conecta la automatización visual (n8n) con una interfaz de app real — el formulario nativo de n8n funciona, pero la experiencia es limitada y el acceso es restringido. Cambiar form por webhook + «Respond to Webhook» es el patrón para darle a cualquier workflow una interfaz amigable y fácil de compartir.
Conceptos clave
Cambia el disparador.
Devuelve la respuesta.
URL provisional.
URL de producción.
🪜 Iteración incremental (diseño → autenticación → pago)
Qué es
Todo este módulo es una app que creció por capas, partiendo de un prompt de una frase: app funcional → diseño → autenticación → pago → deploy. No necesitas planificar todo de antemano; entrega la v1 y agrega recursos según sea necesario: una buena práctica de ingeniería.
Diagrama ilustrativo — una capa a la vez, probando cada una. La app empezó como una frase y se convirtió en un SaaS con auth y pago.
🎨 Consejo: evita el «look genérico de IA»
Las salidas de IA se parecen porque el modelo predeterminado es el "diseño seguro". Combátelo: pide que use la skill de diseño front-end; busca inspiración (galerías de diseño, bibliotecas de componentes); sube capturas de pantalla de referencia al proyecto; y describe el diseño con precisión (encabezado fijo, logo a la izquierda, CTA con brillo). Da comentarios específicos al iterar: "me gustó X, cambia Y".
Por qué aprender
Iterar por capas mantiene cada paso que se puede probar y revertir: si el pago rompe algo, sabes que fue la última capa. Intentar armar todo de una vez genera un enredo imposible de depurar. Empieza poco a poco, haz una copia de seguridad antes de cada cambio, publica pronto y crece — es el mismo principio que da inicio a la ruta 1.
Tienes que construir una app full-stack con diseño, inicio de sesión y pago. ¿Qué enfoque sigue las buenas prácticas de este módulo?
📌 Resumen del módulo
¡Completaste la Ruta 5! 🎉
Construiste tres proyectos end-to-end. El siguiente paso natural es la Ruta 6 — Producción, Deploy y Seguridad, para reforzar todo esto con confiabilidad y monetización.