# 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.

Paste into: **Claude Code**, started in your project folder

## Prompt template

How the builder on the page fills in this template, so you can do the same:

- `{{key}}` becomes the text entered for that field, exactly as typed. Empty text, or text that is only whitespace (spaces, tabs or line breaks), counts as empty: a required field then becomes `[fill in: <label>]` with its label, and an optional field becomes nothing.
- For a choice field, `{{key}}` becomes the text of the chosen option, or of the default when none is chosen.
- Text between `{{#key}}` and `{{/key}}` stays only when that field is not empty; a choice field always counts as filled. The markers themselves are removed, and a marker that stands alone on its line takes its line break with it.
- Each value is inserted once, as it is: `{{…}}` inside a value stays as typed.

```text
Create a {{tool}} using HTML, CSS, and vanilla JavaScript, then open it in my browser.
{{#features}}

It must:
{{features}}
{{/features}}

Data: {{storage}}.

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{{#folder}}, in {{folder}}{{/folder}}. 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.
```

## Fields

- `{{tool}}` (required): Tool to build. Name it in a few words. The prompt reads "Create a ..." followed by this text.
- `{{features}}`: What it must do. Optional. One line per feature. Leave out anything you can add in a later prompt.
- `{{storage}}`: Data. Choose one:
  - keep data in memory only; it may reset when the page reloads (default)
  - save data in the browser's local storage so it survives a reload
- `{{folder}}`: Folder for the files. Optional. Claude creates every file here.

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

## 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.

## Related templates

- [Turn a mockup into a working prototype](https://awesomeclaudeprompts.com/prompts/mockup-to-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](https://awesomeclaudeprompts.com/prompts/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](https://awesomeclaudeprompts.com/prompts/add-small-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.

## Sources

- [Claude Code docs: Prompt library](https://code.claude.com/docs/en/prompt-library) (Anthropic documentation)
- [How Anthropic teams use Claude Code](https://claude.com/blog/how-anthropic-teams-use-claude-code) (Anthropic documentation)
- [Claude Code docs: Common workflows, work in notes and non-code folders](https://code.claude.com/docs/en/common-workflows#work-in-notes-and-non-code-folders) (Anthropic documentation)

---

Awesome Claude Prompts is an independent project. It is not affiliated with, endorsed by, or sponsored by Anthropic. Claude is a trademark of Anthropic, PBC.