Un regalo de @ia_con_lala

4 prompts
para reemplazar
tu stack SaaS

Notion, Typeform, Calendly y Loom — construidos desde cero con Claude Code en una sola tarde.

$744
Al año en SaaS
$0
Después de construir
Por Laura Calle · @ia_con_lala
Antes de empezar

Lo que necesitas antes de pegar el primer prompt

Estos prompts son potentes, pero asumen que ya tienes unas cuantas piezas listas. Te ahorro horas si revisas esto primero.

Cuentas que vas a necesitar (todas gratis para empezar):

De cada cuenta saca las claves y guárdalas en un archivo de notas. Cuando un prompt diga [SUPABASE_URL], [RESEND_KEY], etc., reemplazas con los valores reales.

Nota importante de seguridad

Cuando Claude Code te arme la app, asegúrate de que las claves queden en un archivo .env.local y nunca en el código del cliente. Si no estás segura, dile a Claude al final del prompt: «usa variables de entorno para todas las claves y nunca las expongas en el frontend».

¿Cómo usar este documento? Abres Claude Code en la terminal, copias el prompt completo, reemplazas los corchetes con tus datos, y le das enter. Ya. El resto lo hace Claude.

— Prompt 01

Notion

$10/mes$0 con Claude Code

Una wiki en markdown con editor de comandos slash, búsqueda y páginas públicas compartibles.

El prompt — pega esto en Claude Code
Constrúyeme una app de wiki en markdown. Necesito: — Una página principal en / que muestre todas las páginas en un árbol lateral, organizadas por carpetas. — Páginas en /[slug] con renderizado markdown: títulos, listas, bloques de código, embeds, y referencias enlazadas entre páginas. — Una ruta /new para crear páginas con editor por bloques de comandos slash. Al escribir "/" se abre un menú con: títulos, listas, código, imágenes, separadores, callouts. — Todas las páginas guardadas en Supabase (URL: [SUPABASE_URL], key: [SUPABASE_KEY]) con los siguientes campos: id, slug, title, content (markdown), parent_id, created_at, updated_at. — Búsqueda de texto completo en todas las páginas mediante una paleta de comandos con Cmd+K. — Toggle público/privado por página. Las páginas públicas se renderizan en /p/[slug] sin autenticación. — Una ruta /admin (contraseña: [PASSWORD]) para gestionar páginas, configurar permisos y borrar en lote. — Diseño responsivo para móvil. Usa Next.js, Tailwind y MDX. Despliega en Vercel. — Mi nombre para mostrar es [YOUR_NAME]. — Usa variables de entorno para todas las claves y nunca las expongas en el frontend.
Mi tip extra para ti

Si quieres que se vea elegante (no genérico de Tailwind), agrégale al final: «Usa una paleta crema #FAF3E8, texto marrón oscuro #231E19 y acento dorado #93633C. Tipografía serif para títulos y sans para cuerpo.»

— Prompt 02

Typeform

$25/mes$0 con Claude Code

Un formulario conversacional con lógica de ramificación, colores personalizables y entrega por webhook.

El prompt — pega esto en Claude Code
Constrúyeme una app de formularios conversacionales. Necesito: — Una página pública del formulario en /f/[form-id] que muestre UNA pregunta a la vez, en pantalla completa, con transiciones suaves entre preguntas. — Tipos de pregunta: texto corto, texto largo, opción múltiple, selección única, email, número, rating (1-10), fecha. — Ramificación condicional: según la respuesta, saltar a otra pregunta o saltarse algunas. — Barra de progreso arriba. Atajos de teclado (Enter para enviar, flechas para opciones). — Constructor de formularios en /admin (contraseña: [PASSWORD]) donde pueda: · Crear formularios arrastrando para reordenar preguntas. · Configurar lógica de ramificación por pregunta (si respuesta = X, ir a Y). · Personalizar el color de acento por formulario. — Formularios y respuestas guardados en Supabase (URL: [URL], key: [KEY]). Tablas: forms, questions, responses. — Al completar el formulario: hacer POST del payload de respuestas a un webhook que yo configuro por formulario, y enviarme un correo vía Resend (key: [RESEND_KEY]). — Diseño responsivo para móvil. Usa Next.js, Tailwind y Framer Motion. Despliega en Vercel. — Usa variables de entorno para todas las claves y nunca las expongas en el frontend.
Mi tip extra para ti

