Mapa de la ruta
Contenido detallado
🧠 Modelo mental y primera app
De lo que se ejecuta en segundo plano a lo que ve el usuario, y a la primera app en línea: background vs. visible, frontend vs. backend, el ciclo request/response, consejos de diseño, la skill de diseño, lenguaje de prompt de diseño, el build del AI Lead Qualifier y la conexión frontend ↔ backend.
La diferencia entre lo que se ejecuta de forma invisible en segundo plano (workflows, scripts) y lo que ve el usuario: una app con una interfaz con la que las personas interactúan.
Es el cambio clave de la ruta: pasar de la automatización invisible a un producto que otras personas usan.
Fondo vs interfaz; app full-stack; empezar simple e iterar por features.
El frontend es todo lo que ve el usuario (botones, formularios, fuentes, diseño) y se ejecuta en el navegador; el backend se ejecuta en el servidor y almacena la lógica, las llamadas a la API y la base de datos.
Es el modelo mental que sustenta todo lo demás sobre las apps: no necesitas dominar cada detalle, pero sí interiorizar esta separación.
Navegador vs. servidor; UX (navegabilidad, legibilidad, claridad); separación de responsabilidades.
El ciclo continuo de intercambio: el usuario hace clic → se envía una solicitud al servidor → el servidor procesa (guarda datos, llama a una API, ejecuta lógica) → vuelve la respuesta → el frontend actualiza la pantalla.
Entender este ir y venir explica por qué las apps necesitan una interfaz e interacción en tiempo real, a diferencia de los workflows que se ejecutan en segundo plano.
Solicitud → procesamiento → respuesta → actualización de la UI; interacción en tiempo real.
Técnicas para crear sitios atractivos y originales, evitando el aspecto genérico que suelen tener los sitios generados por IA (layouts, colores, gradientes y heros estandarizados).
Una app con apariencia de producto transmite credibilidad; el resultado "seguro y predecible" de la IA pasa desapercibido.
Por qué los outputs de IA se parecen; los prompts genéricos generan resultados genéricos; feedback específico.
Usar la skill de diseño para mejorar la UI; clonar sitios de galerías o inspirarse en ellos; subir capturas de pantalla de referencia y pedir algo parecido.
Es el atajo con mayor impacto visual: una skill de diseño cambia el resultado incluso con un solo prompt.
Skill de diseño frontend; galerías de inspiración; bibliotecas de componentes; referencia por imagen.
Describe el diseño, los componentes y el estilo visual con precisión (p. ej., header fijo con el logo a la izquierda, enlaces a la derecha, CTA con brillo azul, hero con texto grande y en negrita), y da comentarios específicos durante las iteraciones.
Un vocabulario concreto evita el ciclo infinito de "está mal": dices qué te gustó y qué cambiar.
Diseño/componentes/tono; comentarios sobre lo que te gustó y lo que no; iteración dirigida.
El build de punta a punta de una app full-stack para calificar leads: backend en Trigger.dev, frontend en Vercel, conectados, desde un prompt simple hasta la app publicada.
Es el proyecto central que reúne los conceptos en una app real y accesible mediante una URL.
CLAUDE.md + estructura base; deploy de desarrollo y producción; resultado: puntuación, resumen y próximos pasos.
Conectar el frontend con el backend mediante claves/variables de entorno en Vercel (la secret key de Trigger.dev), con deploy automático en cada push a GitHub.
Es lo que hace que la interfaz se comunique con la lógica y mantiene el sitio siempre actualizado.
Secret key como env var; nunca la pegues en el chat; auto-deploy vía GitHub.
🔐 Producción real: autenticación, seguridad, pagos e integración
Inicio de sesión, protección de datos, ingresos y conexión de un frontend a un workflow de n8n: por qué autenticar, autenticación con Supabase, Row-Level Security, migración SQL y URL de autenticación, auditoría de seguridad, freemium con Stripe, producto/claves/webhook de Stripe, frontend para workflow de n8n y el repaso de la iteración incremental.
Una app sin inicio de sesión permite que cualquier persona que tenga la URL active el workflow y consuma tus tokens de IA: tú pagas por el uso de los demás.
La autenticación protege el uso y los datos; es el primer paso antes de dejar la app abierta en producción.
Riesgo de la app abierta; protege el uso y los datos; usuarios con sus propios datos.
Agregar inicio de sesión/registro usando Supabase como proveedor de base de datos y autenticación: crear el proyecto, definir la contraseña de la base de datos (distinta de la contraseña de inicio de sesión) y elegir la región.
Un proveedor listo te ofrece autenticación y base de datos sin que tengas que montar todo desde cero.
Project URL + publishable key como env vars en Vercel; contraseña de la base de datos ≠ contraseña de inicio de sesión.
Reglas que viven dentro de la base de datos para aislar los datos entre usuarios; aunque haya un bug en el frontend, nadie ve los datos de otra persona.
Es una capa adicional de seguridad que no depende de que el código de la interfaz sea perfecto.
Aislamiento por fila; defensa en profundidad; activar RLS en la tabla.
Ejecuta en el editor SQL de Supabase la migración generada por la IA (p. ej., crear la tabla de leads) y configura la URL de la app (Vercel) y la redirect URL en la configuración de autenticación.
Sin el esquema en la base de datos y las URLs correctas, el inicio de sesión no completa el flujo de regreso a la app.
SQL editor; tabla creada por migración; URL de la app + redirect URL.
Pedirle a la IA que actúe como especialista en seguridad y revise las rutas protegidas, que no haya claves expuestas en el frontend, que los secretos solo estén en variables de entorno y que RLS esté activo.
Una auditoría explícita detecta vulnerabilidades antes de que lleguen a producción.
Rutas protegidas; sin claves expuestas; secretos en variables de entorno; RLS verificado.
Agregar pagos con Stripe en un modelo freemium: un nivel gratis limitado (p. ej., 2 calificaciones/día) y un nivel pago (suscripción) mediante Stripe Checkout.
Completa la transición de "solo un workflow" a una app que puede generar ingresos y limitar el consumo.
Nivel gratis vs. pro; suscripción recurrente; Checkout.
Crear el producto recurrente, copiar el price ID, obtener las claves (publishable + secret), crear el webhook con los eventos correctos y ejecutar la migración de la tabla de suscripciones.
Son las cuatro piezas que conectan el pago con tu app y mantienen el estado de la suscripción.
Price ID; cuatro claves; eventos de checkout/suscripción; tabla de subscriptions.
Conectar un workflow de n8n a un frontend, reemplazando el nodo de formulario por un Webhook (trigger) y el nodo final por "Respond to Webhook", y conectándolos mediante una env var en Vercel.
Es el patrón para darle una interfaz atractiva a cualquier workflow de n8n y abrirlo mediante una URL.
Cambiar el primer y el último nodo por webhooks; URL de producción; env var en Vercel.
El resumen del recorrido: la app comenzó como un prompt de una frase y creció por capas: diseño → autenticación → pago.
La buena ingeniería es incremental: empezar en pequeño, publicar pronto y escalar según la necesidad, sin planearlo todo de una vez.
Capas; publicar la primera versión; crecer con features.