Resum
Un producte web en producció en què vaig fer l’UX, la UI i el desenvolupament. Tries un dels 30 vibes i obtens una combinació curada de titular i cos amb un perfil de personalitat, consells d’ús i CSS a punt per copiar, i després pots demanar més suggeriments a la IA. Disponible en anglès i castellà, en mode fosc i clar, a escriptori i mòbil.
Repte
Llançar un producte d’IA de pagament tot sol: oferir suggeriments d’IA gratis sense que es disparin els costos de l’API, i vendre una versió Pro sense crear comptes d’usuari.
Solució
Un pla gratuït amb límits setmanals al servidor, i una llicència Pro de pagament únic que s’envia per correu i es valida al servidor. Sense registre en cap moment.
Estat
Desenvolupat i funcionant a typography-vibes.netlify.app. Els pagaments Pro ja estan fets i s’activen amb el llançament públic a Product Hunt.
Eines
Claude (programació i prototipatge), Anthropic API, Netlify i Netlify Functions, Netlify Blobs, Stripe, Resend.
En detall
Els mètodes i les eines que vaig triar per a aquest projecte. Canvien a cada projecte, segons el que necessiti el problema.
Dissenyar l’experiència
Vaig començar per l’estat d’ànim en lloc de pels noms de les fonts, perquè un vibe és com la majoria de la gent descriu la sensació que busca. Cadascun dels 30 vibes porta a una combinació curada, explicada com l’explicaria un dissenyador.
- Perfil de personalitat per a cada combinació: què transmet i on encaixa.
- Consells d’ús i CSS a punt per copiar, perquè el resultat vagi directe a un projecte.
- Suggeriments d’IA sobre la selecció curada, per explorar més enllà dels 30 vibes.
- Mode fosc i clar, un layout per a mòbil i un selector anglès / castellà.
Suggeriments d’IA amb límits
Els suggeriments d’IA funcionen amb l’Anthropic API a través d’una funció de servidor, mai des del navegador, així que la clau es manté privada i l’ús es pot controlar.
- Demanar: l’usuari demana més combinacions per a un vibe.
- Comprovar: el servidor compta l’ús per empremta del dispositiu i número de setmana. El pla gratuït permet 3 suggeriments per setmana.
- Protegir: el mode d’incògnit està bloquejat, perquè el límit no es pugui reiniciar obrint una finestra privada.
- Respondre: l’Anthropic API retorna els suggeriments.
Pagaments sense comptes
Pro és un pagament únic de 2,99 € que desbloqueja suggeriments il·limitats. Perquè no hi hagi fricció, no hi ha registre: la clau de llicència és el compte.
- Pagar: Stripe Checkout gestiona el pagament.
- Rebre: es genera una clau de llicència i s’envia per correu amb Resend.
- Desbloquejar: la clau es desa a l’emmagatzematge local del navegador.
- Validar: cada petició Pro es comprova amb les claus desades a Netlify Blobs.
Desenvolupar amb Claude
Vaig dissenyar i desenvolupar tot el producte jo mateix, fent servir Claude per programar i prototipar. Va començar com un únic fitxer HTML i després es va separar en HTML, CSS i JavaScript, allotjat a Netlify amb quatre funcions de servidor:
- suggest.jsSuggeriments d’IA i registre de l’ús.
- create-checkout.jsInicia el pagament amb Stripe.
- send-licence.jsGenera la clau de llicència i l’envia per correu amb Resend.
- validate-licence.jsComprova les claus a Netlify Blobs.
Aprenentatges
El més important que m’enduc del projecte.
- Les regles de negoci són decisions d’UX. El límit gratuït, el preu i el flux de la llicència influeixen en la conversió tant com la interfície. Encarregar-me de totes dues coses em va permetre dissenyar-les juntes en lloc de passar-les a algú altre.
- La IA canvia el que pot llançar un sol dissenyador. Amb Claude encarregant-se de bona part de la programació, vaig portar un producte de la idea a pagaments funcionant tot sol, mentre les decisions de disseny i el llistó de qualitat continuaven sent meus.
- Els límits formen part d’un producte d’IA. Van caldre límits al servidor, protegir la clau de l’API i bloquejar els trucs fàcils abans de poder oferir la funcionalitat d’IA gratis.
- El llançament és un projecte en si mateix. Queda activar els pagaments, gravar una demo curta i llançar a Product Hunt.
