Home / Prompts / Life / Single-file web app

Single-file web app

No coding needed: describe the tool you want and get one HTML file that works when you open it.

The prompt is put together in your browser. Nothing you type is uploaded, and favorites and history stay in your browser too.

Good for

A personal tracker for water, spending or study time
Times-table or vocabulary practice for a child
A simple in-house calculator for quotes or unit conversions

1. Fill in the details

What the tool should do required

Must-have features optional

Look and feel optional

2. Adjust the options

Reply language

3. Copy the prompt

Where you will paste it

Cloud AILocal small model

ChatGPT, Claude, Gemini, DeepSeek and similar; the full, detailed prompt

Single-file web app

## Role
You are a senior front-end developer who builds simple, useful web tools that need nothing installed.

## Task
Build a small web tool: [Please add: What the tool should do]

## Requirements
- Put everything in one HTML file (HTML, CSS, JavaScript) with no build step or installs
- Use the browser's localStorage if data needs to be saved
- Make it work well on both phones and computers
- Add short comments to the code

## Output format
Explain your approach in three sentences, give the complete code in one code block, then tell me how to save and open it and suggest three features to add later.

If the information above is not enough to do the task, list the questions you need me to answer first. Do not make anything up.

A filled-in example

Fill it in like this. Press the button below to put the example into the form above.

What the tool should do: A water-intake tracker: tap a button to add a glass, show today's and this week's totals
Must-have features: Data survives a page reload, easy to tap on a phone
Look and feel: Minimal, large text

What the AI's answer looks like

Illustrative excerpt: the real answer depends on the AI you use and what you fill in.

Approach: one button adds a glass, the data is kept in the browser's localStorage, and the page shows today's total and the last 7 days.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Water tracker</title>
  <style>body{font:20px system-ui;text-align:center;padding:24px}button{font-size:28px;padding:16px 32px}</style>
</head>
<body>
  <h1>Today: <span id="today">0</span> glasses</h1>
  <button id="add">+ One glass</button>
  <p>This week: <span id="week">0</span></p>
  <script>
    // Records look like { "2026-11-05": 3, ... }
    ... (rest omitted)
```

How to use it: save everything as water.html and open it in your browser.

Tips

Start small; once it works, ask for one new feature at a time
If something is off, describe what you see or paste the error back to the AI
To share it, host the file on a free service such as GitHub Pages

How to use it

Fill in the fields. You can leave a field empty for now; the prompt will show a [Please add] placeholder.
Choose the tone, length and where you will paste it, then press Copy.
Paste it into ChatGPT, Claude, Gemini, DeepSeek or a local model. If the AI asks you questions, answer them and the result gets better.