A finished example: one task, written completely
The example covers one job at Harbor Lane Cycles, a fictional repair shop: checking in a bike for repair at the service counter. The shop, names, prices and rules are invented to show the level of detail that helps. Starting with a single task written completely gives a new hire something usable on day one, and the next task can become its own section later.
Try following the check-in steps with a customer waiting. They tell you what to ask, what to record, and when to stop and ask for help. The short check at the end catches two rules a new hire could easily miss: the deposit amount and the same-day cutoff.
Notice what isn't there: a mission statement, a long welcome, decorative graphics. Headings, numbered steps, a table and a checklist carry most of the weight in a manual someone reads while working.
Write down what only you know
No template or AI tool knows how your workplace runs. Before you think about layout, write the task the way you'd explain it to someone standing beside you: what you do first, what you check, what you tell the customer, and what happens when something goes wrong. Rough fragments are fine.
Then add what a new person would otherwise have to ask you: who to contact and how, any rule with a number in it, and the mistakes you find yourself correcting. In the example, those became the contact cards, the tag table and the quiz.
If something isn't decided yet, such as whether e-bikes need a mechanic's sign-off, mark it as an open question. Don't let anyone, including an AI, fill it in with a plausible-sounding rule.
Turn your notes into a page (AI optional)
If the manual has to be a Word document or PDF for an HR system, a compliance file or a printed binder, use a document template and paste the same notes in. If it will mostly be read on a phone or a counter computer, a single web page is a practical alternative, and that's where AI can handle the formatting.
HTML is the code web pages are written in, and you don't have to write it yourself. Paste the prompt below into an AI chat tool along with your notes, and ask for one HTML file. The prompt covers details that are easy to forget: headings a screen reader can follow, tag colors that also have text labels, a layout that fits a narrow phone screen, and no buttons that pretend to submit anything.
Replace every bracketed part. The sample values come from the fictional shop and only show how specific to be.
Test it like it's your first day
Open the page on your phone and follow the task from start to finish without filling gaps from memory. Wherever you hesitate, a step needs rewriting. Then take the quiz: if a correct answer doesn't match the steps, fix one or the other before anyone else sees it. Better still, hand it to a coworker who doesn't do this task. They'll stop at the steps you skipped because they felt obvious.
When the procedure changes, keep one current page
Procedures change in small ways. Say that a few weeks in, the fictional shop starts storing intake photos under the work-order number instead of the customer’s name. If the manual went out as an email attachment, everyone now holds a copy with the old step, and you're sending a new version and hoping the first one gets deleted.
If you keep the HTML page in NOS and share it as a link, you can edit that step's text directly on the page, without asking the AI to rebuild the whole manual. The link staff already have stays the same, so the next time someone opens it, they read the new step. People you share it with don't need an account to open it.
Add a “Last updated” line with a one-sentence note on what changed, so returning staff know where to look. Direct edits are for wording. If a change affects a quiz's correct answer, regenerate that quiz section instead of only retyping the question.
Pick the task a new person will do first, write it the way you'd say it out loud, and build the page from that.
A prompt to adapt
Create a training manual as a single, self-contained HTML file. Put all CSS and JavaScript inline. Use no external libraries, fonts, images or network requests.
Business: [Business name and type — e.g., Harbor Lane Cycles, a small bike repair shop]
Task this manual covers: [One task — e.g., checking in a bike for repair at the service counter]
Who reads it: [Reader — e.g., new seasonal counter staff in their first week]
Steps, in order (keep my meaning; tighten wording but do not add or remove steps): [Your steps]
Rules with numbers: [e.g., $20 deposit on repairs quoted over $100; same-day pickup only if checked in before 11:00 a.m.]
Status tags or codes: [e.g., Green = ready for pickup; Yellow = waiting on parts; Red = needs mechanic review, do not quote]
Who to ask: [Names or roles and how to reach them — e.g., Shop lead: Dana, counter phone ext. 2]
Common mistakes to warn about: [e.g., forgetting to photograph existing scratches before racking]
Open questions (show them as [TO CONFIRM]; do not answer them): [e.g., whether e-bikes need mechanic sign-off]
Last updated: [Date and a one-line note on what changed]
Layout: a title and one-line purpose; a short “Before you start” section; numbered steps that each begin with a verb; a table of status tags with the meaning written in words; a contact section; an end-of-task checklist; a three-question multiple-choice quiz drawn only from the steps and rules above, showing a short explanation after an answer is chosen.
Requirements:
- Use only the facts I gave. Do not invent policies, numbers, names or contact details.
- Accessibility: one h1 and logical h2/h3 headings; a real table with header cells; strong text contrast against the background; never use color alone to show meaning; quiz options as keyboard-usable buttons with visible focus outlines.
- Mobile: readable on a phone about 360px wide with no sideways page scrolling; let the table scroll inside its own box or stack into rows; make buttons large enough to tap comfortably; keep body text easy to read without zooming.
- No forms, submit buttons, logins, downloads, tracking, or text claiming that answers are saved or sent anywhere.
- Return only the complete HTML file.