01 La idea: demo primero, gastos después
Cuando empiezas a ofrecer desarrollo con IA, el mayor riesgo no es técnico: es pagar herramientas durante meses antes de tener el primer cliente. La alternativa es construir con servicios que tienen plan gratuito, enseñar al cliente algo que funciona (no una presentación) y que sea el primer cobro el que pague las suscripciones que el proyecto necesite para crecer.
Claude Code hace de programador: escribe el código, lo prueba y lo despliega contigo. El resto de piezas son servicios que ya existen y que solo tienes que conectar. Tu trabajo es entender el problema del cliente, elegir las piezas y revisar lo que Claude produce.
02 Las piezas del montaje
| Necesidad | Pieza habitual | Qué tener en cuenta |
|---|---|---|
| Escribir el código | Claude Code | Requiere suscripción de pago o API |
| Guardar el código y su historial | GitHub | Plan gratuito con repositorios privados |
| Framework web | Next.js | Código abierto; Claude lo conoce muy bien |
| Publicar la web | Vercel | El plan Hobby es gratuito pero solo para uso personal y no comercial |
| Base de datos, archivos y usuarios | Supabase | El plan gratuito pausa los proyectos inactivos y limita el número de proyectos |
| Inicio de sesión | Supabase Auth o Clerk | Ambos tienen plan gratuito con límite de usuarios activos |
| Dominio, DNS y protección | Cloudflare | DNS y certificado gratuitos; el dominio se paga aparte |
| Cobros | Stripe | Sin cuota fija; cobra una comisión por transacción |
03 Preparar el entorno
-
1
Instala Claude Code e inicia sesión
Sigue la instalación oficial para tu sistema y ejecuta claude en una carpeta vacía. La primera vez se abre el navegador para que entres con tu cuenta.
-
2
Crea las cuentas
GitHub, el hosting y, si el proyecto lo necesita, Supabase. Usa un correo profesional: más adelante transferirás proyectos a tus clientes.
-
3
Crea el proyecto base
Con el comando de Next.js tienes una aplicación lista para editar. Claude Code puede ejecutarlo por ti si se lo pides.
-
4
Conecta el repositorio al hosting
Sube el código a GitHub e impórtalo desde el panel del hosting. A partir de ahí cada cambio que subas se publica solo.
npx create-next-app@latest mi-demo
cd mi-demo
claude
# Opcional: CLI de Vercel para desplegar sin pasar por el panel
npm i -g vercel
vercel04 Tu primera demo para un cliente
La landing page para un negocio local es el proyecto más fácil de vender y de entregar: no necesita base de datos ni usuarios, el cliente entiende el resultado al instante y te sirve para practicar el ciclo completo. Antes de escribir código, pídele a Claude que planifique. Activa el modo plan con Shift+Tab o escribe tu petición con /plan delante.
Quiero construir una demo de landing page para [tipo de negocio] en [ciudad]. Su cliente ideal es [describe]. Lo que más le importa al negocio es [reservas / llamadas / pedidos].
Antes de tocar nada, propón:
1. Estructura de secciones y el objetivo de cada una.
2. Textos de ejemplo en español de España, sin promesas que el negocio no pueda cumplir.
3. Qué partes podrían conectarse más adelante a un formulario, una reserva o un pago.
4. Lista de lo que necesito pedirle al cliente (logo, fotos, horarios, datos legales).
Usa Next.js, diseño adaptado al móvil y buena velocidad de carga.- ✓Se ve bien en el móvil del cliente, no solo en tu pantalla.
- ✓Los textos no inventan datos: horarios, precios y servicios los confirma el cliente.
- ✓Hay aviso legal, política de privacidad y de cookies si la web recoge datos o usa analítica.
- ✓El formulario de contacto funciona y sabes a qué correo llega.
- ✓Tienes la URL de la demo lista para enviar por WhatsApp o correo.
05 Cuando el proyecto crece
Aplicación con usuarios
Next.js con Supabase para datos e inicio de sesión. Pide a Claude que active las políticas de seguridad por filas desde el principio para que cada usuario vea solo lo suyo.
Tienda o cobros
Añade Stripe en modo de pruebas, con sus tarjetas de prueba, hasta que el cliente valide el flujo completo. Las claves reales nunca van en el código.
Panel con datos
Tablas de Supabase y una página privada con gráficos. Útil para negocios que hoy llevan todo en hojas de cálculo.
Automatizaciones con IA
Funciones en el servidor que llaman a la API de Claude para clasificar formularios, resumir pedidos o redactar respuestas.
06 Errores típicos
- ✓Intentar aprender todas las piezas a la vez: empieza solo con landing pages.
- ✓Dejar el proyecto del cliente en tu cuenta personal sin plan de traspaso.
- ✓Subir claves de API al repositorio en vez de usar variables de entorno.
- ✓No leer el código: Claude se equivoca y tú respondes ante el cliente.
- ✓Presupuestar sin contar dominio, hosting comercial y mantenimiento.
Preguntas frecuentes
Puedes llegar a una demo funcional sin experiencia, porque Claude Code escribe el código. Pero para entregar a clientes necesitas entender lo básico: qué hace cada pieza, dónde están las claves y cómo revisar un cambio antes de publicarlo.
El plan gratuito sirve para conversar, pero Claude Code, que trabaja con los archivos de tu proyecto, necesita una suscripción de pago o una clave de la API.
Lo ideal es que el hosting, la base de datos y el dominio queden a nombre del cliente o de tu empresa con un contrato de mantenimiento claro. Muchos servicios permiten transferir proyectos entre cuentas.
No. Es una buena opción porque Claude lo conoce muy bien y se publica fácilmente, pero puedes usar otro framework o incluso HTML estático para una landing sencilla.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.