Back to Blog

I Made Claude Build a Pomodoro Timer From One Prompt (Claude Code Tutorial 2026)

By Ayyaz Zafar
Claude Code Pomodoro timer tutorial, single HTML file with 25-min work cycle

A working Pomodoro timer in a single HTML file. 25 minutes of focus, then a 5-minute break, with a clean progress indicator and an actual countdown. All from one sentence of prompt.

This is the fifth video in my "Claude builds X from one prompt" experiment. After Snake, Vercel clone, and the sketch-to-app build, I wanted to try a productivity utility instead of another visual demo. Pomodoro is a good fit: every developer knows the format, the logic is simple to verify, and a polished version is genuinely useful.

What You Need

  • VS Code, or any editor with an integrated terminal
  • Claude Code installed (claude --version to confirm)
  • An empty folder

That is it. No npm, no bundler, no React. The output is a single self-contained HTML file you can open in any browser.

The Setup

Make a fresh folder and open it in VS Code:

mkdir ~/Main/Work/experiments/pomodoro
cd ~/Main/Work/experiments/pomodoro
code .

Open the terminal inside VS Code and run:

claude

Trust the folder. You will land at the Claude Code prompt with nothing in scope except the empty directory.

The Prompt

This is the entire prompt I used:

Build me a polished Pomodoro timer as a single HTML file. 25-min work + 5-min break cycles. Show progress visually.

One sentence. I did not pick fonts. I did not specify colors. I did not ask for sound effects or browser notifications. The Snake video already proved the lesson, but I keep testing it because it keeps surprising me. Minimal prompts work better than detailed ones.

What Claude Built

Plan mode showed the structure first:

  • A central countdown display, big and readable from across the room
  • A circular progress ring that drains as the cycle runs
  • State machine to switch between work and break phases automatically
  • Start, pause, and reset buttons
  • A small label that says whether the current cycle is "Work" or "Break"

I hit yes to write the file. About 45 seconds later, index.html appeared. I opened it in the browser.

It Worked First Time

Unlike the Snake video, this one did not need a bug-fix beat. The timer started at 25:00. The progress ring drained smoothly. The phase label switched correctly when the cycle ended. The reset button reset everything.

The styling was better than I expected. A muted dark background, the countdown in a large display font, the ring in a soft accent color. Subtle pulse animation when you hit pause. The kind of polish you would not bother adding manually for a quick personal tool.

Using It

I open the HTML file straight from the file system (no server needed) and pin the tab. When I am in a focus block I leave it visible. The countdown does the thing it is supposed to do. It is faster to launch than any of the Pomodoro apps I have used over the years, and it has zero subscription, zero tracking, zero account.

That last point matters more to me than I expected. A 5-line prompt produces a tool that is mine, lives on my disk, and never phones home.

The Pattern, Repeated

Five videos in, the same recipe keeps working:

  1. Empty folder
  2. Claude Code in the terminal
  3. One short prompt naming what you want
  4. Let Claude write
  5. Open the file in a browser

The variations are only in what you ask for. So far in this series I have built:

None of them needed a framework. None needed a build step. The whole point is to keep the surface area tiny so the AI has a clean target.

What to Build Next

If you are trying this for the first time, pick a tool you use every day. A unit converter. A markdown previewer. A color-picker tool for design tokens. A scratchpad with auto-save. A flashcard timer. Anything that lives as a single HTML file is fair game.

The prompt template is always the same: name the thing, name the key behavior, ask for polish.

Source

Full single HTML file plus a README is in the repo: clone, open, customize. The README has a small section on how I would extend it (browser notifications, sound, cycle count tracking) if you want to keep going past the one-prompt baseline.

Subscribe for the Next One

This series is the easiest way to see what current AI can do without a lot of theory. Pick a target, type a sentence, watch it build. Subscribe to AyyazTech on YouTube to catch the next experiment.

Share this article

I Made Claude Build a Pomodoro Timer From One Prompt (Claude Code Tutorial 2026) | AyyazTech