Start with the synthetic worked example or other non-sensitive inputs. Run one prompt at a time in your chosen AI tool. Replace any bracketed placeholders with the requested material, check each reply, and supply the source or earlier outputs that step needs. Paste them again if the tool lacks that context.
Set up the worked example
Open
Open a new conversation in a text AI assistant that can write HTML code. Also open a plain-text editor, which saves text without word-processing formatting, and have a browser available for opening a local HTML file. Use a device where you are allowed to run local JavaScript. If your device cannot save and open local HTML files, you can read the code, but the browser-testing part remains unfinished. No particular product, plan or download feature is assumed.
Add the sample
Copy the complete SYNTHETIC APP BRIEF from this guide’s sample input, through the final “Not required” line. Paste it in place of [paste brief] beneath BRIEF in the step 1 prompt, then send that whole prompt. Keep steps 1–5 in the same chat so “the agreed timer” refers to the state table you have checked. Send step 2 only after checking step 1.
For step 3, reopen your saved HTML file in the text editor and copy all of its contents. Use those actual saved bytes to replace [paste file] beneath HTML, rather than copying an earlier chat version. For step 4, use that same reviewed file and chat; the prompt asks for a test plan, and you must carry out the browser actions yourself. For step 5, put the entire version you actually tested under SOURCE and your own observed results under TEST LOG, replacing both [paste] placeholders. Do not paste the guide’s illustrative output as a test log. The linked focus-timer.html is an author-supplied example, separate from anything your assistant generates. Keep your generated file under the name my-focus-timer.html; testing the supplied example does not prove your generated file works.
Start with the synthetic example, then adapt each prompt to your task.
01
Write the state contract before code
Describe exactly what each button does. A tiny app becomes easier to test when every visible state is named.
Your starting prompt
Using this brief, produce a state-transition table for Ready, Focusing, Paused and Session complete. Include which controls are enabled, what Reset does, how repeated Start clicks are prevented and what reload does. Identify privacy-sensitive features to exclude. Do not add accounts, storage, network, permissions or deployment.
BRIEF:
[paste brief]
Expect
The reply should describe Ready, Focusing, Paused and Session complete in a table, including what each button does, when task/duration controls are locked and what happens on reload. This is the behavior plan; code comes in step 2.
Check
Check that Pause keeps the remaining time, Resume continues it, Reset restores the chosen duration and Start again begins a full session. The initial display should be 25:00, with 5-minute and 10-second alternatives. The plan must keep the brief’s local-only limits: no accounts, saved history, network requests or permissions.
If it differs
If a button’s behavior is missing or the assistant adds reminders, accounts, saved history or another feature, point to the relevant brief line and ask for a corrected table before sending step 2. Do not accept a different plan just because it sounds more capable.
02
Generate one inspectable file
Ask for the whole file, with ordinary HTML controls and no dependencies. Save it as plain text ending in .html, not .txt.
Your starting prompt
Implement the agreed timer as a complete self-contained HTML file. Include inline CSS and JavaScript, labeled input/select, native buttons, a visible timer and a separate polite status region. Use a monotonic deadline based on performance.now() to derive remaining time, rather than subtracting one per callback. Cancel old intervals on pause/reset/completion. No remote resources, network calls, storage, eval, innerHTML from user input, forms or permission APIs. Add an in-page manual test checklist and warn about background/device-sleep timing limits.
Expect
The reply should contain one complete HTML document with its styles and JavaScript inside it. If your assistant provides a downloadable HTML file, save it as my-focus-timer.html. Otherwise, copy the full code, from <!doctype html> through </html>, into a new plain-text file and save it as my-focus-timer.html. Do not include the assistant’s explanation or code-block markers. Save the file now, but leave it unopened in the browser until the source review in step 3.
Check
Open the saved file in the text editor and confirm that it contains the whole document and ends in .html, not .html.txt. The response should not require an installation, terminal command, account, server, separate script or upload to a website. Check that the 10-second option and manual checklist are included.
If it differs
If you receive only a preview, screenshot, short code fragment or instructions to install a framework, ask for the complete single-file HTML required by the original prompt. If the file is saved as a formatted document or .txt file, create a new plain-text file with the .html filename. If your device cannot do this, keep the code and leave local execution untested rather than treating the preview as a passed test.
03
Review the source before opening
Search for hidden dependencies and behaviors that violate the brief. Source review can catch an unwanted feature before the file is run.
Your starting prompt
Audit this HTML against the brief. Inspect script tags, URLs, fetch/XMLHttpRequest/WebSocket/sendBeacon, storage/cookies, permission APIs, form actions, eval and any insertion of task text as HTML. Check timer cleanup, duplicate-start prevention, zero clamping and locked controls. Report exact issues and return a corrected complete file if needed. Do not claim browser tests ran.
HTML:
[paste file]
Expect
The reply should explain any source-code problems and give a complete corrected file if needed. It should distinguish reading code from running a browser test. If a correction is supplied, save it as a new version, such as my-focus-timer-v2.html, and use that exact version for the next checks.
Check
Use the text editor’s search to find the terms named in the audit prompt, and read the explanation for any match. A term may appear in a warning or comment, so a match needs review rather than automatic deletion. Confirm that actual code does not load remote files, send data, store information or request permissions, and that task text is not treated as HTML. An AI audit or a search with no matches does not by itself establish that generated code is safe.
If it differs
Keep the file unopened if the audit finds unexplained remote code, data sending, storage or a permission request. Ask for a complete corrected file and repeat the source review. If you cannot understand whether a flagged line performs a forbidden action, get that code explained and reviewed before running it. Do not bypass a browser warning, change device security settings or install extra software to make this exercise work.
04
Open locally and test every state
Use the supplied 10-second option so a beginner can reach completion without waiting through a full session. Do not upload the file to a hosting service.
Your starting prompt
Make an executable manual test plan for the downloaded local file. Cover initial 25:00, 10-second selection, Start, Pause, unchanged paused display, Resume, completion at 00:00, Start again, Reset, duration change, keyboard operation and reload reset. State the expected result for each action. Separate source-only checks from browser checks, and record only outcomes actually observed.
Expect
The reply should be a manual test plan with expected results, not a list of already-passed tests. After reviewing the source, open your saved .html file in your browser. Open the file itself from your device; do not upload it to a hosting site or paste its code into the browser address bar. You should initially see the task label, 25:00, Ready and the controls.
Check
Keep the page visible. Choose 10 seconds, press Start and wait for the number to fall. Check that task and duration cannot be edited. Press Pause, note the displayed time, wait a few seconds and check that it stays still. Press Resume and let it reach 00:00 and Session complete. Try Start again, then Reset; Reset should restore the selected duration. Check duration changes, Tab navigation and Enter/Space on buttons, then reload and confirm 25:00 and the example task. Narrow the browser window and check that the timer and controls remain usable without horizontal clipping. Write down each actual result, the filename/version and browser used; mark anything you did not try as unrun. Background or sleeping-device behavior is not guaranteed, so do not use this as an alarm or for time-critical tasks.
If it differs
If the browser shows source text, recheck that the file is plain text named with an .html ending and that you opened it in a browser. If the page is blank, controls fail or JavaScript is blocked, record exactly what happened. Follow device restrictions rather than bypassing them. Close the page if it asks for a login, permission, upload or installation. Use the observed failure and saved source in step 5; do not replace a failed result with the guide’s supplied timer and call your generated file fixed.
05
Fix one failure and retest the whole flow
A correct screenshot is not enough. A button can look right while its timer continues in the background.
Your starting prompt
Using this test log and source, identify the smallest change that addresses each observed failure without adding scope. Return the complete corrected HTML and a regression checklist covering all previous state transitions, privacy restrictions and narrow-screen layout. Keep failed or unrun checks explicit. Do not invent a passed browser, accessibility audit or consumer-tool benchmark.
SOURCE:
[paste]
TEST LOG:
[paste]
Expect
For an observed failure, the reply should explain a small repair, supply the whole corrected HTML file and give a checklist to repeat. Keep your previous file, save the repair as a new version and repeat the source review before opening it. If you observed no failure, no repair is needed; keep your actual test log without inventing a problem.
Check
Test the repaired file, not an older browser tab or the supplied focus-timer.html. Repeat all step 4 states and keyboard checks, not only the failed action. Also narrow the browser window and check that the timer and controls remain usable without horizontal clipping. Retain failed and unrun checks. A successful code review or screenshot is not a completed browser test or accessibility audit.
If it differs
If the failure remains, return the exact action, expected result, observed result and complete current source to the same chat. Ask for the smallest correction within the original brief, save a new version and repeat source and browser checks. If the assistant cannot fix it without adding external services or changing device permissions, stop with the failure recorded and keep the file for review.
Optional: improve the result
Turn state tests into regression tests
Keep the same privacy and feature boundary. Automate behavior tests locally before extending the app.
Advanced prompt
Using this exact HTML, write local browser regression tests for every documented state transition. Control time in the test harness without adding a production network dependency. Assert no nonlocal request, no browser exception, no negative countdown, no duplicate timer, paused stability, reload reset and keyboard activation. Add narrow-screen overflow checks. Report the browser/version and observed results; leave unexecuted checks clearly marked. Do not add storage, accounts or hosting.
HTML:
[paste]
Optional: use your own input+
Make a timer for your own simple task
Open a new conversation in an AI assistant that can write HTML, plus a plain-text editor for saving the file. You need a browser and a device where local JavaScript is allowed. Paste the prompt below, replacing [write a non-sensitive task label] with a short label such as “Sort the craft drawer” and [write the starting duration and any other choices] with your choices, such as “Start at 15 minutes; also offer 5 minutes and a 10-second test”. Keep it a simple local countdown, without private information, accounts, saved history or notifications. Check the assistant’s behavior table, then send “The plan is correct; make the HTML.” The assistant should stop at each later gate: save the file, review its exact source, perform browser checks yourself and repair only observed failures. Do not confirm a check you have not done. Use the new timer’s actual starting time and label in reload tests; the sample’s 25:00/example-task results and optional advanced test prompt do not establish that your new file works.
Your own-input prompt
Guide me through making a small local-only countdown timer for my own task. Work one stage at a time and wait for my explicit next message. Do not write a replacement guide or claim to run the app for me.
TASK LABEL:
[write a non-sensitive task label]
DURATIONS:
[write the starting duration and any other choices]
Keep a 10-second test option. The states are Ready, Focusing, Paused and Session complete. Start begins a session; Pause freezes the remaining time; Resume continues it; Reset restores the selected duration; Start again starts a full session after completion. Lock task and duration while running or paused. Finish at 00:00 without negative time. Reload resets to the agreed starting duration and task.
The app must be one complete HTML file containing its CSS and JavaScript, with native labeled controls, a visible countdown and a separate polite status message. No framework, installation, server, remote resources, network calls, storage, account, form submission, clipboard access, permission APIs, eval or insertion of task text as HTML. Use a performance.now() deadline to derive remaining time, cancel old intervals on pause/reset/completion and prevent duplicate starts. Include a manual checklist and explain that background tabs/device sleep can delay updates. This is not an alarm or a time-critical timer. Make no health or productivity claims.
1. Agree the behavior. Ask about missing or invalid durations. Then show a behavior table using my actual label and durations, including initial/reload display, each control’s action and when controls are locked. Keep every restriction above. Do not generate code yet. Ask me to check the table and reply “The plan is correct; make the HTML” only if I agree. If I request a change, update the table and wait again.
2. Make and save the file. After that confirmation, return the entire HTML, from <!doctype html> through </html>. Explain how to save it as my-task-timer.html: either save the provided file, if supported, or copy only the complete code into a plain-text editor, leaving out code-block markers and explanations. Check the filename ends in .html rather than .html.txt. Tell me to keep it unopened in the browser for now. Ask me to send “Review this exact HTML before I open it” and paste the entire saved file under HTML. Stop there.
3. Review the saved source. When I provide that message and complete file, inspect it against our agreed table and restrictions. Review actual script/URL behavior, remote resources, network APIs, storage/cookies, permissions, form actions, eval and handling of task text, as well as timer cleanup, zero clamping, locked controls and duplicate-start prevention. Explain exact issues in plain language. A word in a comment is not itself a forbidden action; a search with no matches or an AI assurance is not proof of safety. Do not claim browser tests ran. If changes are needed, return a complete corrected file, tell me to save a new version and repeat this source-review stage on that exact file. If I cannot understand a flagged risk, tell me to keep it unopened until the code has been explained and reviewed. Never tell me to bypass a browser warning, change security settings or install extra software. When no issues remain identified, report the limits of the source review and wait for me to say “The source review is clear; give me the browser checks.”
4. Open and test. After that message, give me a manual checklist with expected results based on my actual task and durations. Explain opening the saved .html file itself in my browser, without uploading it or pasting code into the address bar. If the device cannot save/open local HTML or blocks JavaScript, leave the browser test unrun and respect its restrictions. Test the initial display; choosing 10 seconds; Start; locked controls; Pause, followed by a wait to confirm the display stays still; Resume; completion at 00:00; Start again; Reset; changing duration; Tab navigation and Enter/Space on buttons; reload; and a narrow window without clipped controls. Tell me to record the filename/version, browser, expected result and actual observation for each check. Do not fill in results for me. If the page asks for a login, permission, upload or installation, tell me to close it. Stop and wait for my observations.
5. Repair only observed failures. If I send “Fix these observed failures”, require the complete tested HTML under SOURCE and my real observations under TEST LOG. Use those to explain the smallest in-scope repair and return a complete corrected file. Keep earlier versions; repeat source review before opening the new file, then repeat all relevant browser checks, not just the failed one. Keep failed and unrun checks explicit. If my log has no observed failure, do not invent one or make an unnecessary repair. Do not substitute the guide’s supplied focus-timer.html for my generated file. If I later ask for automated tests, use this agreed brief and the exact HTML; adapt initial/reload values instead of reusing the sample results, and leave unexecuted tests unrun.
Check your own result
Your actual task label and valid durations are agreed before code is generated, including a 10-second test and every local-only restriction.
Save a complete plain .html file, keep its name/version clear and have that exact source reviewed before opening it. Unexplained risky code stays unopened.
Use each next-stage command only after the stated check. Neither an AI audit nor the supplied sample timer proves that the generated file is safe or works.
Perform the browser actions yourself, including paused stability, completion, reset, keyboard use and reload with your actual defaults. Record real observations, failures and unrun checks.
After a repair, review and retest the new file. Match any later optional automated tests to the new brief and actual HTML, and stop if a safe local path is unavailable.
Show, then try
See the shape of the result.
This input is synthetic. The output is a written illustration of the intended result, not a verified AI-tool run.
01 / The starting point
Synthetic input
SYNTHETIC APP BRIEF
Make a browser tool called One Small Task. Its only job is to show a countdown while someone works on a self-chosen task.
Initial task: Draft one clear paragraph. Initial duration: 25 minutes. Other choices: 5 minutes and a 10-second demo.
Required states: Ready, Focusing, Paused and Session complete.
Start begins the selected session; Pause freezes it; Resume continues what remains; Reset restores the selected duration; Start again begins a full new session after completion.
Lock task and duration while running or paused. Show completion at 00:00, never a negative time. Reload resets all app state.
Constraints: one HTML file, no framework, no remote library or font, no network calls, no storage, no account, no form submission, no clipboard access, no notification, microphone or location permissions. Use native labeled controls and a visible state message. No productivity or health claims.
Not required: analytics, sign-in, reminders, saved history, sync, payment or deployment.
Copies text only. For image or file tasks, use the source files named in the steps too.
RUNNABLE ARTIFACT / ONE SMALL TASK
Download focus-timer.html from this record, save it on your computer and open the file in a browser. It includes all HTML, CSS and JavaScript. There is no build step, server, account or external asset.
WHAT IS INCLUDED
- Task label, with the fictional example “Draft one clear paragraph”.
- 25-minute and 5-minute sessions, plus a 10-second control-test option.
- Start, Pause, Resume, Reset and Start again controls.
- Visible countdown and a separate state message.
- Native keyboard-operable controls and an in-file test checklist.
STATE CONTRACT
Ready: chosen duration is displayed; task and duration are editable; Pause is disabled.
Focusing: countdown runs; Start, task and duration are disabled; Pause and Reset are available.
Paused: remaining time stops; Resume and Reset are available; task and duration stay locked so the session is not silently changed.
Session complete: countdown is 00:00; Pause is disabled; Start again begins a full new session. Task and duration become editable.
Reset: cancel the active interval, return to Ready and restore the selected duration. Keep the task text for this open page.
Page load or page show: the app explicitly resets to 25 minutes and the example task. It stores no session to recover. Browser-level autofill can still act independently.
TRY IT
Choose 10 seconds. Start, wait for the number to change, pause, wait again and check the number stays still. Resume and let it finish. Check for 00:00 and Session complete. Start again, then Reset. Tab to the buttons and try Enter or Space. Close and reopen the file to check the default state. Separately check reload/back behavior in your browser; the app does not store a session.
PRIVACY AND LIMITS
The source makes no network request, uses no application storage and asks for no permissions. The typed task is not inserted as HTML or transmitted. Browser-level autofill, history and restore behavior remain separate browser features.
No sound or notification is produced. The page must remain open. Background throttling and device sleep can delay updates, and behavior across sleeping devices can vary; this is not an alarm or a time-critical timer. It makes no claim to improve focus or treat a health condition.
VERIFICATION SCOPE
The complete supplied JavaScript was executed in a deterministic local state harness with a minimal simulated document and controlled clock. The source/state checks passed; they are not a browser-rendering, keyboard or accessibility test. A headless browser attempt was blocked by the execution environment, so visual/browser behavior remains unverified. The consumer-tool generation workflow is illustrative and has not been executed or benchmarked. Preview and test the actual downloaded file in your own browser before relying on it.
These checks use the worked example and its particular facts. With your own material, check your actual names, numbers, sources and rules; do not reuse the sample’s values as the answer.
Unsaved checks stay in this tab and reset when you reload. If you choose Save guide, its current example checkmarks are kept in this browser when storage is available.
!
A few things to watch for.
Treating a generated screenshot or code listing as evidence that interactions work.
Adding analytics, saved data or notification permissions to a deliberately local-only tool.
Decrementing a counter per callback and assuming background tabs run each callback on schedule.
What has been checked?
Documentation
No dated source review recorded.
Included files
No scoped artifact-check record.
AI workflow
Not run in a recorded consumer-AI workflow.
Time savings
Time savings not measured
For context and further reading
Official documentation
Documentation review is not tool-execution evidence. This resource remains illustrative and not tool-tested.