Overview
A live web product where I did the UX, the UI and the build. Pick one of 30 vibes to get a curated heading and body pairing with a personality profile, usage tips and copy-ready CSS, then ask the AI for more suggestions. Available in English and Spanish, in dark and light mode, on desktop and mobile.
Challenge
Shipping a paid AI product as one person: offering AI suggestions for free without letting API costs run away, and selling a Pro version without building user accounts.
Solution
A free tier with server-side weekly limits, and a one-time Pro license delivered by email and validated on the server. No sign-up needed at any point.
Status
Built and running at typography-vibes.netlify.app. Pro payments are built and switch on with the public launch on Product Hunt.
Tools
Claude (programming and prototyping), Anthropic API, Netlify and Netlify Functions, Netlify Blobs, Stripe, Resend.
In depth
The methods and tools I chose for this project. They change with every project, depending on what the problem needs.
Designing the experience
I started from mood instead of font names, because a vibe is how most people describe the feel they want. Each of the 30 vibes leads to one curated pairing, explained the way a designer would explain it.
- Personality profile for every pairing: what it communicates and where it fits.
- Usage tips and copy-ready CSS, so the result goes straight into a project.
- AI suggestions on top of the curated set, for exploring beyond the 30 vibes.
- Dark and light mode, a mobile layout and an English / Spanish toggle.
AI suggestions with guardrails
AI suggestions run on the Anthropic API through a server function, never from the browser, so the key stays private and usage can be controlled.
- Ask: the user requests more pairings for a vibe.
- Check: the server counts usage by device fingerprint and week number. The free tier allows 3 suggestions a week.
- Protect: incognito mode is blocked, so the limit can’t be reset by opening a private window.
- Answer: the Anthropic API returns the suggestions.
Payments without accounts
Pro is a €2.99 one-time payment that unlocks unlimited suggestions. To keep it frictionless, there’s no sign-up: the license key is the account.
- Pay: Stripe Checkout handles the payment.
- Receive: a license key is generated and emailed through Resend.
- Unlock: the key is saved in the browser’s local storage.
- Validate: each Pro request is checked against keys stored in Netlify Blobs.
Building with Claude
I designed and built the whole product myself, using Claude for programming and prototyping. It began as a single HTML file and was then split into HTML, CSS and JavaScript, hosted on Netlify with four server functions:
- suggest.jsAI suggestions and usage tracking.
- create-checkout.jsStarts the Stripe payment.
- send-licence.jsGenerates the license key and emails it with Resend.
- validate-licence.jsChecks keys against Netlify Blobs.
Insights
Key takeaways from the project.
- Business rules are UX decisions. The free limit, the price and the license flow shape conversion as much as the interface does. Owning both meant designing them together instead of handing them off.
- AI changes what one designer can ship. With Claude handling much of the programming, I took a product from idea to working payments on my own, while the design decisions and the quality bar stayed with me.
- Guardrails are part of an AI product. Server-side limits, protecting the API key and blocking easy workarounds were needed before the AI feature could be offered for free.
- Launch is its own project. What’s left is going live with payments, recording a short demo and launching on Product Hunt.
