Resumen
Un producto web en producción en el que hice el UX, la UI y el desarrollo. Eliges uno de los 30 vibes y obtienes una combinación curada de titular y cuerpo con un perfil de personalidad, consejos de uso y CSS listo para copiar, y luego puedes pedirle más sugerencias a la IA. Disponible en inglés y español, en modo oscuro y claro, en escritorio y móvil.
Reto
Lanzar un producto de IA de pago yo solo: ofrecer sugerencias de IA gratis sin que se disparen los costes de la API, y vender una versión Pro sin crear cuentas de usuario.
Solución
Un plan gratuito con límites semanales en el servidor, y una licencia Pro de pago único que se envía por email y se valida en el servidor. Sin registro en ningún momento.
Estado
Desarrollado y funcionando en typography-vibes.netlify.app. Los pagos Pro ya están hechos y se activan con el lanzamiento público en Product Hunt.
Herramientas
Claude (programación y prototipado), Anthropic API, Netlify y Netlify Functions, Netlify Blobs, Stripe, Resend.
En detalle
Los métodos y herramientas que elegí para este proyecto. Cambian en cada proyecto, según lo que necesite el problema.
Diseñar la experiencia
Empecé por el estado de ánimo en lugar de por los nombres de las fuentes, porque un vibe es como la mayoría de la gente describe la sensación que busca. Cada uno de los 30 vibes lleva a una combinación curada, explicada como la explicaría un diseñador.
- Perfil de personalidad para cada combinación: qué transmite y dónde encaja.
- Consejos de uso y CSS listo para copiar, para que el resultado vaya directo a un proyecto.
- Sugerencias de IA sobre la selección curada, para explorar más allá de los 30 vibes.
- Modo oscuro y claro, un layout para móvil y un selector inglés / español.
Sugerencias de IA con límites
Las sugerencias de IA funcionan con la Anthropic API a través de una función de servidor, nunca desde el navegador, así que la clave se mantiene privada y el uso se puede controlar.
- Pedir: el usuario pide más combinaciones para un vibe.
- Comprobar: el servidor cuenta el uso por huella del dispositivo y número de semana. El plan gratuito permite 3 sugerencias por semana.
- Proteger: el modo incógnito está bloqueado, para que el límite no se pueda reiniciar abriendo una ventana privada.
- Responder: la Anthropic API devuelve las sugerencias.
Pagos sin cuentas
Pro es un pago único de 2,99 € que desbloquea sugerencias ilimitadas. Para que no haya fricción, no hay registro: la clave de licencia es la cuenta.
- Pagar: Stripe Checkout gestiona el pago.
- Recibir: se genera una clave de licencia y se envía por email con Resend.
- Desbloquear: la clave se guarda en el almacenamiento local del navegador.
- Validar: cada petición Pro se comprueba con las claves guardadas en Netlify Blobs.
Desarrollar con Claude
Diseñé y desarrollé todo el producto yo mismo, usando Claude para programar y prototipar. Empezó como un único archivo HTML y después se separó en HTML, CSS y JavaScript, alojado en Netlify con cuatro funciones de servidor:
- suggest.jsSugerencias de IA y registro del uso.
- create-checkout.jsInicia el pago con Stripe.
- send-licence.jsGenera la clave de licencia y la envía por email con Resend.
- validate-licence.jsComprueba las claves en Netlify Blobs.
Aprendizajes
Lo más importante que me llevo del proyecto.
- Las reglas de negocio son decisiones de UX. El límite gratuito, el precio y el flujo de la licencia influyen en la conversión tanto como la interfaz. Encargarme de ambas cosas me permitió diseñarlas juntas en lugar de pasárselas a otro.
- La IA cambia lo que puede lanzar un solo diseñador. Con Claude encargándose de buena parte de la programación, llevé un producto de la idea a pagos funcionando yo solo, mientras las decisiones de diseño y el listón de calidad seguían siendo míos.
- Los límites forman parte de un producto de IA. Hicieron falta límites en el servidor, proteger la clave de la API y bloquear los trucos fáciles antes de poder ofrecer la funcionalidad de IA gratis.
- El lanzamiento es un proyecto en sí mismo. Queda activar los pagos, grabar una demo corta y lanzar en Product Hunt.