Si vas a usarlo para captar leads de los cursos de IA, dile a Claude que agregue: «Después de enviar, mostrar una pantalla de gracias con un botón configurable que redirija a una URL.» Te sirve para mandar a la gente directo a una página de venta.

— Prompt 03

Calendly

$12/mes$0 con Claude Code

Página de reservas con disponibilidad real de Google Calendar y links de Meet generados automáticamente.

El prompt — pega esto en Claude Code
Constrúyeme una app full-stack de agendamiento. Necesito: — Una página pública de reservas en /book donde los visitantes elijan fecha, seleccionen un slot disponible de 30 minutos, e ingresen nombre + email para confirmar. — Sincronizar la disponibilidad real desde la API de Google Calendar (calendar ID: [YOUR_CALENDAR_ID]), para que solo se muestren los slots cuando estoy libre. — Al confirmar la reserva: crear un evento en Google Calendar con ambos asistentes y un link de Google Meet generado automáticamente. — Enviar correos de confirmación a mí + a quien reserve, vía Resend (key: [RESEND_KEY]). — Una ruta /admin (contraseña: [PASSWORD]) que muestre las próximas reservas con opción de cancelar y reagendar. — Una página /settings donde configure: horario de trabajo, tiempo de buffer entre reuniones, y fechas bloqueadas específicas. — Diseño responsivo para móvil. Usa Next.js y Tailwind. Despliega en Vercel. — Mi nombre es [YOUR_NAME]. Mi zona horaria es [YOUR_TZ]. Duración por defecto: 30 minutos. — Usa variables de entorno para todas las claves y nunca las expongas en el frontend.
Mi tip extra para ti

Para conectar Google Calendar API necesitas crear un proyecto en Google Cloud Console y habilitar Calendar API + Meet. Si te pierdes en eso, pídele a Claude: «Guíame paso a paso para crear las credenciales de Google Calendar API antes de empezar a programar.»

— Prompt 04

Loom

$15/mes$0 con Claude Code

Grabador de pantalla del navegador con transcripción automática, tracking de vistas y URLs compartibles.

El prompt — pega esto en Claude Code
Constrúyeme una app de grabación de pantalla + plataforma para compartir. Necesito: — Una ruta /record que pida permisos de pantalla + micrófono, grabe usando la API MediaRecorder, muestre preview en vivo, con overlay de webcam picture-in-picture (toggleable). — Al detener: subir el video a Supabase Storage (URL: [URL], key: [KEY]) en un bucket llamado "recordings". — Generar automáticamente una URL pública para compartir en /v/[id] con un reproductor estilo Loom: play/pause, barra de progreso, velocidad de reproducción, pantalla completa. — Trackear vistas y clics en Supabase. Tabla "views" con: recording_id, ip_hash, viewed_at. — Una ruta /library (contraseña: [PASSWORD]) que muestre mis grabaciones con conteo de vistas, URLs para compartir, y botones para borrar. — Auto-transcribir cada grabación con Whisper (OpenAI key: [OPENAI_KEY]) y mostrar subtítulos en el reproductor. — La grabación funciona en Chrome/Firefox desktop. Reproducción responsiva en móvil. — Usa Next.js y Tailwind. Despliega en Vercel. — Usa variables de entorno para todas las claves y nunca las expongas en el frontend.
Mi tip extra para ti

La transcripción con Whisper te cuesta como $0.006 USD por minuto de video. Súper barato. Si grabas 100 videos de 5 minutos al mes, son $3 USD al mes contra los $15 de Loom. Hace toda la diferencia.

El cierre

Eso es todo.
Te toca a ti.

No es magia, no es gratis tampoco. Es saberle hablar a Claude. Y ahora ya tienes el manual.

$744
Ahorro al año
~6h
Tiempo total de build
$20
Claude Pro / mes

Cualquier duda, escríbeme por DM en Instagram. Te respondo siempre.

Soy Laura, explico el mundo
de forma fácil para que nada se te quede atrás.

Otras guías que te pueden gustar

Si te gustó esta, te van a gustar estas también.