You have probably had a small wish like this: a little page that calculates a mortgage, a team name-drawer, a tool that splits a list into random groups — and then “you’d need to code it” killed the idea. It no longer has to.
If you can chat, you can have AI build it. You describe what you want in plain words, AI writes the code, you save it and open it in a browser, and there it is — something you can actually click and use. This isn’t about turning you into a programmer; it’s about seeing that building a small tool for yourself now only takes being able to describe what you want.
When to use it
When you want a small tool or page you can’t find online (or the ones you find are clunky) — a calculator, a drawer, a countdown, a tiny sign-up form — and don’t want to learn to code for it.
How to do it
- Open an AI that can write code (Claude or Doubao, or an even easier AI coding tool like Trae / Cursor) and describe the tool in plain words: what it does, what input boxes and buttons it has, what happens on click
- Ask it to “build it as a single HTML file I can open directly in a browser” — one file is the simplest path, no setup needed
- Copy the whole block of code it gives you, save it as a .html file (any name, e.g. tool.html), and double-click to open it in a browser
- See something off? Just say it plainly: “button too small,” “add a percent sign,” “make it blue,” and have it hand you a revised version
Weak vs strong
On the left AI has to guess and usually misses; on the right you spell out the look, the inputs and what a click does — and get a working result the first time.
Copy-paste prompt
Build me a【tool name, e.g. BMI calculator】as a single HTML file I can open directly in a browser with no installation. It needs:【the input fields and what each is for】; a【button label】button; on click it【shows what result, and where】. Keep the UI clean and mobile-friendly. Give me the complete code in one block.
Worked examples
You get：A page you can use right away: paste names, set a group count, click once and get the groups — handy for parties, chores or picking teams.
You get：It applies the changes and hands back the whole file; replace the old one and reopen for the upgraded version. Restyling is entirely a matter of plain words.
Level up
- The easiest route: use an AI coding tool like Trae or Cursor — you describe it, the tool generates the file and previews it beside you, no copy-paste needed; ideal if you want to build several
- Add features step by step: get the simplest version working first, then add “remember my last inputs” or “a copy-result button” one at a time — steadier than asking for everything at once
- Want others to use it: ask for “a single web page I can put online,” then ask how to publish it free (many platforms let you upload one HTML file directly)
Common mistakes
- Asking for a big all-in-one system upfront — AI shines at small, clear tools; for anything complex, break it into separate small features
- Giving up at the first error or blank page — describe exactly what you see (“double-clicking shows a blank page”) and it usually fixes it in a couple of replies
- Not saying “single file, opens directly” — without that it may hand you code that needs a dev setup to run, which trips up beginners
FAQ
I know nothing about code — can this really work?
Are tools made this way safe to use?
Pro tip：Start with one tool you genuinely want and that’s dead simple — a calculator, a countdown. Ship one that actually works, and your sense of what “AI can build for me” changes completely.