Build a small internal tool from scratch

Describe a small tool and Claude Code builds it as plain HTML, CSS and JavaScript files with no framework or build step, then opens it for you.

Task: Build a small internal tool from scratch · Other tasks

Fill in the details

Tool to build (required)

Name it in a few words. The prompt reads "Create a ..." followed by this text.

What it must do

Optional. One line per feature. Leave out anything you can add in a later prompt.

Data

Folder for the files

Optional. Claude creates every file here.

Copy your prompt

This site doesn't run Claude or show model output. Results depend on your input and the model you use.

Your prompt (you can edit it)

Create a [fill in: Tool to build] using HTML, CSS, and vanilla JavaScript, then open it in my browser.

Data: keep data in memory only; it may reset when the page reloads.

Rules:
- No frameworks, no build step, no packages to install and no files loaded from other servers. It must work from local files.
- Create new files only. Do not change or delete existing files.
- Keep it small: a single HTML, CSS and JavaScript file each is fine.
- Make it usable with a keyboard and readable at phone width.
- If something I asked for is unclear, ask before you build that part. Do not fill gaps silently.

When it is built, if you have a browser tool (the Desktop preview, the Chrome extension or a Playwright MCP server), open it and try each feature, use it with the keyboard only, check it at phone width, and if data is saved, reload to confirm it is kept. If not, say it was not verified, give me the file path, and list the checks I should do by hand.

Finish with:
1. The files you created.
2. How to use each feature.
3. What you checked in the browser, or that it was not verified.
4. Any assumptions you made, and what the tool does not do.

1 required field is empty.

What you type is kept in this tab's session storage so a reload doesn't lose it. Use "Clear this task" to remove it. Browsers can restore session data when they reopen tabs, so closing a tab isn't a guaranteed way to erase it.

When to use this template

You need a small tool for yourself or your team, such as a board, a calculator, a checklist or a formatter, and a full project with a framework would be overkill.
You are not a developer, or not a front-end one, and want something working you can open and try instead of a specification.
You want to try an idea quickly before deciding whether it deserves a real project. Claude Code works in any directory, not only inside an existing code project.

When not to use it

The tool needs shared data, logins or several users at once. That needs a server and storage, which this prompt deliberately leaves out; plan it as a real project.
You want the feature inside an existing app. Use the follow-a-pattern template so it matches the app's structure.
The tool would handle sensitive or regulated data. A quick local page skips the review, access control and storage rules that data needs.

Why this structure

The opening request fixes the stack to HTML, CSS and vanilla JavaScript, and the first rule removes frameworks, build steps and outside files. The result runs from local files with nothing to install.
The browser check asks Claude to use the tool the way you will: each feature, keyboard only, phone width, and a reload when data is saved. Without a browser tool, Claude says it was not verified and lists manual checks, so the report states whether the tool was actually used.
The data setting decides whether the tool remembers anything. Choosing it up front avoids a tool that loses your work on reload, or one that stores data you did not expect it to keep.
The new-files-only rule, with an optional folder, keeps the tool from touching anything else in the directory where you run Claude Code.
The ask-before-guessing rule and the assumptions list in the report keep Claude's gap-filling visible, so you know what to correct in the next prompt.

Example input (fictional)

Tool to build

drag-and-drop Kanban board with three columns

What it must do

Add a card with a title. Drag cards between the To do, Doing and Done columns. Delete a card. Show the number of cards in each column.

Data

save data in the browser's local storage so it survives a reload

Folder for the files

tools/kanban/

Follow-ups to send Claude

Add a button that exports all cards to a JSON file and another that imports one.
Add a filter box that hides cards whose title does not contain the typed text.
Review the code for anything that would break with 500 cards, and fix what you find.

Common mistakes

Listing every feature you might ever want in the first prompt. Start with the core, open it, use it, then ask for the next feature.
Forgetting to say whether data should be kept. Without that, you may lose what you entered the first time you reload.
Treating the tool as finished software. It has no tests or access control; keep it to internal, low-stakes use unless someone reviews it.

Turn a mockup into a working prototype: Attach a mockup image in Claude Code and get a clickable prototype that follows its layout and states, built in its own folder with fake data.
Write a spec by interview: Let Claude Code interview you about a feature, covering implementation, UX, edge cases and tradeoffs, then write a self-contained spec to a file.
Add a small, well-defined feature: State the endpoint and what it returns; Claude Code finds where similar endpoints live, adds yours alongside them with tests, and runs the suite.

See all templates

Sources

Claude Code docs: Prompt library (Anthropic documentation)
How Anthropic teams use Claude Code (Anthropic documentation)
Claude Code docs: Common workflows, work in notes and non-code folders (Anthropic documentation)