A step-by-step guide to turning your idea into a clickable prototype with the AI of your choice — we recommend Claude. Ready-to-copy prompts included: in about an hour, you'll have something to show.
By the end of this guide, you'll have an interactive prototype of your idea: a single HTML file you can open in your browser and share around.
Your prototype fits in one file. It opens in any browser, travels by email and works without installing anything.
An idea told in words stays abstract. A screen people can click triggers real reactions: it's the fastest way to test your intuition.
With a prototype in hand, every conversation gets sharper — with your partners, your first users, and with the team that will take it to production.
No technical skills required. You'll need an idea you care about, the conversational AI of your choice — we recommend Claude — and about an hour.
Before writing a single prompt, lay the groundwork. The clearer your idea, the more accurate the prototype. Take five minutes to answer these four questions:
Open your AI, then send it the prompt below, replacing the bracketed part with your answers from step 1. It generates a complete HTML file and shows you a preview.
No account yet? Create one for free at claude.ai — the AI we recommend for this exercise.
I want to create [describe your idea in 2-3 sentences: who it's for, the problem it solves, the user's main action]. Generate an interactive prototype as a single HTML file, with a clean, modern design, that I can open directly in my browser. Focus on the main screen and the key user flow, and use realistic sample data.
I want to create an online store for my handcrafted jewelry brand. It's for people looking for unique pieces bought directly from the maker, and lets them browse the collection and buy a piece. Generate an interactive prototype as a single HTML file, with a clean, modern design, that I can open directly in my browser. Focus on the collection page and the purchase flow, and use realistic sample data.
I want to create a booking site for my beauty salon. It's for my clients who want to book a treatment without calling: they pick a treatment, choose a time slot and confirm their appointment. Generate an interactive prototype as a single HTML file, with a clean, modern design, that I can open directly in my browser. Focus on the treatment and time-slot selection screen, and use realistic sample data.
The first result is rarely right on the first try — that's the whole point of the exercise. Ask for adjustments step by step and watch the prototype get closer to your vision with every exchange.
Here's what I want to change: [list your adjustments]. Keep everything else identical and give me back the complete file, ready to open.
Add [a page / a screen / a visual feature]. Polish the design: [mood, color palette, references you like]. Make everything responsive on mobile.
Here's what I want to change: feature the collection right on arrival, add a filter by jewelry type (rings, necklaces, earrings) and soften the palette towards cream and gold tones. Keep everything else identical and give me back the complete file, ready to open.
Add an "Our treatments" page with the duration and a short description of each treatment. Polish the design: spa mood, powdery tones, elegant typography. Make everything responsive on mobile.
Your prototype belongs to you. To save and share it:
Your prototype makes your idea tangible — that's exactly its job, and it does it well. But before putting it in the hands of real users, here's what remains to be built. And that's normal: no prototype is designed for this, and yours remains an excellent starting point.
No data protection, no input validation: a prototype isn't equipped for real-world use, let alone malicious use.
The data on screen is fictional and vanishes on every reload. A product relies on a properly designed, backed-up, managed database.
Accounts, login, passwords, sessions: all of it remains to be built — and it's one of the trickiest things to get right.
A prototype works as long as everything goes as planned. A product must absorb errors, edge cases and unexpected usage without losing the user.
Ten visitors or ten thousand: a product must stay fast as the audience grows. That's decided in the architecture, from the foundations.
Browsers, dependencies, security flaws: a product's environment never stops moving. Without care, it degrades.
Payments, emails, calendars, business tools: the prototype simulates them. The product must connect to them for real, with their constraints and failure cases.
Beyond the demo screen, every feature must be fully built, tested and validated in all its variants.
Typography, motion, micro-interactions, consistency across every screen: the signature that sets a premium product apart from a demo.
Generated code without architecture quickly becomes hard to evolve. A product rests on structured, documented code — code that belongs to you.
You have the prototype; turning that starting point into a real, lasting, professional product is exactly our craft. We audit it together, keep what holds up and architect the rest for production: security, data, reliability, polish. Bring it to us — we'll tell you concretely how we'd turn it into a product.