← Workshop The Scratchpad � How to Build HTML with an AI
📄 The Scratchpad

How to build HTML with an AI.

One file. Runs in any browser. No server, no install, no account.
This guide gets you from idea to live page — and back again when things go wrong.

📄 The one rule

Everything goes in one file. No separate CSS files. No JavaScript imports from your own server. No build step. One .html file that a browser can open directly — or that you can paste into a text box and publish instantly.

This is the constraint that makes everything else possible. An AI can write one complete file in a single response. You can read it, copy it, fork it, share it. There is nothing hidden. The hood is always up.

External fonts and libraries from CDNs are fine — those are already on the internet. Everything else: inline it.

🗣️ How to write good instructions

The most common mistake is describing how you feel about something rather than what you actually see. AIs build what they're told. The more precise the instruction, the closer the result.

❌ Too vague

"Make it look better and add some games stuff"

✓ Precise

"Change the background to dark navy. Add a score counter in the top right corner that starts at 0 and increases by 10 each time the player clicks the target."

❌ Too vague

"The timer is broken, fix it"

✓ Precise

"The timer counts down from 30 but stops at 1 instead of 0. When it reaches 0 it should show a Game Over message and stop the player from moving."

Describe what you see on screen, not what you feel about it. "The button is red" is useful. "The button looks wrong" is not.

🚀 Starting prompts — copy and use

These are starting points. Change the words in brackets to match what you want to build.

A simple game:

Build a single self-contained HTML file for a [type of game] game.

Rules: [describe the rules in plain English]
Controls: [keyboard / mouse / touch]
Visual style: [e.g. bright colours, dark background, pixel art feel]
Include: a score counter, a start screen, and a game over screen.
No external files. Everything inline in one HTML file.

A tool or utility:

Build a single self-contained HTML file for a [tool name].

What it does: [describe in plain English what the user can do with it]
Inputs: [what the user types or clicks]
Outputs: [what the tool shows or calculates]
Style: clean, readable, works on mobile.
No external files. Everything inline in one HTML file.

A page or invitation:

Build a single self-contained HTML page for [what it is — e.g. a birthday invitation / event page / personal homepage].

Content to include: [list what should be on it]
Colours: [describe or name them]
Font style: [e.g. friendly and rounded / clean and minimal / bold and dramatic]
No external files. Everything inline in one HTML file.

Forking something that already exists:

Here is an existing HTML file: [paste the full HTML]

Make the following changes only. Do not change anything else:
1. [First change, described precisely]
2. [Second change, described precisely]

Return the complete updated file.

🔁 The revision loop

Almost nothing arrives perfect on the first attempt. That is not a failure — it is the process. Here is how to get from a first draft to something you're happy with:

Ask for all fixes in one pass. "Fix these three things" works better than three separate messages — each message is a fresh context and the AI may introduce inconsistencies between them.

✅ Before you publish — quick checklist

Does your file...

📖 Want to go deeper?

The Metatellicomunicon is the full BTH ritual book — sixteen schools of game-making, with summoning rituals, common bugs, and chronicles from the field. If this guide got you started, the book takes you further.

Built something?

Publish it to the BTH Workshop. It gets a live URL instantly, stays forkable forever, and both you and your AI get the credit.

⚡ Publish your file →
This guide lives in the BTH Workshop. Fork it, improve it, translate it, specialise it for a particular type of game.
The lineage goes with it. That is the whole point.